Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ektx/v-contextmenu
vue.js contextmenu
https://github.com/ektx/v-contextmenu
Last synced: about 1 month ago
JSON representation
vue.js contextmenu
- Host: GitHub
- URL: https://github.com/ektx/v-contextmenu
- Owner: ektx
- Created: 2018-05-09T06:53:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-11T12:56:19.000Z (about 6 years ago)
- Last Synced: 2024-11-28T07:35:11.257Z (about 1 month ago)
- Language: Vue
- Size: 229 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# VContextmenu
右键菜单功能
## 安装
```bash
yarn add @ektx/v-contextmenu
npm i @ektx/v-contextmenu
```
## NPM 使用
### 引用组件
```js
import Vue from 'vue';
import VContextmenu from '@ektx/v-contextmenu';
import '@ektx/v-contextmenu/dist/vcontextmenu.css';
Vue.use(VContextmenu);
```
### Vue 页面使用
```html
export default {
name: 'demo',
data () {
return {
// 菜单内容
menu: [{
title: 'v-contenxtmenus',
classes: 'hello',
evt (data) {
alert('Welcome Use v-contenxtmenus!')
}
},
{
title: '联系方式',
children: {
title: '[email protected]'
},
{
title: '@宅龙猫'
}]
},
{
type: 'separator'
},
{
title: 'Github.com',
evt () {
}
},
{
type: 'separator'
},
{
disabled: true,
title: 'v 0.1.0'
}]
}
},
methods: {
// 自定义事件
rightClick (evt) {
this.$VContextmenu.show(this.menu, evt)
}
}
}
```
## 事件方法
```js
/**
* 显示功能
* @param [Array] 菜单内容
* @param [event] JS事件
*/
this.$VContextmenu.show(data, evt)
/**
* 手动关闭功能
*/
this.$VContextmenu.close()
```
### data 说明
| 标签 | 类型 | 说明 | 默认值 |
| --- | --- | --- | --- |
| title | `String` | 菜单列表标题 | - |
| evt | `Function` | 菜单点击事件 | - |
| disabled | `Boolean` | 是否可以使用 | - |
| classes | `Class` | 自定义样式名 | - |
| type | `separator` | 分隔线 | - |