在vue项目中使用Jquery-contextmenu插件的步骤讲解
作者:Moment°回忆 发布时间:2023-07-02 17:08:29
标签: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
投稿
猜你喜欢
- 在数据存储过多时,我们会选择清除,不过有时候也需要找回一些我们之前删掉的数据。有的小伙伴可能会使用不同的方法分别完成,那么今天小编带来的_d
- FileUpload上传图片(图片不变形) 的实现方法,需要的朋友可以参考下。<style type="text/css&q
- 1. 自己写for循环从array里去掉$tmp这个元素的值<?php$tmp = '324';$arr = arra
- 引言最近再做图像处理相关的操作的时间优化,用到了OpenCV和Pillow两个库,两个库各有优缺点。各位小伙伴需要按照自己需求选用。本篇博客
- 需求有多个文件地理数据库(gdb),数据库内有多个面要素类图层,每个图层不能有自重叠,也不能和其他图层重叠。所以,需要为每个文件地理数据库(
- 示例很简单,注释里也都做了说明,这里就不多废话了。<?php/*从平台获取数据库名*/$dbname = "";/
- 字符串去除数字间的逗号在西文数字的表示中,很多格式是类似这样:123,456,789。如果得到这样的一个字符串,直接用int转换成整型肯定报
- 本文实例为大家分享了python实现飞船大战的具体代码,供大家参考,具体内容如下上篇博文我们一起实现了贪吃蛇与坦克大战200行python代
- 字符串函数ASCII(str) 返回字符串str的第一个字符的ASCII值(str是空串时返回0) my
- 实验条件:从1张图像随机裁剪100张图像裁剪出图像的大小为 60 x 60IoU 大于等于 th=0.6 的裁剪框用红色标出,其它裁剪框用蓝
- 前言二维码现在是随处度可以看到,买东西,支付,添加好友只要你扫一扫就能完成整个工作,简单且方便。所以利用这个新春佳节做一个带着新春祝福的二维
- 需求说明:通过在界面上输入春联的上、下批和横批汉字从而生成春联图像,最后将春联图片保存。有实际需要的还可以将春联打印。实现过程:实现思路是先
- 配置环境: 1、数 据 库:Oracle 8i R2 (8.1.7) for NT 企业版 2、安装路径:C:ORACLE 实现方法: 1.
- 本位实例为大家分享了Python生成随机密码的实现过程,供大家参考,具体内容如下写了个程序,主要是用来检测MySQL数据库的空密码和弱密码的
- 本文实例讲述了Python基于回溯法子集树模板解决选排问题。分享给大家供大家参考,具体如下:问题从n个元素中挑选m个元素进行排列,每个元素最
- Mysql环境变量配置mysql的环境变量配置步骤1.1、在桌面选择“计算机”的图标,右键&
- 内容摘要:本文介绍了对数据库的基本操作:数据记录筛选(select),更新数据库(update),删除记录(delete),添加数据记录(i
- 考察对于知识的理解,除了实际的代码运用,还有一种方法就是问答类的题型。不同于普通的概念叙述,小编认为即使是面试题也会带有一些数学题目的影响,
- XML(可扩展标记语言)已成为Web应用中数据表示和数据交换的标准,随着Internet的快速发展,尤其是电子商务,Web服务等应用的广泛使
- 前言Vscode是是一个强大的跨平台工具,我自己电脑是mac,公司电脑是win而且是内部环境,导致公司安装软件很费劲。好在vscode许多插