博客
关于我
vue 拖拽及右键菜单
阅读量:550 次
发布时间:2019-03-09

本文共 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/

你可能感兴趣的文章
NN&DL4.1 Deep L-layer neural network简介
查看>>
NN&DL4.3 Getting your matrix dimensions right
查看>>
NN&DL4.7 Parameters vs Hyperparameters
查看>>
NN&DL4.8 What does this have to do with the brain?
查看>>
nnU-Net 终极指南
查看>>
No 'Access-Control-Allow-Origin' header is present on the requested resource.
查看>>
NO 157 去掉禅道访问地址中的zentao
查看>>
no available service ‘default‘ found, please make sure registry config corre seata
查看>>
No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
查看>>
no connection could be made because the target machine actively refused it.问题解决
查看>>
No Datastore Session bound to thread, and configuration does not allow creation of non-transactional
查看>>
No fallbackFactory instance of type class com.ruoyi---SpringCloud Alibaba_若依微服务框架改造---工作笔记005
查看>>
No Feign Client for loadBalancing defined. Did you forget to include spring-cloud-starter-loadbalanc
查看>>
No mapping found for HTTP request with URI [/...] in DispatcherServlet with name ...的解决方法
查看>>
No mapping found for HTTP request with URI [/logout.do] in DispatcherServlet with name 'springmvc'
查看>>
No module named 'crispy_forms'等使用pycharm开发
查看>>
No module named cv2
查看>>
No module named tensorboard.main在安装tensorboardX的时候遇到的问题
查看>>
No module named ‘MySQLdb‘错误解决No module named ‘MySQLdb‘错误解决
查看>>
No new migrations found. Your system is up-to-date.
查看>>