vue-contextmenujs原生右键菜单组件入门基础知识_菜单教程视频

vue-contextmenujsVue 原生实现右键菜单组件, 零依赖项目地址:https://github.com/GitHub-Laziji/menujs快速安装npm 安装npm install vue-contextmenujsCDN<script src="https://unpkg.com/vue-contextmenujs/dist/cont

vue-contextmenujs原生右键菜单组件入门基础知识

vue-contextmenujs

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

vue-contextmenujs原生右键菜单组件入门基础知识_菜单教程视频

vue-contextmenujs原生右键菜单组件入门基础知识_菜单教程视频

项目地址:https://github.com/GitHub-Laziji/menujs

快速安装

npm 安装

npm install vue-contextmenujs

CDN

<script src="https://unpkg.com/vue-contextmenujs/dist/contextmenu.umd.js">

使用

测试中使用的是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,
        //x: event.clientX,
        //y: event.clientY,
        customClass: "class-a",
        zIndex: 3,
        minWidth: 230
      });
      return false;
    }
  }
};
</script>

参数说明

Menu

属性描述类型可选值默认值
items菜单结构信息MenuItem[]
event鼠标事件信息Event
x菜单显示X坐标, 存在event则失效number0
y菜单显示Y坐标, 存在event则失效number0
zIndex菜单样式z-indexnumber2
customClass自定义菜单classstring
minWidth主菜单最小宽度number150

MenuItem

属性描述类型可选值默认值
label菜单项名称string
icon菜单项图标, 生成<i></i>元素string
disabled是否禁用菜单项booleanfalse
divided是否显示分割线booleanfalse
customClass自定义子菜单classstring
minWidth子菜单最小宽度number150
onClick菜单项点击事件Function()
children子菜单结构信息MenuItem[]
海计划公众号
(1)
上一篇 2020/03/22 08:48
下一篇 2020/03/22 08:48

您可能感兴趣的内容

  • 设计模式有六大设计原则小白基础_模式使用攻略

    设计模式有六大设计原则,每种设计模式都都绕不开这六个原则。单一职责原则:就一个类而言,应该仅有一个引起它变化的原因。 这个原则讲在类(接口)的设计上,一个类所承担的职责一定要单一。但实际中,职责粒度的划分是很不明确的,没有绝对的到哪一粒度就算是满足单一了。反之,过度的考虑单一职责,会引起类的剧增。所以并不必拘泥于类的单一职责,不过于复杂即可。另外,单一职责

    2020/03/30
  • 站长广告联盟平台有哪些?小白攻略_联盟菜鸟指南

    站长广告联盟平台有哪些?小白攻略 建站也有好多年了,也建了几个站,有些微薄的收入, 反复测试了挺多广告联盟, 下面介绍一下: Google广告联盟 Google广Google Ad…

    2020/03/19
  • 条件注释的两种形式基础入门下层隐藏与下层显示_注释菜鸟指南

    条件注释 (conditional comment) 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。条件注释最初于微软的 Internet Explorer 5浏览器中出现,并且直至 Internet Explorer 9 均支持。微软已

    2020/03/26
  • 轻文档菜鸟攻略_一个文件云U盘网站

    轻文档菜鸟攻略 官方网址:http://qingwendang.com/ 简介描述:一个文件云U盘网站 轻文档是一个文件云U盘网站。 我们在轻文档上传好文件后会出现一个提取码,在任…

    2020/03/12
  • 关于cookie domain中的点前缀小白帮助_cookie入门基础知识

    今天同事遇到一个问题,大概描述如下:浏览器已经接收指令,之前在一级域名下存储了相关的信息。这里为了简化问题,假设我们有两个应用A和B,域名分别为:a.b.com和c.a.b.com。(显然B是A的一个子域)。上面的描述就是:在.b.com这个一级域名下,我们已经成功写入了一个cookie,假设为:b=level1。在正常用户的浏览行为中,应用A会向自己的域下

    2020/03/29
  • 学习html5网站开发步骤方法基础教程_网站小白攻略

    对于新手学习html5的同学来说,想要学好html5首先要有一点学习的方法和路线图,了解清楚之后再开始学习会更加清晰自己的学习效果。随着互联网的高速发展,近年来HTMl5发展的越来越火热,而在HTML5高薪资、优待遇的诱惑之下,现在学习学习HTML5人也是日益渐增的,但是学习HTML5除了要抛下足够的汗水之外,我们还需要有一个正确的学习技巧通常合理的学习方法

    2020/03/29
  • Ender入门知识_一个功能齐全的包管理器用于浏览器

    Ender入门知识 官方网址:http://enderjs.com GitHub:https://github.com/ender-js/Ender 简介描述:一个功能齐全的包管理…

    2020/03/10
  • 日常最黑程序员的话集小白教程黑程序员最狠的话_程序员使用指南

    江湖上有很多程序员的黑话,曾起何时,程序员的标签变成了:钱多话少死的早、猥琐大叔、宅男,喜欢与机器而不是人打交道,格子衫双肩挎,走遍天下都不怕,只会挣钱不会花……!连网上的招聘都标明了公司美女多多,来吸引眼球~下面就整理一些日常最黑程序员的话集。1、你都没有对象,请问你是怎么面向对象编程的? 2、我是个程序猿,一天我坐在路边一边喝水一边苦苦检查bug。这时

    2020/04/03
  • HTML 注释 和 实体字符小白攻略_注释入门知识

    一、注释在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。语法:Tips:在 sublime 工具上注释的快捷键是 ctr

    2020/04/05
  • 关于Vue.use()使用详解菜鸟教程下载_vue入门指南

    问题相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时,就不需要用 Vue.use(axios),就能直接使用。那这是为什么呐?答案因为 axios 没有 install。什么意思呢?接下来我们自定义一个需要 Vue.use() 的组件,也就是有

    2020/03/31
  • 闭包原理及题型基础教程_闭包菜鸟教程网

    闭包原理及题型基础教程 闭包 函数被调用之后,会创建一个执行环境及作用域链.函数被执行完之后就会被释放掉.闭包函数执行之后会保留当前活动变量在内部函数作用域链中,所以内部函数可以访…

    2020/03/19
  • graphql的使用基础教程_框架小白攻略

    1.初试牛刀新建一个空项目,执行以下语句来安装graphqlnpm install graphql将以下代码保存为hello.jsvar { graphql, buildSchema } = require(‘graphql’);var schema = buildSchema(`type Query {hello: String}
    `);var root

    2020/03/29
  • JS 中有趣的事实使用帮助_技巧小白知识

    使用 JS 有很多有趣的地方。尽管工程师们每天都在与之打交道,但仍有一些语言没有被开发出来。本广将介绍一些你可能想不到的JS特性。NaN 是一个 number 类型NaN是一个 number 类型。 而且,NaN 不等于它自己。 实际上NaN不等于任何东西,验证一个变量是否是 NaN 可以使用 isNaN() 方法来判断。> typeof(NaN)
    “num

    2020/03/26
  • JS对象Object常用方法整理入门指南_对象教程视频

    查看对象的方法,继续控制台输出,如图:hasOwnProperty():返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。let object1 = new Object();
    object1.property1 = 42;object1.hasOwnProperty(‘property1’); // true
    object1.

    2020/03/22
  • javascript是解释型语言吗?使用帮助_语言入门基础知识

    javascript是一种解释性、直译式脚本语言;是一种动态类型、弱类型、基于原型的语言。C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。解释型语言相对于编译型语言存在的,源代码不是直接翻译成机器语言,而是先翻译成中间代码,再由解释器对中间代码进行解释运行。比如Python/JavaScript / Perl /Shel

    2020/03/22
  • 微信投票找人拉票怎么算价格?微信买投票多少钱零基础入门_微信使用帮助

    人工拉票的微信投票价格是多少?最低价格直降投票的多少钱? 首先大家为了取得一个良好的名次是可以理解的,但是需要合理的去操作,为什么这么说呢,如果你找到一个不负责的商家不给你控量,或者胡乱操作,往往无得其反,因小失大就不好,所以投票这个还是需要找一个专业的团对,需要的详询 > 微信号:181 0963 2685。 微信投票价格是多少?投票呼朋唤友,更有花钱请

    2020/04/03