在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>

效果图:

总结

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

相关文章

  • 解决uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json

    解决uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json

    这篇文章主要给大家介绍了关于解决uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json的相关资料,文中通过图文将解决的办法介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue自定义开关组件使用详解

    vue自定义开关组件使用详解

    这篇文章主要为大家详细介绍了vue自定义开关组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 如何通过点击按钮切换显示不同echarts图表

    如何通过点击按钮切换显示不同echarts图表

    这篇文章主要介绍了如何通过点击按钮切换显示不同echarts图表,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue双向数据绑定与响应式原理深入探究

    Vue双向数据绑定与响应式原理深入探究

    本节介绍双向数据绑定以及响应式的原理,回答了双向数据绑定和数据响应式是否相同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-08-08
  • vue静态配置文件不进行编译的处理过程(在public中引入js)

    vue静态配置文件不进行编译的处理过程(在public中引入js)

    这篇文章主要介绍了vue静态配置文件不进行编译的处理过程(在public中引入js),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 关于vue双向绑定带来的问题及解决

    关于vue双向绑定带来的问题及解决

    这篇文章主要介绍了关于vue双向绑定带来的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中调用HTTP请求的详细步骤

    vue中调用HTTP请求的详细步骤

    这篇文章主要介绍了vue中调用HTTP请求的详细步骤,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定帮助,需要的朋友可以参考下
    2024-07-07
  • vue给数组中对象排序 sort函数的用法

    vue给数组中对象排序 sort函数的用法

    这篇文章主要介绍了vue给数组中对象排序 sort函数的用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue3新状态管理工具实例详解

    Vue3新状态管理工具实例详解

    Vue3公布曾经有一段时间了,它采纳了新的响应式零碎,而且构建了一套全新的 Composition API,下面这篇文章主要给大家介绍了关于Vue3新状态管理工具的相关资料,需要的朋友可以参考下
    2022-03-03
  • Vue3中Cesium地图初始化及地图控件配置方法

    Vue3中Cesium地图初始化及地图控件配置方法

    本文中,我们主要介绍Cesium在Vue3运行环境的配置,及Cesium实例中控件的显隐设置,本项目基于pnpm安装,也可使用其他包管理器进行安装,如npm或yarn,本文通过示例代码对vue初始化Cesium地图相关知识介绍的非常详细,需要的朋友参考下吧
    2023-07-07

最新评论