在vue項(xiàng)目中使用Jquery-contextmenu插件的步驟講解

更新時間：2019年01月27日 14:08:39 作者：Moment°回憶

今天小編就為大家分享一篇關(guān)于在vue項(xiàng)目中使用Jquery-contextmenu插件的步驟講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

使用步驟：

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'

注意：

在引入樣式時可以點(diǎn)擊進(jìn)去jquery-contextmenu的安裝目錄中查找對應(yīng)的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>

效果圖：

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航欄效果，選中狀態(tài)刷新不消失，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-12-12
vue實(shí)現(xiàn)動態(tài)給id賦值,點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素的id操作
這篇文章主要介紹了vue實(shí)現(xiàn)動態(tài)給id賦值,點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素的id操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue組件通信傳遞數(shù)據(jù)的三種方式
這篇文章主要介紹了Vue組件通信傳遞數(shù)據(jù)的三種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-04-04
vue2和vue3部署到服務(wù)器子目錄為空白頁問題及解決
這篇文章主要介紹了vue2和vue3部署到服務(wù)器子目錄為空白頁問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
詳解Vuejs2.0之異步跨域請求
這篇文章主要介紹了詳解Vuejs2.0之異步跨域請求,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
vue3實(shí)現(xiàn)多個表格同時滾動并固定表頭
這篇文章主要給大家介紹了vue3中多個表格怎么同時滾動并且固定表頭,文中通過代碼示例給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02
vue 自定義組件實(shí)現(xiàn)通訊錄功能
本文通過實(shí)例代碼給介紹了vue使用自定義組件實(shí)現(xiàn)通訊錄功能,需要的朋友可以參考下
2018-09-09
vue使用axios實(shí)現(xiàn)動態(tài)追加數(shù)據(jù)
在vuejs中使用axios時,有時候需要追加數(shù)據(jù),比如,移動端下拉觸底加載,分頁加載,滑動滾動條等,下面小編就來為大家介紹一下如何使用使用axios實(shí)現(xiàn)動態(tài)追加數(shù)據(jù)吧
2023-10-10
vue通過笛卡兒積實(shí)現(xiàn)sku庫存配置方式
這篇文章主要介紹了vue通過笛卡兒積實(shí)現(xiàn)sku庫存配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue 路由返回恢復(fù)頁面狀態(tài)的操作方法
在使用 Vue 開發(fā)前端的時候遇到一個場景在首頁進(jìn)行一些數(shù)據(jù)搜索，點(diǎn)擊搜索結(jié)果進(jìn)入詳情頁面，瀏覽詳情頁后返回主頁，所以需要在返回后恢復(fù)跳轉(zhuǎn)前的頁面參數(shù)狀態(tài)，今天通過本文給大家分享Vue 路由頁面狀態(tài)返回的操作方法，一起看看吧
2021-07-07