vue2中vue-draggable-resizable插件拖拽事件与点击事件冲突问题

问题描述

提示：当拖拽img标签时，img的点击事件被触发，导致拖拽后菜单列表被打开

<div class="menus"  v-if="menuOpen">
      菜单列表
</div>
<div class="drag">

	<vue-draggable-resizable
     :w="80"
     :h="94"
     :y="dragY"
     :parent="true"
     :resizable="false"
     :max-width="80"
      axis="y"
     @dragstop="onDragstop"
      @dragging="onDragging"
     :prevent-deactivation="false"
   >
       
        <img class="navs" v-if="!menuOpen" @click="clickHandler" src="@/assets/images/home/navs.png"  alt="" />
        <img class="navs" v-else  @click="clickHandler" src="@/assets/images/home/navs2.png"   alt="" />
    </vue-draggable-resizable>
</div>

---

解决方案：

提示：添加变量判断

onDragstop(x,y) {
	//拖拽停止时触发，将menuOpen和flag置为false，200毫秒后flag置为true
	this.menuOpen = false
	this.flag = false
	setTimeout(() => {
	  this.flag = true
	}, 200);

},
onDragging(x,y){
	//拖拽过程保持关闭状态
	 this.menuOpen = false
},
clickHandler(){
	//图片点击事件，只有为true才触发
	 if(this.flag){
	   this.menuOpen = !this.menuOpen
	 }
},