vue 右鍵選單外掛 簡單、可擴充套件、樣式自定義的右鍵選單

摘要： 今天分享的不是技術，今天給大家分享個外掛，針對現有的vue右鍵選單外掛，大多數都是需要使用外掛本身自定義的標籤，很多地方不方便，可擴充套件性也很低，所以我決定寫了一款自定義指令呼叫右鍵選單（vuerightmenu） 安裝 1npm install rightmenu --s...

今天分享的不是技術，今天給大家分享個外掛，針對現有的vue右鍵選單外掛，大多數都是需要使用外掛本身自定義的標籤，很多地方不方便，可擴充套件性也很低，所以我決定寫了一款自定義指令呼叫右鍵選單（vuerightmenu）

安裝

1npm install rightmenu --save-dev

開始

//main.js
import 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 ]Yreturn 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吧。使用中如有問題，請聯絡我的QQ:421217189