在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实现二级联动效果
Mar 30 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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中strtotime函数使用方法详解
2011/11/27 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
express.js中间件说明详解
2019/03/19 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python实现登录与注册系统
2020/11/30 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
东方电视购物:东方CJ
2016/10/12 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
大学生社会实践自我鉴定
2014/03/24 职场文书
机关搬迁方案
2014/05/18 职场文书
中学生运动会口号
2014/06/07 职场文书
学校节能减排方案
2014/06/13 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2014年应急工作总结
2014/12/11 职场文书
大学生个人总结范文
2015/02/15 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript