v-contextmenus
Advanced tools
Comparing version
{ | ||
"name": "v-contextmenus", | ||
"version": "0.0.2", | ||
"version": "0.1.0", | ||
"description": "Vue 右键菜单功能", | ||
@@ -5,0 +5,0 @@ "author": "kings <530675800@qq.com>", |
@@ -18,15 +18,6 @@ # VContextmenus | ||
```javascript | ||
{ | ||
state: { | ||
contextmenus: { | ||
// 状态 | ||
show: true | ||
// 数据 | ||
data: {}, | ||
// 事件 | ||
evt: null | ||
} | ||
}, | ||
mutaions: { | ||
// 设置方法 | ||
const store = new Vuex.Store({ | ||
state: {}, | ||
// 添加以下内容 | ||
mutations: { | ||
setContextmenu (state, data) { | ||
@@ -38,5 +29,6 @@ if (Object.keys(data).length > 1) { | ||
} | ||
} | ||
} | ||
} | ||
}) | ||
``` | ||
@@ -52,3 +44,3 @@ | ||
<!-- 引用 --> | ||
<!-- 引用 HTML 结构 --> | ||
<VContextmenus></VContextmenus> | ||
@@ -59,6 +51,4 @@ </main> | ||
<script> | ||
// 引入 store | ||
import store from '../assets/js/store' | ||
// 引入 | ||
import VContextmenus from '../components/VContextmenus' | ||
import VContextmenus from 'v-contextmenus' | ||
@@ -72,3 +62,41 @@ export default { | ||
// 菜单内容 | ||
menu: [ ... ] | ||
menu: { | ||
data: [ | ||
{ | ||
title: 'v-contenxtmenus', | ||
evt: function(data) { | ||
alert('Welcome Use v-contenxtmenus!') | ||
} | ||
}, | ||
{ | ||
title: '联系方式', | ||
children: [ | ||
{ | ||
title: 'ektx1989@gmail.com' | ||
}, | ||
{ | ||
title: '@宅龙猫' | ||
} | ||
] | ||
}, | ||
{ | ||
type: 'separator' | ||
}, | ||
{ | ||
title: 'Github.com', | ||
evt: function() { | ||
} | ||
}, | ||
{ | ||
type: 'separator' | ||
}, | ||
{ | ||
disabled: true, | ||
title: 'v 0.1.0' | ||
} | ||
] | ||
} | ||
} | ||
@@ -90,13 +118,13 @@ }, | ||
* store.commit('setContextmenu', {data, evt}) | ||
* 展示菜单功能 | ||
> store.commit('setContextmenu', {data, evt}) | ||
@data 菜单内容 | ||
@evt 鼠标事件 | ||
展示菜单功能 | ||
* | ||
* 关闭菜单 | ||
## 完整示例 | ||
> store.commit('setContextmenu', { show: false }) | ||
将 demo 文件放到你的 vue webpack 项目中,替换其下的 src |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
9269
2.44%125
30.21%4
-20%