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;
}

一、安裝

# npm install v-contextmenu --save-dev

二、簡單示例

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）

三、使用說明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