Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pipipi-pikachu/v-contextmenu-directive
简约漂亮的指令式右键菜单插件（基于 Vue2.x ）
https://github.com/pipipi-pikachu/v-contextmenu-directive
contextmenu directive vue vue-contextmenu vue2
Last synced: 2 months ago
JSON representation
简约漂亮的指令式右键菜单插件（基于 Vue2.x ）
- Host: GitHub
- URL: https://github.com/pipipi-pikachu/v-contextmenu-directive
- Owner: pipipi-pikachu
- Created: 2020-09-19T05:53:46.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-08T02:00:08.000Z (almost 4 years ago)
- Last Synced: 2024-10-17T18:27:07.135Z (2 months ago)
- Topics: contextmenu, directive, vue, vue-contextmenu, vue2
- Language: Vue
- Homepage:
- Size: 535 KB
- Stars: 42
- Watchers: 2
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌈 v-contextmenu-directive
> 基于 Vue2.x 的右键菜单插件。
DEMO: https://pipipi-pikachu.github.io/v-contextmenu-directive/demo/
## 📦 安 装
```bash
npm install v-contextmenu-directive
# or
yarn add v-contextmenu-directive
```
## 📚 如何使用？
```javascript
import Vue from 'vue'
import 'v-contextmenu-directive/dist/v-contextmenu-directive.css'
import Contextmenu from 'v-contextmenu-directive'
Vue.use(Contextmenu)
```
### 基础用法：
```html
```
```javascript
// script
methods: {
contextmenus() {
return [
{
text: '剪切',
subText: 'Ctrl + X',
},
{
text: '复制',
subText: 'Ctrl + C',
},
{
text: '粘贴',
subText: 'Ctrl + V',
},
{ divider: true },
{
text: '删除',
subText: 'Delete',
},
]
}
},
```
### 多级菜单：
```javascript
methods: {
contextmenus() {
return [
{
text: '二级菜单',
children: [
{ text: '子菜单1' },
{ text: '子菜单2' },
{
text: '三级菜单',
children: [
{ text: '子菜单1' },
{ text: '子菜单2' },
],
},
],
},
]
}
}
```
### 事件和点击对象：
```html
{{msg}}
```
```javascript
// script
methods: {
contextmenus(el) {
// 获取触发右键菜单的dom；与action中的el一致
// 注意：一般情况下你不应该向contextmenus方法传递动态参数，因为它不会自动更新，正确的做法是向触发右键菜单的dom上绑定dataset，然后在这里通过el.dataset来获取动态的值
console.log(el)
// 你可以在这里通过 return null 来禁用右键菜单
// return null
return [
{
text: '剪切',
subText: 'Ctrl + X',
action: () => this.msg = '你点击了剪切'
},
{
text: '复制',
subText: 'Ctrl + C',
action: el => {
this.msg = '你点击了复制'
console.log(el)
}
},
]
}
}
```
### dom激活右键菜单的状态：
挂载指令的dom在右键菜单被激活的情况下，会被添加一个contextmenu-active的class
```html
```
```css
#app {
background-color: #fff;
}
#app.contextmenu-active {
background-color: #f5f5f5;
}
```
### 主题：
右键菜单默认主题为light，你可以添加dark修饰符来使用dark主题
```html
```
## 📒 完整参数
| prop | type | 描述 |
|----------------|----------|-----------------------------------------------|
| text | string | 菜单项文字 |
| subText | string | 菜单项文字补充 |
| action | function | 菜单项点击后执行的方法 |
| divider | bool | 分割线，与其他参数不共存 |
| children | array | 子菜单 |
| disable | bool | 禁用菜单项 |
| hide | bool | 隐藏菜单项 |