VUE低代码开发-拖拉拽生成前端代码_vue拖拽控件生成界面代码

效果展示

方法说明

使用Vue.directive(‘draggable’, draggable)插入自定义指令

 
 A--拖拽元素 
 
 B--拖入元素 

import handle from \"./handle\"export default { inserted(el, binding, vnode) { const { value } = binding // 添加 contenteditable 属性并设置为 true if (value && value.edit) { el.setAttribute(\'contenteditable\', \'true\') } // 添加 draggable 属性并设置为 true if (value && value.clone && value.drag) { el.setAttribute(\'draggable\', \'true\') // 添加克隆事件监听器 el.addEventListener(\'dragstart\', handle.onDragClone); el.addEventListener(\'drag\', handle.onDrag); el.addEventListener(\'dragend\', handle.onDragend); } else if (value && value.drag) { el.setAttribute(\'draggable\', \'true\') // 添加事件监听器 el.addEventListener(\'dragstart\', handle.onDragStart); el.addEventListener(\'drag\', handle.onDrag); el.addEventListener(\'dragend\', handle.onDragend); } // 添加可移入事件