溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用步驟：
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>
效果圖：
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。如果你想了解更多相關內容請查看下面相關鏈接
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
