本文共 1096 字，大约阅读时间需要 3 分钟。

Vue.js 拖拽组件与上下文菜单应用实例

1. 安装 vuedraggable

通过 npm 安装 vuedraggable 组件：

npm install -S vuedraggable

2. 引用 vuedraggable

在 Vue 项目中引入并注册 draggable 组件：

3. 安装 e-vue-contextmenu

通过 npm 安装上下文菜单组件：

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

4. 引用 e-vue-contextmenu

在 Vue 应用中引入并注册上下文菜单组件：

5. 使用 拖拽 组件

在组件中使用 draggable 组件，并在需要右键的元素上绑定上下文菜单事件：

6. 使用上下文菜单

在需要右键显示菜单的元素上绑定事件：

     
    
         关闭其他  
    
  
    
         关闭左侧  
    
  
    
         关闭右侧  
    
   

7. 方法实现

在组件的 methods 中定义相关函数：

methods: {  onStart() {    this.drag = true;  },  onEnd() {    this.drag = false;  },  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();  }}

8. 效果展示

通过上述配置，用户可以在组件中实现拖拽功能，同时在右键点击时显示自定义菜单，满足多种交互需求。

转载地址：http://iiliz.baihongyu.com/