vue-drag-resize点击事件和拖拽事件冲突

解决 Vue-drag-resize 组件中点击事件与拖拽事件的冲突
对于 vue-drag-resize 组件中的点击事件和拖拽事件冲突问题，可以通过利用组件提供的特定钩子来处理。具体来说，在拖拽操作结束后触发相应的逻辑更为合适。
使用 @dragstop 钩子替代直接绑定点击事件
当尝试通过常规方式如 @click.stop 或者其他变通方法无法有效阻止事件冒泡时，推荐采用 vue-drag-resize 提供的内置解决方案——监听 @dragstop 事件[^2]。此事件会在元素完成一次完整的拖动之后被触发，从而允许开发者在此时机执行预期的操作而不会受到正在进行中的拖拽动作干扰。
<template>
<div>
<!-- 使用 @dragstop 来代替 click -->
<vue-drag-resize @dragstop="handleDragStop"></vue-drag-resize>
</div>
</template>

<script>
export default {
methods: {
handleDragStop() {
console.log('Element has been dragged and stopped.');
// 执行原本打算在点击时发生的业务逻辑
}
}
}
</script>
登录后复制
这种方法不仅能够绕过两者间的潜在竞争关系，而且保持了代码清晰度以及维护性。此外，如果确实需要响应真正的鼠标单击行为而非仅限于拖放后的状态，则可以在模板内部添加额外判断条件或者借助第三方库辅助实现更复杂的交互模式。
动态调整位置参数以适应不同设备
值得注意的是，除了上述解决办法外，还可以考虑优化布局设置使得用户体验更加流畅自然。例如，通过动态计算并传递给 <vue-drag-resize> 的 :x 和 :y 属性值，可以根据当前视口尺寸自动调整可移动区域的位置，进而提高移动端及其他低分辨率屏幕上的可用性。
computed: {
customX() {
return window.innerWidth * someRatio;
},
customY() {
return window.innerHeight * anotherRatio;
}
},
mounted() {
this.updatePosition();
window.addEventListener('resize', this.updatePosition);
},
methods: {
updatePosition() {
// 更新 position based on new screen size...
}
}
登录后复制
综上所述，针对 vue-drag-resize 中存在的点击与拖拽事件冲突现象，最有效的策略是充分利用框架本身所提供的特性，并适当结合应用层面的需求来进行定制化开发。