<el-form-item label="Label" prop="prop">
<draggable v-model="form.label" @start="drag=true" @end="drag=false">
<div v-for="(ele, idx) in form.label" :key="index">
<el-input type="textarea" />
<el-button>del</el-button>
</div>
<draggable>
</el-form-item>
这段代码导致的问题是,在希望选中input中文字的时候,若点击了文字的开头或结尾,会导致出现拖动效果,然而此时希望的是选中input中文字内容。
原因:在鼠标点击input时,事件冒泡,触发了draggable div的某个事件(并不一定是click),造成了拖动的效果
解决:在input元素中阻止该事件的冒泡。
步骤:1.找到触发的具体事件,如下图
2.在textarea中阻止事件冒泡,使用vue提供的事件修饰符进行处理。元素是el-input,事件是pointerdown,修饰符是stop和native组合(stop和native不赘述)。代码修改如下
<el-form-item label="Label" prop="prop">
<draggable v-model="form.label" @start="drag=true" @end="drag=false">
<div v-for="(ele, idx) in form.label" :key="index">
<el-input @pointerdown.stop.native type="textarea" />
<el-button>del</el-button>
</div>
<draggable>
</el-form-item>
问题解决。