vue 拖拽及右键菜单

cnpm i -S vuedraggable

<script>
import draggable from "vuedraggable";	//引入
export default {
  name: "",
  props: {},
  components: { draggable },		//注册组件
};
</script>

npm install --save e-vue-contextmenu@latest

import Contextmenu from ‘e-vue-contextmenu’
Vue.use(Contextmenu)

@contextmenu.prevent="rightClick($event)"  必须放在循环的div上

HTML代码

//拖拽事件
<div>
	<draggable
     	v-model="$store.state.tag1"
        forceFallback="true"
        @start="onStart"
        @end="onEnd"
        style="display:flex"
    >
    <div
      class="item"
      v-for="(item,index) in $store.state.tag1" :key="index"
      @contextmenu.prevent="rightClick($event)"
    >
       <el-tag
         closable
         style="margin:5px 10px"
         :color="item.path===$route.path?'':'white'"
       >{{item.authName}}</el-tag>
    </div>
  </draggable>
</div>



<div
	class="item"
    v-for="(item,index) in $store.state.tag1" 数据
    :key="index"
     @contextmenu.prevent="rightClick($event)"  
     //<阻止右键菜单(浏览器行为)，右键执行函数show
>
	<el-tag  closable style="margin:5px 10px"
	 @close="close(item)"
      @click="goTo(item)"
      :color="item.path===$route.path?'':'white'"
      >{{item.authName}}</el-tag>
</div>

//右键事件
<e-vue-contextmenu ref="ctxshow" id="contextStyle" >
	<div @click="other">关闭其他</div>
    <div style="margin-top:5px" @click="closeLeft">关闭左侧</div>
    <div style="margin-top:5px" @click="closeRight">关闭右侧</div>
</e-vue-contextmenu>

js 代码

methods: {
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    }
	    //右键事件 获取dom元素打开菜单
    rightClick(e) {
      this.$refs.ctxshow.showMenu(e);
    },
    //关闭其他
    other() {
      console.log(this.index1);
      this.$store.commit("closeOther", this.index1);
      this.$refs.ctxshow.hideMenu(); // 隐藏菜单
    },
    //关闭左侧
    closeLeft() {
      this.$store.commit("closeLeft", this.index1);
      this.$refs.ctxshow.hideMenu(); // 隐藏菜单
    },
    //关闭右侧
    closeRight() {
      this.$store.commit("closeRight", this.index1);
      this.$refs.ctxshow.hideMenu(); // 隐藏菜单
    },
  }

效果