原生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 相关文章推荐
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 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的hash算法介绍
2014/02/13 PHP
使用PHP编写发红包程序
2015/07/22 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
深入浅析javascript继承体系
2017/10/23 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
python中元组的用法整理
2020/06/15 Python
Python接口自动化测试的实现
2020/08/28 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
数据库方面面试题
2012/04/22 面试题
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
优秀求职自荐信怎样写
2013/12/18 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书