1.vue安装contextmenu插件
npm i jquery-contextmenu --save-dev
2.在main.js中引入node_modules中的包
import Jquery_contextmenu from '@//jquery-contextmenu'
import 'jquery-contextmenu/dist/jquery.contextMenu.css'
Vue.use(Jquery_contextmenu)
3.安装jquery
npm install jquery
我的jquery是最新版本："jquery": "^3.6.0"
4.在vue.config.js中将jquery作为插件加进去
顶部：const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery'
})
]
},
}
5.在需要用到的页面导入jquery
import $ from 'jquery'
使用：
$.contextMenu({
selector: '.' + connInfo.id, # 这里就是class类
items: {
'delete': {
name: '删除',
callback: function(key, opt) {
removeEdge(key)
}
}
}
})
6.自定义右键菜单的样式
由于使用npm安装插件，所以只能在node_modules中jquery-contextmenu中进行修改，这里我将文件取出来放在components中作为组件使用，可以自定义格式。
从node_modules去除上图的文件，放到自己想放的目录。
然后在页面中引入：
import '@/components/contextMenu/jquery.contextMenu.css'
import '@/components/contextMenu/jquery.contextMenu.min.js'
这里需要注意的是，要把main.js中的引入包的语句删除或者注释掉（下面三句不要了）：
import Jquery_contextmenu from '@//jquery-contextmenu'
import 'jquery-contextmenu/dist/jquery.contextMenu.css'
Vue.use(Jquery_contextmenu)
7.修改样式
在下面的文件中可以随意修改样式
/components/contextMenu/jquery.contextMenu.css'
此时依旧需要在页面中引入 import $ from 'jquery'
8.在学习过程中用的到网址
引入jquery-contextMenu：
https://www.yisu.com/zixun/168799.html
jquery官网：
https://jquery.com/download/
替换font图标：
https://blog.csdn.net/du_5pet/article/details/107781455?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3
