vue 右鍵菜單插件 簡單、可擴展、樣式自定義的右鍵菜單

　　今天分享的不是技術，今天給你們分享個插件，針對現有的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