v-contextmenus

VContextmenus

右键菜单功能

使用方式

1. 安装

yarn add v-contextmenus

1. 在 vues 的 state 中添加共享状态与方法

请先确保你有使用 vuex

import setContextmenu from 'v-contextmenus/store'

const store = new Vuex.Store({
	state: {},
	// add this mutations
	mutations: {
		setContextmenu
	}
})

1. 在页面中调用组件

<template>
	<main>
		<!-- 绑定事件 -->
		<div @contextmenu.prevent="rightClick"></div>

		<!-- 引用 HTML 结构 -->
		<VContextmenus></VContextmenus>
	</main>
</template>

<script>
	// 引入
	import VContextmenus from 'v-contextmenus'

	export default {
		components: {
			VContextmenus
		},
		data () {
			return {
				// 菜单内容
				menu: {
					data: [
						{
							title: 'v-contenxtmenus',
							evt: function(data) {

								alert('Welcome Use v-contenxtmenus!')
								
							}
						},
						{
							title: '联系方式',
							children: [
								{
									title: '[e-mail]'
								},
								{
									title: '@宅龙猫'
								}
							]
						},
						{
							type: 'separator'
						},
						{
							title: 'Github.com',
							evt: function() {

							}
						},
						{
							type: 'separator'
						},
						{
							disabled: true,
							title: 'v 0.1.0'
						}
					]
				}
			}
		},
		methods: {
			// 自定义事件
			rightClick (evt) {
				store.commit('setContextmenu', {
					data: this.menu, evt
				})
			}
		}
	}
</script>

事件方法

• 展示菜单功能

store.commit('setContextmenu', {data, evt})

@data 菜单内容 @evt 鼠标事件

• 关闭菜单

store.commit('setContextmenu', { show: false })