在vue项目中使用Jquery-contextmenu插件的步骤讲解


Posted in jQuery onJanuary 27, 2019

使用步骤:

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文件,然后按需引入即可

在vue项目中使用Jquery-contextmenu插件的步骤讲解

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>

效果图:

在vue项目中使用Jquery-contextmenu插件的步骤讲解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

jQuery 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 #jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 #jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 #jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 #jQuery
Jquery的Ajax技术使用方法
Jan 21 #jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
You might like
codeigniter中测试通过的分页类示例
2014/04/17 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python list中append()与extend()用法分享
2013/03/24 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
销售代表求职自荐信
2013/10/01 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2014年度培训工作总结
2014/11/27 职场文书
公务员个人考察材料
2014/12/23 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
Vue的生命周期一起来看看
2022/02/24 Vue.js