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