在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实现导航栏效果(选中状态刷新不消失)

    vue实现导航栏效果(选中状态刷新不消失)

    这篇文章主要为大家详细介绍了vue实现导航栏效果,选中状态刷新不消失,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    这篇文章主要介绍了vue实现动态给id赋值,点击事件获取当前点击的元素的id操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue组件通信传递数据的三种方式

    Vue组件通信传递数据的三种方式

    这篇文章主要介绍了Vue组件通信传递数据的三种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-04-04
  • vue2和vue3部署到服务器子目录为空白页问题及解决

    vue2和vue3部署到服务器子目录为空白页问题及解决

    这篇文章主要介绍了vue2和vue3部署到服务器子目录为空白页问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 详解Vuejs2.0之异步跨域请求

    详解Vuejs2.0之异步跨域请求

    这篇文章主要介绍了详解Vuejs2.0之异步跨域请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue3实现多个表格同时滚动并固定表头

    vue3实现多个表格同时滚动并固定表头

    这篇文章主要给大家介绍了vue3中多个表格怎么同时滚动并且固定表头,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • vue  自定义组件实现通讯录功能

    vue 自定义组件实现通讯录功能

    本文通过实例代码给介绍了vue使用自定义组件实现通讯录功能,需要的朋友可以参考下
    2018-09-09
  • vue使用axios实现动态追加数据

    vue使用axios实现动态追加数据

    在vuejs中使用axios时,有时候需要追加数据,比如,移动端下拉触底加载,分页加载,滑动滚动条等,下面小编就来为大家介绍一下如何使用使用axios实现动态追加数据吧
    2023-10-10
  • vue通过笛卡儿积实现sku库存配置方式

    vue通过笛卡儿积实现sku库存配置方式

    这篇文章主要介绍了vue通过笛卡儿积实现sku库存配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue 路由返回恢复页面状态的操作方法

    Vue 路由返回恢复页面状态的操作方法

    在使用 Vue 开发前端的时候遇到一个场景在首页进行一些数据搜索,点击搜索结果进入详情页面,浏览详情页后返回主页,所以需要在返回后恢复跳转前的页面参数状态,今天通过本文给大家分享Vue 路由页面状态返回的操作方法,一起看看吧
    2021-07-07

最新评论