原生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 实现右键菜单组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c

  • vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装  npm install rightmenu --save-dev   开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu)

  • vue2.0的contextmenu右键弹出菜单的实例代码

    整理文档,搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码,稍微整理精简一下做下分享. 1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script>

  • 原生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

  • element表格组件实现右键菜单的功能

    目录 前言 实现思路 最后 前言 最近产品给我提了个需求 ————想要实现用户右键table的某一行时,显示该行操作栏的功能.觉得这个需求挺有意思的,特此分享给大家. 技术栈: elementUI 实现思路 要实现右键菜单 我们需要定义一个菜单栏组件 当用户点击table的某一行时,我们处理好显示位置再将菜单栏渲染到table上.先实现这个rightKeyMenu组件: // right-key-menu.vue <template> <div id="right-key-me

  • vue原生方法自定义右键菜单

    本文实例为大家分享了vue原生方法自定义右键菜单的具体代码,供大家参考,具体内容如下 1.在需要添加右键的页面,绑定contextmenu事件(阻止浏览器默认事件,添加自定义事件) <div @contextmenu.prevent.native="openMenu($event)">   .... </div> 2.在页面编写右键菜单的内容 <ul v-show="visible" :style="{left:left+'p

  • vue裁切预览组件功能的实现步骤

    vue版本裁切工具,包含预览功能 最终效果: qiuyaofan.github.io/vue-crop-de- 源码地址: github.com/qiuyaofan/v- 第一步:先用vue-cli安装脚手架(不会安装的看 vue-cli官网) // 初始化vue-cli vue init webpack my-plugin 第二步:创建文件 新建src/views/validSlideDemo.vue, src/components里新建VueCrop/index.js,VueCrop.vue

  • vue iview的菜单组件Mune 点击不高亮的解决方案

    前言: 在项目中,我用到了vue +iview + vue-router 开发: 然后导航条就使用了iview的Menu组件,结果发觉导航条的内容点击一次之后不会显示高亮样式,而是先跳转了,我再点击一次,才会高亮显示. 在看了vue-router的文档之后,发觉有一个很好用的东西,就是router-link的属性: active-class 和 exact. 为什么要使用router-link? 官网上说明了这几点好处: 组件支持用户在具有路由功能的应用中(点击)导航. 通过 to 属性指定目标

  • vue添加自定义右键菜单的完整实例

    一.写原生方法 1.在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > ... </li> 2.在页面编写右键菜单内容:

  • Vue实现嵌套菜单组件

    本案例为大家分享了Vue实现嵌套菜单组件的具体代码,供大家参考,具体内容如下 本文旨在使用Vue.js完成一个嵌套的菜单组件,使用mock.js对数据进行模拟,并且最小化复现功能 安装mock cnpm i mockjs //引入mockjs import Mock from 'mockjs' //使用mockjs模拟数据 Mock.mock('/menuData', 'get', {     "ret": 0,     "data": [{            

  • vue实现自定义日期组件功能的实例代码

    实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalendar">' + '<div class="calendar_header">' + '<div class="prev" @click="prevMonth"> < </div>' + '&l

  • 1分钟Vue实现右键菜单

    目录 效果图 安装 代码实现 自定义样式 总结 高效实现需求,避免重复造轮子.今天给大家分享的是,如何在最短的时候内实现右键菜单.方法也很简单,一个插件就可以搞定,话不多说,上效果图: 效果图 安装 npm install vue-contextmenujs 或 yarn add vue-contextmenujs 使用 import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); 代码实现 以element-ui图

  • Vue下拉菜单组件化开发详解

    本文实例为大家分享了Vue下拉菜单组件化开发的具体代码,供大家参考,具体内容如下 搞一个自定义组件,只是一个很简单的下拉菜单,也就是一个思路,整起 第一步:在项目中专门创建一个放置自定义组件的文件夹(直接components底下的common中) dropdown.vue 为一级盒子 dropdownMenu.vue 为二级盒子 dropdownItem.vue 为二级盒子内容 第二步 : 对dropdown.vue的操作 <template> <div class="box&

随机推荐