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

另一個(gè)參考組件地址——https://www.npmjs.com/package/v-contextmenu-directive

3.1、指令

v-contextmenu:ref

其中 ref 為一個(gè) VContextmenu 的實(shí)例，例如

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

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

3.2、組件

VContextmenu-根元素

根組件

Attributes屬性文章來源地址http://www.zghlxwxcb.cn/news/detail-456010.html

• v-contextmenu: 根元素

  default: 根元素-默認(rèn)主題（藍(lán)背景）

? bright: 根元素-亮色主題（紅背景）

另外可自行根據(jù) classnames 進(jìn)行樣式覆蓋

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

Methods方法

Events

VContextmenuItem-單個(gè)菜單

單個(gè)菜單，只能在 VContextmenu, VContextmenuSubmenu 和 VContextmenuGroup 下使用

Attributes

• v-contextmenu-item: 單個(gè)菜單

  hover: 單個(gè)菜單激活狀態(tài)

  disabled: 單個(gè)菜單禁用狀態(tài)

  divider: 分割線

<v-contextmenu-item divider></v-contextmenu-item>
<v-contextmenu-item :auto-hide="false">不自動(dòng)關(guān)閉1</v-contextmenu-item>

Events

VContextmenuSubmenu-子菜單容器

子菜單，可嵌套使用

Attributes屬性

• v-contextmenu-submenu: 子菜單容器

? title: 子菜單標(biāo)題

? icon: 子菜單標(biāo)題 icon

Events事件

Slots

VContextmenuGroup-按鈕組根元素

菜組單，嵌套 VContextmenuItem 使用

Attributes屬性

`-按鈕組根元素

菜組單，嵌套 VContextmenuItem 使用

Attributes屬性

• v-contextmenu-group__menus: 按鈕組按鈕容器

到了這里，關(guān)于vue中，右鍵菜單組件v-contextmenu的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！