vue中,右键菜单组件v-contextmenu的使用

Posted viceen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中,右键菜单组件v-contextmenu的使用相关的知识,希望对你有一定的参考价值。

vue中,右键菜单组件v-contextmenu的使用

1、效果

右键菜单之禁用和子菜单

2、流程

第一步:安包

npm install v-contextmenu --save-dev
npm install --save vue-runtime-helpers

第二步:引入

src/main.js

import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
Vue.use(contentmenu)

package.json

"dependencies": 
    "vue-runtime-helpers": "^1.1.2",

"devDependencies": 
    "v-contextmenu": "^2.9.0",

第三步:使用

效果1-右键菜单之禁用和子菜单

index.vue

<template>
<div class="wrap" v-contextmenu:contextmenu>
  <v-contextmenu ref="contextmenu" theme="bright">
      <v-contextmenu-item ><i class="fa fa-search"></i>上插入</v-contextmenu-item>
        <v-contextmenu-submenu title="哈哈">
        <v-contextmenu-item ><i class="fa fa-search"></i>上12插入</v-contextmenu-item>
      </v-contextmenu-submenu>
      <v-contextmenu-item><i class="fa fa-search"></i>下插入</v-contextmenu-item>
      <v-contextmenu-item divider></v-contextmenu-item>
      <v-contextmenu-item><i class="fa fa-search"></i>左插入</v-contextmenu-item>
      <v-contextmenu-item disabled><i class="fa fa-search"></i>右插入</v-contextmenu-item>
      <div class="flag">
          <span><i class="fa fa-star"></i></span>
      </div>
  </v-contextmenu>
</div>
</template>
<style>
.wrap
  width: 200px;
  height: 200px;
  border: 1px solid red;

</style>

效果2-基本效果

index.vue

<template>
  <div class="wrap"  v-contextmenu:contextmenu> 
    <v-contextmenu ref="contextmenu">
        <v-contextmenu-item>菜单1</v-contextmenu-item>
        <v-contextmenu-item>菜单2</v-contextmenu-item>
        <v-contextmenu-item>菜单3</v-contextmenu-item>
    </v-contextmenu>
  </div>
</template>
<style>
.wrap
  width: 200px;
  height: 200px;
  border: 1px solid red;

</style>

3、使用说明api

npm地址——https://www.npmjs.com/package/v-contextmenu

另一个参考组件地址——https://www.npmjs.com/package/v-contextmenu-directive

3.1、指令
v-contextmenu:ref

其中 ref 为一个 VContextmenu 的实例,例如

<v-contextmenu ref="contextmenu">
  <v-contextmenu-item>菜单</v-contextmenu-item>
</v-contextmenu>

<div v-contextmenu:contextmenu></div>
3.2、组件
VContextmenu-根元素

根组件

Attributes属性

参数说明类型可选值默认值
eventType触发其显示的事件类型String事件名contextmenu
theme主题Stringdefault / brightdefault
  • v-contextmenu: 根元素

    default: 根元素-默认主题(蓝背景)

​ bright: 根元素-亮色主题(红背景)

另外可自行根据 classnames 进行样式覆盖

<v-contextmenu ref="contextmenu" theme="bright">

Methods方法

方法名称说明参数
show显示菜单 top: number, left: number topleft 均为菜单相对浏览器窗口的值
hide隐藏菜单

Events

事件名称说明回调参数
show菜单显示时触发的事件菜单组件的 vm
hide菜单隐藏时触发的事件菜单组件的 vm
VContextmenuItem-单个菜单

单个菜单,只能在 VContextmenu, VContextmenuSubmenuVContextmenuGroup 下使用

Attributes

参数说明类型可选值默认值
divider是否为分隔符Booleantrue / falsefalse
disabled是否禁用Booleantrue / falsefalse
autoHide被点击后菜单是否自动隐藏Booleantrue / falsetrue
  • v-contextmenu-item: 单个菜单

    hover: 单个菜单激活状态

    disabled: 单个菜单禁用状态

    divider: 分割线

<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-item :auto-hide="false">不自动关闭1</v-contextmenu-item>

Events

事件名称说明回调参数
click菜单被点击时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event
mouseenter鼠标移动到菜单上时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event
mouseleave鼠标从菜单上离开时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event
VContextmenuSubmenu-子菜单容器

子菜单,可嵌套使用

Attributes属性

参数说明类型可选值默认值
title菜单名String
disabled是否禁用Booleantrue / falsefalse
  • v-contextmenu-submenu: 子菜单容器

​ title: 子菜单标题

​ icon: 子菜单标题 icon

Events事件

事件名称说明回调参数
mouseenter鼠标移动到菜单上时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event
mouseleave鼠标从菜单上离开时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event

Slots

Slot 名说明
title菜单名,和 title 属性二选一
VContextmenuGroup-按钮组根元素

菜组单,嵌套 VContextmenuItem 使用

Attributes属性

参数说明类型可选值默认值
maxWidth最大宽度Number / String

`-按钮组根元素

菜组单,嵌套 VContextmenuItem 使用

Attributes属性

参数说明类型可选值默认值
maxWidth最大宽度Number / String
  • v-contextmenu-group__menus: 按钮组按钮容器

以上是关于vue中,右键菜单组件v-contextmenu的使用的主要内容,如果未能解决你的问题,请参考以下文章

做一个 Vue 右键菜单组件

Vue2的右键弹出菜单(vue-contextmenu)

vue + elementUI 表格右键弹出菜单

Vue以及Box实现右键菜单

vue实现页面权限中的菜单配置

vue实现菜单右键