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

//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)  默認(rèn)值
             * 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>