今天分享的不是技術，今天給大家分享個插件，針對現有的vue右鍵菜單插件，大多數都是需要使用插件本身自定義的標簽，很多地方不方便，可擴展性也很低，所以我決定寫了一款自定義指令調用右鍵菜單（vuerightmenu）
安裝
1 npm 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 ] 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吧。使用中如有問題，請聯系我的QQ:421217189