在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 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 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
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
javascript实现的listview效果
2007/04/28 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
初三新学期计划书
2014/05/03 职场文书
企业环保标语
2014/06/10 职场文书
法院授权委托书格式
2014/09/28 职场文书
平安家庭事迹材料
2014/12/20 职场文书
服务明星事迹材料
2014/12/29 职场文书
员工辞职信怎么写
2015/02/27 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers