@ektx/v-contextmenu

VContextmenu

右键菜单功能

安装

yarn add @ektx/v-contextmenu
npm i @ektx/v-contextmenu

NPM 使用

引用组件

import Vue from 'vue';
import VContextmenu from '@ektx/v-contextmenu';
import '@ektx/v-contextmenu/dist/vcontextmenu.css';

Vue.use(VContextmenu);

Vue 页面使用

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

<script>
	export default {
		name: 'demo',
		data () {
			return {
				// 菜单内容
				menu: [{
					title: 'v-contenxtmenus',
					classes: 'hello',
					evt (data) {
						alert('Welcome Use v-contenxtmenus!')
					}
				},
				{
					title: '联系方式',
					children: {
						title: '[e-mail]'
					},
					{
						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)
			}
		}
	}
</script>

事件方法

/**
 * 显示功能
 * @param [Array] 菜单内容
 * @param [event] JS事件
 */
this.$VContextmenu.show(data, evt)

/**
 * 手动关闭功能
 */
this.$VContextmenu.close()

data 说明

标签	类型	说明	默认值
title	String	菜单列表标题	-
evt	Function	菜单点击事件	-
disabled	Boolean	是否可以使用	-
classes	Class	自定义样式名	-
type	separator	分隔线	-