VueDraggable4.x|VueDraggable4.x 适配 Vue3.x
适配 VueDraggable4.x , Vue3.x
组件菜单box1:
{{element.typeText}}
效果box2:
box1对菜单进行clone， box2 绑定v-model， list2发生变化。在拖入结束事件@end中需要同步更新到外界父容器。
emits: ['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'
}
},【VueDraggable4.x|VueDraggable4.x 适配 Vue3.x】cloneMenuItem 事件对属性节点进行克隆。 handleEnd事件当从左侧拖入到box2完成时将list2数据源同步到父组件。
效果：
文章图片
推荐阅读
- 2019-08-29|2019-08-29 iOS13适配那点事
- Android6.0~9.0适配
- CocoaAsyncSocket|CocoaAsyncSocket （GCDAsyncSocket）适配IPv6
- 20.小程序（布局适配方案（rpx、px、vw、vh））
- iOS10|iOS10 WKWebView里的视频播放转屏适配
- SpringMVC（6）（注解的处理器映射器和适配器）
- Apache APISIX 2.12.0 版本发布，新功能更适配新一年！
- (移动端适配px转rem)react配置rem插件lib-flexible和postcss-px2rem-exclude
- 超详细的ARM架构适配介绍！
- Android 64位架构适配