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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
详解vue 组件注册
Nov 20 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue elementUI批量上传文件
Apr 26 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
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
几种响应式文字详解
2017/05/19 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
python单链表实现代码实例
2013/11/21 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Python操作qml对象过程详解
2019/09/26 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
python super()函数的基本使用
2020/09/10 Python
python中的对数log函数表示及用法
2020/12/09 Python
android面试问题与答案
2016/12/27 面试题
机电专业毕业生求职信
2013/10/27 职场文书
田径运动会通讯稿
2014/09/13 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript
JavaScript获取URL参数的方法分享
2022/04/07 Javascript