vue 右键菜单插件简单、可扩展、样式自定义的右键菜单

(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )

今天分享的不是技术，今天给大家分享个插件，针对现有的vue右键菜单插件，大多数都是需要使用插件本身自定义的标签，很多地方不方便，可扩展性也很低，所以我决定写了一款自定义指令调用右键菜单（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：菜单点击要触发函数 需要在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均已在上面例子说明，可为空的参数就可以不填写，都会有默认值或者本身就是可有可无的

　本插件优缺点说明

　　相比较于大众化的右键插件他有如下优点：

"external nofollow" href="https://github.com/JinZhenZon/rightmenu">https://github.com/JinZhenZon/rightmenu）为本插件点个star吧。

以上所述是小编给大家介绍的vue 右键菜单插件简单、可扩展、样式自定义的右键菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：vsCode安装使用教程和插件安装方法
下一篇：简述vue路由打开一个新的窗口的方法

vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

vue 右键菜单插件简单、可扩展、样式自定义的右键菜单