Vue-Right-Click
高度灵活且简易的右键菜单 Vue.js 指令插件
安装
在 Vue-Cli
项目中你可以这样使用:
npm install @jaxsonwang/vue-right-click
# or
yarn add @jaxsonwang/vue-right-click
全局注入:
import VueRightClick from '@jaxsonwang/vue-right-click'
Vue.use(VueRightClick, VueRightClickOptions)
然后在需要显示右击菜单注入指令即可:
<template>
<div id="app" class="demo">
<div v-right-click="rcAction" class="demo-item" />
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
rcAction: [
{
name: '新增',
event: () => {
console.log('我执行了新增事件')
}
},
{
name: '删除',
event: this.deleteAction
}
]
}
},
methods: {
deleteAction() {
console.log('我执行删除事件')
}
}
}
</script>
当然你可以在静态页面使用,只需要引入:
<script src="vue.js"></script><!-- 需要 Vue.js 依赖 -->
<script src="../dist/vue-right-click.umd.js"></script>
API
插件选项:
menuListClass
- 类型:
String
- 默认值:
vue-right-click-list
- 用法:右击弹窗外层菜单列表样式名称
Vue.use(VueRightClick, {
menuListClass: 'app-menu-class'
})
menuItemClass
- 类型:
String
- 默认值:
vue-right-click-item
- 用法:右击弹窗菜单选项样式名称
Vue.use(VueRightClick, {
menuItemClass: 'menu-item-class'
})
injectBody
- 类型:
Boolean
- 默认值:
true
- 用法:右击弹窗自身是否插入至 body 元素上。
Vue.use(VueRightClick, {
injectBody: true
})
指令选项
v-right-click
- 类型:
Array | Function
- 默认值:
[]
- 用法:指令的值类型是数组,你可以直接作为数组赋值,推荐使用函数赋值。
数组的对象如下:
{
"name": "菜单名称",
"event": "事件名称",
"callback": "传入事件回调",
"disable": "菜单状态"
}
name
- 类型:
String
- 默认值:
''
- 用法:显示菜单名称
- 是否必须使用:是
event
- 类型:
Function
- 默认值:
''
- 用法:点击触发的事件
- 是否必须使用:是
callback
- 类型:
Function
- 默认值:
''
- 用法:点击菜单需要的回调事件
- 是否必须使用:否
disable
- 类型:
Boolean | Function
- 默认值:
true
- 用法:是否禁用菜单
- 是否必须使用:否
使用方法请先查看:test/index.html 或者 src/App.vue
弹窗样式
插件默认不存在弹窗样式,需要自己添加,当然你可以尝试加入下列样式:
.app-menu-class {
position: absolute;
margin: 0;
background-color: #fff;
z-index: 1;
padding: 5px 0;
list-style-type: none;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
width: 135px;
}
.app-menu-class .menu-item-class {
font-size: 14px;
margin: 0;
padding: 7px 16px;
cursor: pointer;
}
.app-menu-class .menu-item-class:hover {
background-color: #eee;
}
.app-menu-class .menu-item-class-disable {
background-color: #eee;
cursor: auto;
}
更新日志
更新日志参考版本发布
License
Vue-Right-Click is open source and released under the MIT License.