在vue项目中使用Jquery-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文件，然后按需引入即可

【图片暂缺】

 

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>

 

效果图：

 

【图片暂缺】

 

总结

 

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

本文来自：http://www.q1010.com/184/6993-0.html

注：关于在vue项目中使用Jquery-contextmenu插件的步骤讲解的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js