<div v-dragx="{ dragBarClass: 'drag', dragContainerId: 'page', multiSelect, active }" @bindUpdate="bindUpdate" @bindActive="activeDom" @bindUpdateDoms="bindUpdateDoms" @bindFinishMove="pushStackByDom" @bindFinishMoveDoms="pushStackByDoms" :style="style" :id="uId"> </div>
// 添加一个适当的事件监听器 <div @bindUpdate="bindUpdate" /> // 创建并分发事件 el.dispatchEvent(new CustomEvent('bindUpdate', { detail: data }))
字段说明
<template> <div v-dragx="{ dragBarClass: 'drag', dragContainerId: 'page', multiSelect, active }" @bindUpdate="bindUpdate" @bindActive="activeDom" @bindUpdateDoms="bindUpdateDoms" @bindFinishMove="pushStackByDom" @bindFinishMoveDoms="pushStackByDoms" :style="style" :id="uId"> <slot></slot> <span></span> </div> </template> <script> export default { data () { return { prevSize: {} } }, props: { item: { type: Object, default: () => ({}) }, isVariable: { type: Boolean, default: false }, active: { type: Boolean, default: false }, size: { type: Object, default: () => ({ x: 200, y: 200, w: 200, h: 24 }) }, multiSelect: { type: Boolean, default: false }, uId: { type: String, required: true }, dragContainerId: { type: String } }, computed: { style: function () { return { top: this.size.y + 'px', left: this.size.x + 'px', width: this.size.w + 'px', height: this.size.h + 'px' } } }, methods: { activeDom (e) { this.$emit('activated', this.uId, e.detail.x, e.detail.y) this.prevSize = { ...this.size } }, bindUpdate (event) { let data = event.detail this.size.x = data.left this.size.y = data.top this.$store.dispatch('RESIZE_ID', { id: this.uId, ...data }) this.$emit('resizing', { ...data }) }, bindUpdateDoms (e) { this.$emit('movingDoms', e.detail) }, pushStackByDom (e) { this.$store.dispatch('RESIZE_ID', { prevSize: this.prevSize, id: this.uId, ...event.detail }) }, pushStackByDoms (e) { this.$emit('finishMoveDoms', e.detail) } } } </script> <style scoped> .drag { background-color: #ccc; border-top: solid 1px rgba(33, 61, 223, 0.541); border-bottom: solid 1px rgba(33, 61, 223, 0.541); } .drag-wrap { position: absolute; } .icon-icon-resize { position: absolute; right: 0; bottom: 0; line-height: 12px; cursor: se-resize; font-size: 12px; color: #666; } </style>
因为涉及到多个组件的通信，因此使用vuex，把模板信息和执行栈全部保存在vuex中
最终实现的效果如下图所示
