本文共 1123 字，大约阅读时间需要 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/