el: '',
},
}
},
components: {},
methods: {
startGalleryEditing (event) {
this.status.showGalleryEditor = true
this.store.pk = $(event.target).parent().find('ul').data('pk')
this.store.images = $(event.target).parent().find('img').toArray().map((e) => e.getAttribute('src'))
window.p = $(event.target).parent().find('ul')
},
},
})
})
</script>
第2部分是插入组件：
<gallery-editor :status="status" :images="store.images" :pk="store.pk">
</gallery-editor>vue 组件单独一个 js 文件
位置如下：
public/vendor/components/gallery-editor.js 定义如下：
Vue.component('gallery-editor', {
props: {
status: {
showGalleryEditor: false,
},
images: [],
pk: 0,
moveTo: [],
},
data () {
return {}
},
watch: {
images (newVal, oldVal) {
this.moveTo = [] for (let src of newVal) {
this.moveTo.push({
src: src,
productId: this.pk,
deleted: 0,
})
}
},
},
methods: {
close () {
this.status.showGalleryEditor = false
},
save () {
let args = {_token: LA.token}
args.id = this.pk
args.images = [] args.move_to = [] // console.log(JSON.stringify(this.moveTo))
for (let imgObj of this.moveTo) {
if (imgObj.deleted) {
continue
}
if (imgObj.productId === this.pk) {
args.images.push(imgObj.src)
} else {
args.move_to.push({src: imgObj.src, product_id: imgObj.productId})
}
}
// console.log(JSON.stringify(args))
$.post('/admin/products/move-images', args).done(() => {
toastr.success('success')
this.status.showGalleryEditor = false
}).fail((response) => {
toastr.error(response.responseText)
})
},
},
template: `
<div class="modal" tabindex="-1" role="dialog" :class="{show: status.showGalleryEditor, fade: !status.showGalleryEditor}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Editing images</h4>
</div>
<div class="modal-body">
<ul style="list-style-type: none;">
<li v-for="(imageObj, key) in moveTo" :key="key" style="margin-bottom: 8px">
