当前位置: 首页 > Web前端 > vue.js

VueDraggable4.x适配Vue3.x

时间:2023-03-31 17:41:13 vue.js

适配VueDraggable4.x,Vue3.x组件菜单box1:{{element.typeText}}效果框2:

box1克隆菜单,box2绑定v-model,list2变化。在拖入结束事件@end中,需要同步更新到外部父容器。发射:['update:modelValue','mpContainerItemAdd','mpContainerBgColorChange'],props:{modelValue:Array,list1:{type:Array,required:true},dropConClass:{type:Object,default:()=>({})},mpContainerBgColor:{//小程序背景颜色type:String,default:'#666666'},},data(){return{options1:{name:'drag_list',pull:'clone',put:false},//clone表示赋值,左边的节点不需要删除。containerBgColor:'#ffffff'}},cloneMenuItem事件克隆属性节点。handleEnd事件在从左边拖到box2完成后将list2数据源同步到父组件。影响: