今天给大家推荐一个功能超不错的vue.js系统右键菜单组件VueContextMenu。

vue-contextmenu 适用于Vue2.x的ContextMenu组件。支持动态菜单、自定义事件、多级子菜单及禁用菜单项。

安装

$ npm i -S v-contextmenu

引入

// 在main.js中引入import Vue from 'vue'import contentmenu from 'v-contextmenu'import 'v-contextmenu/dist/index.css'Vue.use(contentmenu)

使用插件

<template>  <div class="example">    <contextmenu ref="contextmenu" :theme="dark">      <contextmenu-item>菜单1</contextmenu-item>      <contextmenu-item>菜单2</contextmenu-item>      <contextmenu-item disabled>菜单3</contextmenu-item>            <contextmenu-submenu title="子菜单">        <contextmenu-item>菜单4</contextmenu-item>                <contextmenu-item divider></contextmenu-item>                <contextmenu-submenu title="子菜单">          <contextmenu-item >菜单5</contextmenu-item>        </contextmenu-submenu>      </contextmenu-submenu>    </contextmenu>        <div v-contextmenu:contextmenu>      右键点击此区域    </div>  </div></template>

附上项目示例及仓库地址

# demo地址https://heynext.github.io/v-contextmenu/# 项目地址https://github.com/heynext/v-contextmenu

ok，就分享到这里。希望大家能喜欢哈！