vue3 contextmenu, vue3 右键菜单
npm install vue3-contextmenu同页面多菜单--->需传参指定ContextMenu Namebash
$ npm i -S vue3-contextmenu
or
$ yarn add vue3-contextmenu
`
$3
mian.ts
`js
import contextmenu from 'vue3-contextmenu'
import 'vue3-contextmenu/dist/vue3-contextmenu.css'
app.use(contextmenu)
`
app.vue
`html
图标
列表
详细信息
名称
日期
类型
大小
时长
刷新
停止
二级菜单
三级菜单
嵌套菜单
新建文件
新建文件夹
快捷方式
属性
右键点击区域{id: '123'}
右键点击区域{ id: [1, 2, 3]}
`
$3
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------- | ------- | ------- |
| label | 子菜单标题文字 | String | null |
| disabled | 是否禁用菜单 | Boolean | false |
| divider | 是否在下方显示分割线 | Boolean | false |
| itemClickHandle | 菜单绑定的点击事件, 参数为自定义数据。如： { id: 123 } | any | undefinded |
可根据 class 自定义样式覆盖
* v-contextmenu: 根元素
* v-contextmenu-item: 单个菜单
* v-contextmenu-item:hover: 单个菜单鼠标悬浮激活状态
* v-contextmenu-item--disabled: 单个菜单禁用状态
* v-contextmenu-divider: 分割线
* v-contextmenu-submenu-label: 子菜单标题
* v-contextmenu-submenu-right: 子菜单向右箭头
* v-contextmenu-submenu-children: 子菜单容器
Project setup
`
yarn install
yarn serve
yarn build
yarn lint
`
vue3-contextmenu (ENGLISH TRANSLATION)
English translation (with the help of google translator) !ONLY!
Right-click menu component for Vue3 writte in Typescript
Official website, documentation and example in chinese (https://hunlongyu.github.io/vue3-contextmenu/)
$3
!vue3-contextmenu.png
$3
`bash
$ npm i -S vue3-contextmenu
or
$ yarn add vue3-contextmenu
`
$3
main.ts
`js
import contextmenu from 'vue3-contextmenu'
import 'vue3-contextmenu/dist/vue3-contextmenu.css'
app.use(contextmenu)
`
app.vue
`html
Icon
List
Detailed information
Name
Date
Type
Size
Duration
Refresh
Stop
Secondary menu
Three level menu
Nested menu
New file
New folder
Shortcut
Properties
Right click on area {id: '123'}
Right click on area { id: [1, 2, 3]}
`
$3
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------- | ------- | ------- |
| label | Submenu title text | String | null |
| disabled | Toggle enable_/disable of menu | Boolean | false |
| divider | Show dividing line below item | Boolean | false |
| itemClickHandle | Event on element click, contains custom id as event attribute id´ | any | undefinded |
v-contextmenu: Root element
v-contextmenu-item: contextmenu item
v-contextmenu-item:hover: contextmenu item, in hovered state
v-contextmenu-item--disabled: contextmenu item, disabled state
v-contextmenu-divider: menu divider line
v-contextmenu-submenu-label: Submenu title
v-contextmenu-submenu-right: Right arrow in submenu
v-contextmenu-submenu-children: submenu container
yarn install
yarn serve
yarn build
yarn lint
``