在vue項目中使用Jquery-contextmenu插件的步驟講解

2019-11-19 12:13:01

字體：大中小

來源：轉載

供稿：網友

使用步驟：

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>

效果圖：