https://github.com/hunlongyu/vue3-contextmenu
vue3 contextmenu. vue3 右键菜单
https://github.com/hunlongyu/vue3-contextmenu
Last synced: 3 months ago
JSON representation
vue3 contextmenu. vue3 右键菜单
- Host: GitHub
- URL: https://github.com/hunlongyu/vue3-contextmenu
- Owner: Hunlongyu
- License: mit
- Created: 2020-12-30T05:47:17.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-18T06:57:21.000Z (almost 3 years ago)
- Last Synced: 2025-01-31T04:17:03.354Z (over 1 year ago)
- Language: Vue
- Size: 4.04 MB
- Stars: 46
- Watchers: 3
- Forks: 9
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 注意 `同页面多菜单--->需传参指定ContextMenu Name`
# vue3-contextmenu
由 Vue3 和 Typescript 编写的 Contextmenu 右键菜单组件。
[官网 & 文档 & 示例](https://hunlongyu.github.io/vue3-contextmenu/)
### 截图
### 安装
```bash
$ npm i -S vue3-contextmenu
# or
$ yarn add vue3-contextmenu
```
### 使用
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]}
import { inject } from 'vue'
export default {
name: 'App',
setup () {
const emitContext = inject('emitContext') as (event: Event, dataId: Record<string, unknown>) => void
function refresh () {
alert('刷新')
}
function openContextMenu (e: any) {
emitContext(e, { name: 'context-menu-1', id: [1, 2, 3] })
}
function itemClickEvent (e: any) {
console.log('停止，自定义id:' + e.id)
}
return { refresh, itemClickEvent, openContextMenu }
}
}
```
### 说明
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------- | ------- | ------- |
| 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/)
### Screenshot
### Installation
```bash
$ npm i -S vue3-contextmenu
# or
$ yarn add vue3-contextmenu
```
### How-To
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]}
import { inject } from 'vue'
export default {
name: 'App',
setup () {
const emitContext = inject('emitContext') as (event: Event, dataId: Record<string, unknown>) => void
function refresh () {
alert('refresh')
}
function openContextMenu (e: any) {
emitContext(e, { id: [1, 2, 3] })
}
function itemClickEvent (e: any) {
console.log('Stop; with id:' + e.id)
}
return { refresh, itemClickEvent, openContextMenu }
}
}
```
### 说明
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------- | ------- | ------- |
| 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` |
Css classes that may be customized
* `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
## Project setup
```
yarn install
yarn serve
yarn build
yarn lint
```