使用步骤:

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插件的步骤讲解

总结

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

标签:
vue中使用contextmenu插件,在vue项目中使用jquery-contextmenu插件的步骤讲解

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。