原生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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
js模拟微博发布消息
Feb 23 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
python对象与json相互转换的方法
2019/05/07 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
校园广播稿100字
2014/10/06 职场文书
现实表现材料范文
2014/12/23 职场文书
干部个人考察材料
2014/12/24 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
Python中字符串对象语法分享
2022/02/24 Python