jquery-contextmenu插件

jquery-contextmenu插件的使用

1.插件说明
1）contextMenu 是一个专门用于 Web 应用的右键菜单插件。
2) 与一般的菜单插件不同，contextMenu 不需要将其自身绑定到触发对象上。
3) 这就使得我们可以随时注入和删除触发器，而不必重新初始化或更新 contextMenu。

2.安装配置

• 使用 contextMenu 要引入 jquery.contextMenu.js 和 jquery.contextMenu.css.
• 同时由于 contextMenu 依赖 jQuery,所以必须下载jQuery.

//main.js中
import Jquery_contextmenu from 'jquery-contextmenu';
import "jquery-contextmenu/dist/jquery.contextMenu.css";
Vue.use(Jquery_contextmenu);

//vue.config.js中
plugins: [
   //配置全局使用jquery
   new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
       "windows.jQuery": "jquery"
   })
],

3.基本使用

//先将全局的菜单事件禁用
 created() {
    //屏蔽自带右键菜单
    document.oncontextmenu = function (e) {
      return false;
    };
  },

使用：
<button class="context-menu-one">按钮1</button>
    <script type="text/javascript">
      $(function() {
         //初始化菜单
         $.contextMenu({
             selector: '.context-menu-one',
             callback: function(key, options) {
                 console.log("点击了：" + key);
                 //在回调函数里面根据点击的不同分配做不同的事情
             },
             items: {
                 "edit": {name: "编辑", icon: "edit"},
                 "cut": {name: "剪切", icon: "cut"},
                 "copy": {name: "复制", icon: "copy"},
                 "paste": {name: "粘贴", icon: "paste"},
                 "delete": {name: "删除", icon: "delete"},
                 "sep1": "---------",
                 "quit": {name: "退出", icon: function(){
                     return 'context-menu-icon context-menu-icon-quit';
                 }}
             }
         });
      });
    </script>