使用vue-drag-resize组件，发现拖拽事件和插槽内点击事件冲突了咋办？

试了很多博客的方法，什么自定义指令，@click.stop，@clicked事件都不好使，那么看过来0.0

1. 注意vue-drag-resize组件提供了一个钩子：@dragstop 拖拽结束时事件

<vue-drag-resize @dragstop="onDragstop">

2. vue-drag-resize组件还提供了:x :y定义水平距离，垂直距离（可以自定义变量，根据屏幕宽度动态取值还可以适配不同的分辨率和手机端）

<vue-drag-resize v-if="customX" :x="customX":y="customY">

3. 重点来了：拖拽事件结束后，元素肯定移动位置了，而点击事件，元素位置是不变的，所以，我们只需要在拖拽事件结束后拿到元素dom，判断dom的top和left是否与自定义变量的值相等。相等则调用点击事件，不相等则重新给自定义变量赋值。

4. 直接上代码

<template>
	<VueDragResize
      v-if="customX"
      ref="drag"
      :isResizable="false"
      :x="customX"
      :y="customY"
      contentClass="catalogue"
      @dragstop="onDragstop"
      ><div>目录</div></VueDragResize
    >
</template>

<script>
import VueDragResize from "vue-drag-resize";
export default {
 components: {
    VueDragResize,
  },
data() {
	return{
	//自己给值，如果要适配，则可以自定义为0
	customX:0,
	customY:0,
	}
}
methods:{
 onDragstop() {
      const left = this.$refs.drag.left;
      const top = this.$refs.drag.top;
      if (left == this.customX && top == this.customY) {
        this.handleCatalogue();
      } else {
        this.customX = left;
        this.customY = top;
      }
    },
}
}
</script>

大功告成，有用的话，记得点个赞^.