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

更新時間：2018年11月29日 10:15:15 作者：金振宗

這篇文章主要介紹了vue 右鍵菜單插件簡單、可擴展、樣式自定義的右鍵菜單，本文給大家分享個例子，給大家及時的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下

今天分享的不是技術(shù)，今天給大家分享個插件，針對現(xiàn)有的vue右鍵菜單插件，大多數(shù)都是需要使用插件本身自定義的標(biāo)簽，很多地方不方便，可擴展性也很低，所以我決定寫了一款自定義指令調(diào)用右鍵菜單（vuerightmenu）

　　安裝

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：菜單點擊要觸發(fā)函數(shù) 需要在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內(nèi)所有api均已在上面例子說明，可為空的參數(shù)就可以不填寫，都會有默認值或者本身就是可有可無的

　本插件優(yōu)缺點說明

　　相比較于大眾化的右鍵插件他有如下優(yōu)點：

•　　插件精悍短小，運行速度快
•　　不需要單獨配置任何邊界檢測，插件本身自帶了
•　　樣式完全根據(jù)用戶需求，自定義菜單的任何地方的樣式
• 使用簡單，一個指令即可調(diào)用
• 不會為頁面渲染無用的dom，一切都是在你第一次使用時候才會進行加載，并且保證在之后的多次使用中，不會渲染多余dom
•　　支持菜單文字（content字段）使用html ，沒錯，你可以使用字體圖標(biāo)而不用拘泥于插件自身的圖片圖標(biāo)，也可以使用不同的標(biāo)簽來表示你的菜單（當(dāng)然我也考慮了如此做法，可能需要你必須要完整的吧標(biāo)簽寫出來，否則可能會報錯，這個問題后期我會進行修復(fù)，先看看效果）

　　缺點說明：

•　　因為本菜單實現(xiàn)的是高度自定義，所以可能會讓使用者需要定義很多樣式，我只寫了一些必要的樣式，其余全部需要使用者來自定義（我也不知道這是個缺點還是優(yōu)點，不過如果我是使用者我會覺得還是插件本身不帶有很多的樣式為好）
• 因為設(shè)計插件時候，沒有考慮到圖標(biāo)問題，所以導(dǎo)致后期有人和我說想要圖標(biāo)的時候，我加入圖標(biāo)功能進去，會導(dǎo)致圖片稍微高于文字一些，這個小bug也是css本身自帶的，而這個小bug恰好卡在了項目的痛點，也不算痛點吧，只是我工作上有一些事情也必須要盡快處理，而這個問題所以為了彌補這個問題，我加入了content內(nèi)支持了html，也就是說如果你的要求很高，對視覺上，我建議你用字體圖標(biāo)，至于圖片與文字的問題，我會在短期內(nèi)盡快修復(fù)，修復(fù)好，我會第一時間發(fā)布

本插件旨在實現(xiàn)的是靈活 + 低配置 + 擴展性高 + 指令調(diào)用的快速右鍵菜單，正如你看到的我只需要一個指令，一個json，僅此而已。本插件對于新人還是老手均能適用，因為本插件是一款擴展性極高的插件，支持你配置菜單總樣式、菜單選項樣式、點擊的回調(diào)函數(shù)、菜單選項的icon 甚至你能定義每一單獨選項的樣式以及icon。最后感謝大家的支持，如果喜歡的話請到github（https://github.com/JinZhenZon/rightmenu）為本插件點個star吧。

以上所述是小編給大家介紹的vue 右鍵菜單插件簡單、可擴展、樣式自定義的右鍵菜單，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: