suwis-contextmenu
Version:
一个基于Web的vue右键菜单扩展
186 lines (150 loc) • 4.03 kB
Markdown
有时候我们需要页面更简洁，可操作按钮更多，这个时候右键菜单就派上用场了，但web开发中右键菜单通常都是被浏览器占用的，而我们用到的少之又少，所以，通过扩展右键菜单，可以让我们的交互方式更加方便快捷
> npm
```sh
npm install suwis-contextmenu --save-dev
```
> yarn
```sh
yarn add suwis-contextmenu
```
```sh
import Vue from 'vue'
import contextmenu from 'suwis-contextmenu'
Vue.use(contextmenu, options)
```
```js
{
background: '#fff', // 背景颜色
hover: '#fff', // 鼠标悬浮上去的颜色
activation: {
click: false, // 单击显示菜单
rightclick: true // 右键点击显示菜单
},
registry: {
// module a
pages: [{
key: 'copy',
value: '复制'
}, {
key: 'edit',
value: '编辑'
}, {
key: 'remove',
value: '删除'
}],
// module b
modules: [{
key: 'delete',
value: '删除'
}, {
key: 'edit',
value: '编辑'
}]
}
}
```
> registry是一个对象，只有事先注册过的元素，才能响应右键菜单
| 属性 | 类型 | 说明 |
| ---------------------- | -------- | -------------------------------------------------------------------------- |
| contextmenu-click | function | 右键菜单项点击事件 |
| contextmenu-showbefore | function | 右键菜单显示前触发钩子，用来校验个别菜单项是否需要显示,event.detail 为菜单项的集合，可设置每一项的visible属性调整菜单的显示状态 |
使用示例：
> javascript
```js
import Vue from 'vue'
import contextmenu from 'suwis-contextmenu'
let options = {
background:
hover:
registry: {
// 桌面
desktop: [{
key: 'toggleFullScreen',
value: '进入全屏'
}, {
key: 'refresh',
value: '刷新'
}, {
key: 'nextbg',
value: '下一张壁纸'
}, {
key: 'prevbg',
value: '上一张壁纸'
}, {
key: 'personalized',
value: '个性化设置'
}]
}
}
Vue.use(contextmenu, options)
```
> html
```html
<template lang="html">
<div data-role="desktop" @contextmenu-click="dispatchEvent">
<p>
在此区域右键则会出现注册表中的desktop中的菜单项，
接收右键点击事件可在元素上注册 contextmenu-click 事件即可接收到，右键点击事件的相应结果，
事件对象可通过event获取到被电击的项
</p>
</div>
</template>
```
```html
<template>
<div class="desktop" data-role="desktop" @contextmenu-showbefore="showbefore">
</div>
</template>
```
```js
import Vue from 'vue'
import contextmenu from 'suwis-contextmenu'
let options = {
background:
hover:
registry: {
// 桌面
desktop: [{
key: 'toggleFullScreen',
value: '进入全屏'
}, {
key: 'refresh',
value: '刷新'
}, {
key: 'nextbg',
value: '下一张壁纸'
}, {
key: 'prevbg',
value: '上一张壁纸'
}, {
key: 'personalized',
value: '个性化设置'
}]
}
}
Vue.use(contextmenu, options)
export deafult {
methods: {
showbefore(e) {
// 获取菜单
let menus = e.detail
menus.forEach(item => {
// 隐藏
item.visible = false
// 禁用
item.disabled = true
})
}
}
}
```
