在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查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
使用jquery实现轮播图效果
Jan 02 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操作XML作为数据库的类
2010/12/19 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
JS之相等操作符详解
2016/09/13 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
node后端服务保活的实现
2019/11/10 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
教大家使用Python SqlAlchemy
2016/02/12 Python
Python端口扫描简单程序
2016/11/10 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python 常见的排序算法实现汇总
2020/08/21 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
委托公证书
2014/04/08 职场文书
预备党员综合考察材料
2014/05/31 职场文书
商业项目策划方案
2014/06/05 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
python如何读取.mtx文件
2021/04/22 Python
Python Django搭建文件下载服务器的实现
2021/05/10 Python