在vue项目中使用Jquery-contextmenu插件的步骤讲解

 更新时间:2019年01月27日 14:08:39   作者:Moment°回忆  
今天小编就为大家分享一篇关于在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>

效果图:

总结

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

相关文章

  • Vue项目中props传值时子组件检测不到的问题及解决

    Vue项目中props传值时子组件检测不到的问题及解决

    这篇文章主要介绍了Vue项目中props传值时子组件检测不到的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

    vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

    今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue+axios实现文件下载及vue中使用axios的实例

    vue+axios实现文件下载及vue中使用axios的实例

    这篇文章主要介绍了vue+axios实现文件下载及vue中使用axios的实例,需要的朋友可以参考下
    2018-09-09
  • vue element-ui里的table中表头与表格出现错位的解决

    vue element-ui里的table中表头与表格出现错位的解决

    这篇文章主要介绍了vue element-ui里的table中表头与表格出现错位的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 利用Vue3封装一个弹框组件简单吗

    利用Vue3封装一个弹框组件简单吗

    最近在项目中自己封装的一个记录一下,下面这篇文章主要给大家介绍了关于利用Vue3封装一个弹框组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • vue实现日历备忘录功能

    vue实现日历备忘录功能

    这篇文章主要为大家详细介绍了vue实现日历备忘录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • vscode中eslint插件的配置(prettier配置无效)

    vscode中eslint插件的配置(prettier配置无效)

    这篇文章主要介绍了vscode中eslint插件的配置(prettier配置无效),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue中使用@blur获取input val值

    vue中使用@blur获取input val值

    这篇文章主要介绍了vue中使用@blur获取input val值的实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue非单文件组件使用详解

    Vue非单文件组件使用详解

    Vue单文件组件通常使用.vue文件扩展名,下面这篇文章主要给大家介绍了关于Vue非单文件组件使用的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 图文详解Element-UI中自定义修改el-table样式

    图文详解Element-UI中自定义修改el-table样式

    elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下
    2022-08-08

最新评论