标签：vue,jquery,contextmenu,插件
使用步骤：
1、安装：
npm i jquery-contextmenu --save-dev
2、在main.js文件中引包
import Jquery_contextmenu from 'jquery-contextmenu'
Vue.use(Jquery_contextmenu)
import 'jquery-contextmenu/dist/jquery.contextMenu.css'
注意：
在引入样式时可以点击进去jquery-contextmenu的安装目录中查找对应的css文件，然后按需引入即可
3、使用：
<template>
<div>
<button class="with-cool-menu">Jquery-contextmenu</button>
</div>
</template>
<script>
export default {
name: "Jquery_contextmenu_44",
mounted() {
$.contextMenu({
selector: '.with-cool-menu',
callback: function (key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
copy: {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {
name: "Quit", icon: function () {
return 'context-menu-icon context-menu-icon-quit';
}
}
}
});
$('.with-cool-menu').on('click', function (e) {
console.log('clicked', this);
})
}
}
</script>
<style scoped>
</style>
效果图：
来源：https://blog.csdn.net/qq_35366269/article/details/84633087
0
投稿猜你喜欢
mark 一下使用 bootstrap selectpicker 遇到的一个小issue，作为下次查错使用$('.selectpic- 最近因为要安装Tensorflow，然后发现tensorflow居然不支持python3.7，于是怒而将其降级到3.6以下是具体命令，mar
- 1.删除序列相同元素并保持顺序如果仅仅就是想消除重复元素，通常可以简单的构造一个集合，利用集合之间元素互不相同的特性就可以消除重复，但是这种
- 本文为大家分享了pygame游戏之旅的第10篇，供大家参考，具体内容如下通过获取鼠标的位置然后进行高亮显示：mouse =pygame.mo
- 这篇文章主要介绍了python 数据生成excel导出（xlwt,wlsxwrite）代码实例,文中通过示例代码介绍的非常详细，对大家的学习
- Data Points Archive 有时， 为了让应用程序运行得更快，所做的全部工作就是在这里或那里做一些很小调整。啊，但关键在于确定如
- function nohtml(str) dim re Set re=new
- 运行下面的代码你就可以清楚的认识到这两个参数的用法,innerText只能动态的改变指定元素内的文本内容，而innerHTML则不仅仅可以改
- 在编写自动化测试用例的时候，每次登录都需要输入验证码，后来想把让python自己识别图片里的验证码，不需要自己手动登陆，所以查了一下识别功能
- 现在流行的静态博客/网站生成工具有很多，比如 Jekyll, Pelican, Middleman, Hyde 等等，StaticGen 列
- 一、内容回顾Model- 数据库操作- 验证class A(MOdel):user = email = pwd =Form- class L
- 设计是一个输入-输出的过程，因为首先有用户的需求，客户的项目才有设计的产生，设计是带有目的性和市场行为的，当然也有一部分的创造性设计，仅仅为
- DataTable dt = new DataTable(); dt = ds.Tables["All"].Clone(
- 2015年1月1日，新的一年开始之际，本来应该好好做点有意义的事情来跨个年的。结果， * 惯 - 睡觉之前一定要折腾一下电脑，说干就干，给新到
- 迭代器模式迭代器模式（Iterator Pattern）是一种常用的设计模式，用于遍历集合中的元素，不暴露集合的内部结构。迭代器模式将集合和
- 由于服务器的数据库硬盘空间满了，由于大量写入数据失败导致了出现“Duplicate entry '' for key
- 路漫漫其修远兮，吾将上下而求索，又到了周末，我继续带各位看官学习回顾Mysql知识。上次说到了流程控制函数，那就从流程控制函数来继续学习吧！
- 使用Keras训练好的模型用来直接进行预测，这个时候我们该怎么做呢？【我这里使用的就是一个图片分类网络】现在让我来说说怎么样使用已经训练好的
- 代码如下:--执行顺序 From Where Select select * from (select sal as salary,comm
- by yemoo有时在编写网页代码时发现，img底部莫名奇妙多出大约3px的空白，无论怎么调节css都不可以，今天再次遇到此问题，网上看了一
