contextmenu插件的步骤讲解

今天小编就为大家分享一篇关于在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文件,然后按需引入即可

contextmenu插件的步骤讲解

3、使用:

<template> <div> <button>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>

效果图:

contextmenu插件的步骤讲解

总结

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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/5460d1432c305033fa48138bc4a210c5.html