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

最新推荐文章于 2025-02-05 10:00:29 发布

原创最新推荐文章于 2025-02-05 10:00:29 发布 · 2.1k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #css3 #前端

学习笔记专栏收录该内容

49 篇文章

订阅专栏

博客讲述了在Vue项目中遇到的一个问题：当尝试选中input内的文字时，由于事件冒泡导致触发了draggable组件的拖动效果。作者通过分析发现，点击input文字边缘会触发draggable的pointerdown事件。为了解决这个问题，作者在input元素上添加了@pointerdown.stop.native修饰符来阻止事件冒泡，从而成功阻止了不必要的拖动行为，确保了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>

问题解决。