vue添加自定义右键菜单的完整实例


Posted in Vue.js onDecember 08, 2020

一、写原生方法

vue添加自定义右键菜单的完整实例

1.在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下:

<li
    v-for="item in resourceList"
    :key="item.id"
    @click="handleClickFolder(item)"
    @contextmenu.prevent="openMenu($event,item)"
   >
   ...
   </li>

2.在页面编写右键菜单内容:

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
  <!-- <li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">打开</li>
  <li @click="handleDelete(rightClickItem)">删除</li>
  <li @click="handleDownloadFile(rightClickItem)" v-if="rightClickItem.fileType!=99">下载</li>
  <li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType!=99">预览</li>
  <li @click="handleUpdate(rightClickItem)">编辑</li> -->
  <li>内容</li>
 </ul>

3.在data()中定义需要的变量属性

data() { 
	return {
			visible: false,
			top: 0,
			left: 0
	}
}

4.观察visible的变化,来触发关闭右键菜单,调用关闭菜单的方法

watch: {
 visible(value) {
  if (value) {
  document.body.addEventListener('click', this.closeMenu)
  } else {
  document.body.removeEventListener('click', this.closeMenu)
  }
 }
 }

5.在method中定义打开右键菜单和关闭右键菜单的两个方法

openMenu(e, item) {
  this.rightClickItem = item;

  var x = e.pageX;
  var y = e.pageY;

  this.top = y;
  this.left = x;
  
  this.visible = true;
 },
 closeMenu() {
  this.visible = false;
 }

6.在style中写右键菜单的样式

.contextmenu {
 margin: 0;
 background: #fff;
 z-index: 3000;
 position: absolute;
 list-style-type: none;
 padding: 5px 0;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 400;
 color: #333;
 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
 margin: 0;
 padding: 7px 16px;
 cursor: pointer;
}

.contextmenu li:hover {
 background: #eee;
}

二、使用插件vue-context-menu

demo地址

github地址

安装:

npm install vue-contextmenu --save

引用:

import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

使用:

<template>
<div id="app" @contextmenu="showMenu"
 style="width: 100px;height: 100px;margin-top: 20px;background: red;">
 <vue-context-menu :contextMenuData="contextMenuData"
  @savedata="savedata"
  @newdata="newdata"></vue-context-menu>
</div>
</template>
<script>
export default {
 name: 'app',
 data () {
 return {
  	// contextmenu data (菜单数据)
  contextMenuData: {
  // the contextmenu name(@1.4.1 updated)
  menuName: 'demo',
  // The coordinates of the display(菜单显示的位置)
  axis: {
   x: null,
   y: null
  },
  // Menu options (菜单选项)
  menulists: [{
   fnHandler: 'savedata', // Binding events(绑定事件)
   icoName: 'fa fa-home fa-fw', // icon (icon图标 )
   btnName: 'Save' // The name of the menu option (菜单名称)
  }, {
   fnHandler: 'newdata',
   icoName: 'fa fa-home fa-fw',
   btnName: 'New'
  }]
  }
 }
 },
 methods: {
 showMenu () {
  event.preventDefault()
  var x = event.clientX
  var y = event.clientY
  // Get the current location
  this.contextMenuData.axis = {
  x, y
  }
 },
 savedata () {
  alert(1)
 },
 newdata () {
  console.log('newdata!')
 }
 }
}
</script>

tip:有说不兼容ie的,具体没有测试

到此这篇关于vue添加自定义右键菜单的文章就介绍到这了,更多相关vue添加自定义右键菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue中如何自定义右键菜单详解
Dec 08 #Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 #Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 #Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 #Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 #Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 #Vue.js
详解Vue中的自定义指令
Dec 07 #Vue.js
You might like
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php创建图像具体步骤
2017/03/13 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
Jquery ui css framework
2010/06/28 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
React和Vue中监听变量变化的方法
2018/11/14 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
使用python实现strcmp函数功能示例
2014/03/25 Python
Python定时器实例代码
2017/11/01 Python
Python list运算操作代码实例解析
2020/01/20 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
关于期中考试的反思
2014/02/02 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
继承权公证书范本
2015/01/23 职场文书
我是特种兵观后感
2015/06/11 职场文书
工作经历证明范本
2015/06/15 职场文书
技能培训通讯稿
2015/07/18 职场文书
聘任书格式及范文
2015/09/21 职场文书
《刷子李》教学反思
2016/02/20 职场文书
Python绘制散乱的点构成的图的方法
2022/04/21 Python