在Vue中实现右键菜单

type
status
date
slug
summary
tags
category
icon
password

使用vue-contextmenu.js,可以做到Vue实现右键菜单组件

notion image

首先需要npm

当然也可以从公共库进行引入,但是目前只发现UNPKG有该文件

引入

接着就是使用

参数说明

Menu

属性
描述
类型
可选值
默认值
items
菜单结构信息
MenuItem[]
-
-
event
鼠标事件信息
Event
-
-
x
菜单显示X坐标, 存在event则失效
number
-
0
y
菜单显示Y坐标, 存在event则失效
number
-
0
zIndex
菜单样式z-index
number
-
2
customClass
自定义菜单class
string
-
-
minWidth
主菜单最小宽度
number
-
150
 

MenuItem

属性
描述
类型
可选值
默认值
label
菜单项名称
string
-
-
icon
菜单项图标, 生成<i class="icon"></i>元素
string
-
-
disabled
是否禁用菜单项
boolean
-
false
divided
是否显示分割线
boolean
-
false
customClass
自定义子菜单class
string
-
-
minWidth
子菜单最小宽度
number
-
150
onClick
菜单项点击事件
Function()
-
-
children
子菜单结构信息
MenuItem[]
-
-
数组相关的杂七杂八除了Symbol和SVG,还能这样实现多彩字体图标
工具应用
前端技术
AI技术
拙见
其他知识
编程知识