位置: IT常识 - 正文

vue中，右键菜单组件v-contextmenu的使用(vue 右键菜单)

发布时间：2024-01-05

vue中，右键菜单组件v-contextmenu的使用 vue中，右键菜单组件v-contextmenu的使用1、效果

推荐整理分享vue中，右键菜单组件v-contextmenu的使用(vue 右键菜单)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue 右键菜单,vue右键弹出菜单,vue 鼠标右击事件,vue鼠标右键,vue右键弹出菜单,vue 右键菜单,vue右键点击菜单,vue右键点击菜单,内容如对您有帮助，希望把文章链接给更多的朋友！

右键菜单之禁用和子菜单

2、流程

第一步：安包

npm install v-contextmenu --save-devnpm 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事件名contextmenutheme主题Stringdefault / brightdefault

v-contextmenu: 根元素

default: 根元素-默认主题（蓝背景）

bright: 根元素-亮色主题（红背景）

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

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

Methods方法

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

Events

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

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

Attributes

参数说明类型可选值默认值divider是否为分隔符Booleantrue / falsefalsedisabled是否禁用Booleantrue / falsefalseautoHide被点击后菜单是否自动隐藏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, 第二个参数是该菜单的 eventmouseenter鼠标移动到菜单上时触发的事件第一个参数是 vm, 第二个参数是该菜单的 eventmouseleave鼠标从菜单上离开时触发的事件第一个参数是 vm, 第二个参数是该菜单的 eventVContextmenuSubmenu-子菜单容器

子菜单，可嵌套使用

Attributes属性

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

title: 子菜单标题

icon: 子菜单标题 icon

Events事件

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

Slots

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

菜组单，嵌套 VContextmenuItem 使用

Attributes属性

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