原生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 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
node脚手架搭建服务器实现token验证的方法
Jan 20 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
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
php利用事务处理转账问题
2015/04/22 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
jQuery 技巧小结
2010/04/02 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
python 快速排序代码
2009/11/23 Python
简单介绍Python中的struct模块
2015/04/28 Python
Python 递归函数详解及实例
2016/12/27 Python
python装饰器深入学习
2018/04/06 Python
Python基础教程之异常详解
2019/01/10 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
简历的自我评价范文
2014/02/04 职场文书
机关搬迁方案
2014/05/18 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2015个人半年总结范文
2015/03/09 职场文书
工作年限证明模板
2015/06/15 职场文书