原生Vue 实现右键菜单组件功能


Posted in Javascript onDecember 16, 2019

Vue 原生实现右键菜单组件, 零依赖

原生Vue 实现右键菜单组件功能 

快速安装

npm install vue-contextmenujs

使用

测试中使用的是 element-ui 图标

import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
<template>
 <div id="app" style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>
<script>
export default {
 methods: {
  onContextmenu(event) {
   this.$contextmenu({
    items: [
     {
      label: "返回(B)",
      onClick: () => {
       this.message = "返回(B)";
       console.log("返回(B)");
      }
     },
     { label: "前进(F)", disabled: true },
     { label: "重新加载(R)", divided: true, icon: "el-icon-refresh" },
     { label: "另存为(A)..." },
     { label: "打印(P)...", icon: "el-icon-printer" },
     { label: "投射(C)...", divided: true },
     {
      label: "使用网页翻译(T)",
      divided: true,
      minWidth: 0,
      children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
     },
     {
      label: "截取网页(R)",
      minWidth: 0,
      children: [
       {
        label: "截取可视化区域",
        onClick: () => {
         this.message = "截取可视化区域";
         console.log("截取可视化区域");
        }
       },
       { label: "截取全屏" }
      ]
     },
     { label: "查看网页源代码(V)", icon: "el-icon-view" },
     { label: "检查(N)" }
    ],
    event,
    customClass: "class-a",
    zIndex: 3,
    minWidth: 230
   });
   return false;
  }
 }
};
</script>

ps:下面看下vue点击菜单以外区域,隐藏菜单操作

data() {
   return {
    menuShow: false //v-show标识隐藏显示
   }
},

mounted (){
   let _this = this;
   document.addEventListener('click', function (e) {
// 下面这句代码是获取 点击的区域是否包含你的菜单,如果包含,说明点击的是菜单以外,不包含则为菜单以内
   let flag = e.target.contains(document.getElementsByClassName('menu-class')[0])
   console.log(flag)
   if(!flag) return
   _this.menuShow = false
   })
}

总结

以上所述是小编给大家介绍的原生Vue 实现右键菜单组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
深入理解vue中的$set
Jun 01 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
JS代码优化的8点建议
Feb 04 Javascript
axios如何取消重复无用的请求详解
Dec 15 #Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 #Javascript
Angular6项目打包优化的实现方法
Dec 15 #Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 #Javascript
Vue+ElementUI table实现表格分页
Dec 14 #Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 #Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 #Javascript
You might like
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php UBB 解析实现代码
2011/11/27 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
python getopt 参数处理小示例
2009/06/09 Python
Python实现list反转实例汇总
2014/11/11 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Django框架实现的分页demo示例
2019/05/25 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Python实现扫码工具的示例代码
2020/10/09 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
军训自我鉴定100字
2014/02/13 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
2014年小学教研工作总结
2014/12/06 职场文书