一、前言
老的项目中有使用右键菜单,在拿过来用的时候有些问题,又找了些新的组件进行对比,在这里记录下。
二、组件对比
v-contextmenu :这个组件是原型项目中使用的,在拿过来的使用的时候一直安装不成功,提示需要的依赖不能正确安装,于是就放弃了这个(GitHub 地址);
vue-contextmenu:这个组件安装成功了,安装使用说明一直不成功,最后也放弃了(GitHub 地址);
vue-context-menu:最后选择这个,使用也较简单(GitHub 地址),不过这个有几年没有维护了;
三、使用
1、安装:
npm install vue-context-menu --save
2、在项目中使用
<template> <div @contextmenu.prevent="onContextShow()" /> <Contextmenu ref="contextmenu" class="context-menu"> <li v-show="contextmenuList.add" @click="addGroup(0)">添加</li> <li v-show="contextmenuList.edit" @click="editGroup">修改</li> <li v-show="contextmenuList.delete" @click="removeGroup">删除</li> </Contextmenu> </template> <script> // 直接在组件中引入使用 import Contextmenu from 'vue-context-menu' export default { components: { Contextmenu }, methods: { onContextShow(data) { this.$refs.contextmenu.open() }, } } </script> <style lang="scss"> .context-menu { .ctx-menu { min- 65px; font-size: 14px; li { padding: 5px 14px; text-align: center; cursor: pointer; &:hover { background-color: #409eff; } } } } </style>
上面是整个代码的使用,在使用的过程中可以多层级,直接使用 li=》ul=》li 这样进行嵌套。
样式就是要嵌套下组件的 class 就可以。