如何控制组件在设计画布只能拖入一次?

domky

如何控制组件在设计画布只能拖入一次?

我知道答案 回答被采纳将会获得200 威望 已有6人回答

admin

当组件从左侧的组件面板拖拽到设计画布上时，会触发draggable组件的move钩子，因此在这里控制即可。
具体查看源码widget-panel\index.vue中的checkContainerMove、checkFieldMove方法。

vform

给不需要拖动的组件加一个class。
在draggable上添加filter
修改拖动的逻辑，不在拖动的时候生成ID

1. <draggable tag="ul" :list="basicFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
   
2.                      :move="checkFieldMove"
   
3.                      filter=".added"
   
4.                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
   
5.             <li v-for="(fld, index) in basicFields" :key="index"
   
6.                 class="field-widget-item"
   
7.                 :class="{added: widgetRefList.includes(fld.options.name)}"
   
8.                 :title="fld.displayName"
   
9.                 @dblclick="addFieldByDbClick(fld)">
   
10.               <span><svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>{{ fld.displayName }}</span>
    
11.             </li>
    
12.           </draggable>

复制代码

data

1. widgetRefList: []

复制代码

watch

1. 'designer.widgetList': {
   
2.       deep: true,
   
3.       handler(val) {
   
4.         this.$nextTick(() => {
   
5.           this.widgetRefList = Object.keys(this.designer.formWidget.widgetRefList)
   
6.         })
   
7.       }
   
8.     }

复制代码

mount

1. this.$nextTick(() => {
   
2.       this.widgetRefList = Object.keys(this.designer.formWidget.widgetRefList)
   
3.     })

复制代码

vtest

vform 发表于 2023-3-21 13:37
给不需要拖动的组件加一个class。
在draggable上添加filter

这方法也很6

vform

vtest 发表于 2023-3-21 14:17
这方法也很6

我修改了拖动的逻辑，不在拖动的时候生成ID，所以可以这么干

yyx

具体查看源码widget-panel\index.vue中的checkContainerMove、checkFieldMove方法。

dpl

问题很赞