【vue】VueDraggable 子元素input选中文字会出现拖动

<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>

 由于具体开发中，使用的是render JSX，因此最终采用如下写法，实现效果：

<render key={config.renderKey} nativeOnPointerdown={ event => {
            event.stopPropagation();
          }}>
            {child}
          </render>