在vue項目中使用Jquery-contextmenu插件的步驟講解
更新時間：2019年01月27日 14:08:39 作者：Moment°回憶
今天小編就為大家分享一篇關于在vue項目中使用Jquery-contextmenu插件的步驟講解，小編覺得內容挺不錯的，現(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'
注意：
在引入樣式時可以點擊進去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項目在微信開發(fā)工具里打開報錯Error:app.json:在項目根目錄未找到app.json
這篇文章主要給大家介紹了關于解決uniapp項目在微信開發(fā)工具里打開報錯Error:app.json:在項目根目錄未找到app.json的相關資料,文中通過圖文將解決的辦法介紹的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了vue自定義開關組件的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了如何通過點擊按鈕切換顯示不同echarts圖表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應式的原理，回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應式是否相同，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-08-08
vue靜態(tài)配置文件不進行編譯的處理過程(在public中引入js)
這篇文章主要介紹了vue靜態(tài)配置文件不進行編譯的處理過程(在public中引入js)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了關于vue雙向綁定帶來的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中調用HTTP請求的詳細步驟,文中通過代碼示例給大家講解的非常詳細,對大家的學習或工作有一定幫助,需要的朋友可以參考下2024-07-07
vue給數(shù)組中對象排序 sort函數(shù)的用法
這篇文章主要介紹了vue給數(shù)組中對象排序 sort函數(shù)的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3公布曾經(jīng)有一段時間了,它采納了新的響應式零碎,而且構建了一套全新的 Composition API,下面這篇文章主要給大家介紹了關于Vue3新狀態(tài)管理工具的相關資料,需要的朋友可以參考下2022-03-03
本文中，我們主要介紹Cesium在Vue3運行環(huán)境的配置，及Cesium實例中控件的顯隱設置，本項目基于pnpm安裝，也可使用其他包管理器進行安裝，如npm或yarn，本文通過示例代碼對vue初始化Cesium地圖相關知識介紹的非常詳細，需要的朋友參考下吧2023-07-07