v-contextmenu的使用(右键菜单）

先来个自己改写的图：

代码：

结构：
<div class="wrap" v-contextmenu:contextmenu>

<v-contextmenu ref="contextmenu">

      <v-contextmenu-item ><i class="fa fa-search"></i>上插入</v-contextmenu-item>
      <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><i class="fa fa-search"></i>右插入</v-contextmenu-item>
      <div class="flag">
          <span><i class="fa fa-star"></i></span>
      </div>
</v-contextmenu>
</div>

/*右键菜单样式*/
.v-contextmenu{
    padding: 18px 0 5px 0;
}
.v-contextmenu .flag{
    width: 31px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.v-contextmenu .flag span{
    width: 65px;
    height: 24px;
    line-height: 33px;
    display: inline-block;
    text-align: center;
    transform: rotate(-40deg);
    background: #007fff;
    color: #fff;
    padding-right: 17px;
    position: relative;
    left: -20px;
    top: -14px;
}
.v-contextmenu .flag span i{
    color: #fff;
}
.v-contextmenu .v-contextmenu-item{
    width: 90px;
    height: 24px;
}
.v-contextmenu .v-contextmenu-item:hover{
    background: #f4f5f6;
    border-left: 3px solid #007FFF;
    color: #65778b;
    font-weight: 600;
}
.v-contextmenu .v-contextmenu-item:hover i{
    color: #65778b;
}
.v-contextmenu .v-contextmenu-item i{
    padding-right: 10px;
}

1、安装

# npm install v-contextmenu --save-dev

2、简单示例

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

<template>
  <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 v-contextmenu:contextmenu>右键点击此区域</div>
</template>

说明：
指令 ：v-contextmenu:ref（v-contextmenu:contextmenu）

3、使用说明api

指令

v-contextmenu:ref

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

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

<div v-contextmenu:contextmenu></div>

组件

VContextmenu

根组件

Attributes

参数	说明	类型	可选值	默认值
eventType	触发其显示的事件类型	String	事件名	contextmenu
theme	主题	String	default / bright	default

 

 

 

Methods

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

 

 

 

Events

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

 

 

VContextmenuItem

单个菜单，只能在 VContextmenu, VContextmenuSubmenu 和 VContextmenuGroup 下使用

Attributes

参数	说明	类型	可选值	默认值
divider	是否为分隔符	Boolean	true / false	false
disabled	是否禁用	Boolean	true / false	false
autoHide	被点击后菜单是否自动隐藏	Boolean	true / false	true

 

 

 

 

Events

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

 

 

 

VContextmenuSubmenu

子菜单，可嵌套使用

Attributes

参数	说明	类型	可选值	默认值
title	菜单名	String	--	--
disabled	是否禁用	Boolean	true / false	false

 

 

 

Events

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

 

 

 

Slots

Slot 名	说明
title	菜单名，和 title 属性二选一

 

 

VContextmenuGroup

菜组单，嵌套 VContextmenuItem 使用

Attributes

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

 

 

提供两种主题

默认

亮色

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

• v-contextmenu: 根元素
• v-contextmenu--default: 根元素-默认主题
• v-contextmenu--bright: 根元素-亮色主题
• v-contextmenu-item: 单个菜单
• v-contextmenu-item--hover: 单个菜单激活状态
• v-contextmenu-item--disabled: 单个菜单禁用状态
• v-contextmenu-divider: 分割线
• v-contextmenu-group: 按钮组根元素
• v-contextmenu-group__menus: 按钮组按钮容器
• v-contextmenu-submenu: 子菜单容器
• v-contextmenu-submenu__title: 子菜单标题
• v-contextmenu-submenu__icon: 子菜单标题 icon