今天分享的不是技術，今天給大家分享個插件，針對現有的vue右鍵菜單插件，大多數都是需要使用插件本身自定義的標簽，很多地方不方便，可擴展性也很低，所以我決定寫了一款自定義指令調用右鍵菜單（vuerightmenu）
安裝
npm install rightmenu --save-dev
開始
//main.jsimport vue from "vue";import rightMenu from "rightMenu";vue.use(rightMenu);
例子
<template> <div> <button v-rightMenu = "menudata"> {{ text }} </button> </div></template><script> export default { name:"demo", data(){ return { menudata:{ // 菜單box的樣式 Menu box style boxStyle:"width:150px;background:#f55;", // 菜單選項的樣式 Style of menu options optionStyle:"color:#fff;line-height:30px;font-size:15px;", menus:[ { /** * content 菜單顯示的文字 <支持html> * callback：菜單點擊要觸發函數 需要在methods定義 * style ： 本項菜單的單獨樣式 可以覆蓋掉optionStyle * icon : icon圖片地址 * iconStyle: icon 圖片的樣式（例如大小等 直接作用于圖片） * iconPosition : 支持left / right (其余全部按照left處理); * content The text displayed on the menu(can use html) * callback: Menu clicks to trigger functions need to be defined in methods * style : The single style of this menu can override option Style * icon : your icon's url * iconStyle : you icon's style ,is image's style * iconPosition :you can use left or right ;The rest are all processed according to left */ /** * 字段(field) 類型(type) 是否可以為空(is can null) 默認值 * content [ html | text ] Y "" * callback [ methods function ] Y return false * style [ css ] Y "" * icon [ url ] Y "" * iconStyle [ css ] Y "" * iconPosition [string] Y "left" */ content:"menu content", callback:"callbackMethods", style:"border-bottom:1px solid #fff;background:#333;line-height:30px;", icon:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2310514390,3580363630&fm=27&gp=0.jpg", iconStyle:"width:20px;height:20px;", iconPosition:"left", }, { content:"右鍵菜單二", callback:"otherMethods" } ], }, } }, methods:{ callbackMethods(){ // do something }, otherMethods(){ // do something } } }</script>補充說明
main.js引入并use之后，會增加全局指令v-rightMenu ，value為一個對象,value內所有api均已在上面例子說明，可為空的參數就可以不填寫，都會有默認值或者本身就是可有可無的
本插件優缺點說明
相比較于大眾化的右鍵插件他有如下優點：
• 插件精悍短小，運行速度快
• 不需要單獨配置任何邊界檢測，插件本身自帶了
• 樣式完全根據用戶需求，自定義菜單的任何地方的樣式
• 使用簡單，一個指令即可調用
• 不會為頁面渲染無用的dom，一切都是在你第一次使用時候才會進行加載，并且保證在之后的多次使用中，不會渲染多余dom
• 支持菜單文字（content字段）使用html ，沒錯，你可以使用字體圖標而不用拘泥于插件自身的圖片圖標，也可以使用不同的標簽來表示你的菜單（當然我也考慮了如此做法，可能需要你必須要完整的吧標簽寫出來，否則可能會報錯，這個問題后期我會進行修復，先看看效果）
缺點說明：
• 因為本菜單實現的是高度自定義，所以可能會讓使用者需要定義很多樣式，我只寫了一些必要的樣式，其余全部需要使用者來自定義（我也不知道這是個缺點還是優點，不過如果我是使用者我會覺得還是插件本身不帶有很多的樣式為好）
• 因為設計插件時候，沒有考慮到圖標問題，所以導致后期有人和我說想要圖標的時候，我加入圖標功能進去，會導致圖片稍微高于文字一些，這個小bug也是css本身自帶的，而這個小bug恰好卡在了項目的痛點，也不算痛點吧，只是我工作上有一些事情也必須要盡快處理，而這個問題所以為了彌補這個問題，我加入了content內支持了html，也就是說如果你的要求很高，對視覺上，我建議你用字體圖標，至于圖片與文字的問題，我會在短期內盡快修復，修復好，我會第一時間發布
本插件旨在實現的是靈活 + 低配置 + 擴展性高 + 指令調用的快速右鍵菜單，正如你看到的我只需要一個指令，一個json，僅此而已。本插件對于新人還是老手均能適用，因為本插件是一款擴展性極高的插件，支持你配置菜單總樣式、菜單選項樣式、點擊的回調函數、菜單選項的icon 甚至你能定義每一單獨選項的樣式以及icon。最后感謝大家的支持，如果喜歡的話請到github（https://github.com/JinZhenZon/rightmenu）為本插件點個star吧。
以上所述是小編給大家介紹的vue 右鍵菜單插件 簡單、可擴展、樣式自定義的右鍵菜單，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
