演示 Demo

https://buuing.github.io/vue-right-menu/

使用 Usage

通过 import 使用

1. 安装插件

# 通过 npm 安装
npm install vue-right-menu

# 通过 yarn 安装
yarn add vue-right-menu

2. 使用插件

在 main.js 入口文件中添加代码

import rightMenu from 'vue-right-menu'

Vue.use(rightMenu)

在 xxx.vue 中使用

<template>
  <div v-menu="options" style="height: 300px; background-color: #82acff"></div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        type: 'li', // type为li是普通按钮
        text: '复制(C)', // 按钮的名称
        callback: () => alert('点击了复制') // 回调函数
      }]
    }
  }
}
</script>

通过 script 标签使用

• CDN链接: https://cdn.jsdelivr.net/npm/vue-right-menu/dist/rightMenu.umd.min.js

<div id="app">
  <div v-menu="options" style="height: 300px; background-color: #82acff"></div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-right-menu/dist/rightMenu.umd.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data () {
      return {
        options: [{
          type: 'li', // type为li是普通按钮
          text: '复制(C)', // 按钮的名称
          callback: () => alert('点击了复制') // 回调函数
        }]
      }
    }
  })
</script>

插件选项

给对应的元素添加v-menu的指令, 菜单栏的内容以及回调函数可以自定义

| 参数选项 | a链接 | 普通按钮 | 二级菜单 | 分割线 | :-: | :-: | :-: | :-: | :-: | type | a | li | ul | hr | title | √ | √ | √ | × | href | √ | × | × | × | func | × | √ | × | × | disabled | √ | √ | √ | × | children | × | × | √ | ×

| 参数选项 | type | text | href | callback | disabled | children | class | icon | | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | | 普通按钮 | li | √ | × | × | √ | × | - | - | | 二级菜单 | ul | √ | × | √ | √ | √ | - | - | | 分割线 | hr | × | × | × | × | × | - | - |

完整示例

<template>
  <div v-menu="options" style="height: 300px; background-color: #82acff"></div>
</template>

<script>
export default {
  data () {
    return {
      options: [
        {
          type: 'li', // type为li是普通按钮
          title: '复制(C)', // 按钮的名称
          func: () => alert('点击了复制') // 回调函数
        }, {
          type: 'li',
          title: '粘贴(V)',
          disabled: true, // 不可点击状态, 回调函数自然无法触发
          func: () => alert('点击了粘贴')
        }, {
          type: 'hr' // 分割线, 无需其他参数
        }, {
          type: 'ul', // type为ul是二级菜单
          title: '新建(W)',
          children: [ // children里面配置二级菜单列表, 不支持三级菜单
            {
              type: 'li',
              title: '文件夹(F)',
              func: () => alert('新建了文件夹')
            }, {
              type: 'li',
              title: '快捷方式(S)',
              func: () => alert('新建了快捷方式')
            }, {
              type: 'hr'
            }, {
              type: 'li',
              title: '文本文档'
            }, {
              type: 'li',
              title: 'Work 文档'
            }, {
              type: 'li',
              title: 'Excel 表格'
            }, {
              type: 'li',
              title: 'WinRAR 压缩文件'
            }
          ]
        }, {
          type: 'hr'
        }, {
          type: 'li',
          title: '属性(R)',
          func: () => alert('点击了属性')
        }
      ]
    }
  }
}
</script>

<template>
  <div v-menu="options" style="height: 300px; background-color: #82acff"></div>
</template>

<script>
export default {
  data () {
    return {
      options: [
        {
          type: 'li', // type为li是普通按钮
          text: '复制(C)', // 按钮的名称
          callback: () => alert('点击了复制') // 回调函数
        }, {
          type: 'li',
          text: '粘贴(V)',
          disabled: true, // 不可点击状态, 回调函数自然无法触发
          callback: () => alert('点击了粘贴')
        }, {
          type: 'hr' // 分割线, 无需其他参数
        }, {
          type: 'ul', // type为ul是二级菜单
          text: '新建(W)',
          children: [ // children里面配置二级菜单列表, 不支持三级菜单
            {
              type: 'li',
              text: '文件夹(F)',
              callback: () => alert('新建了文件夹')
            }, {
              type: 'li',
              text: '快捷方式(S)',
              callback: () => alert('新建了快捷方式')
            }, {
              type: 'hr'
            }, {
              type: 'li',
              text: '文本文档'
            }, {
              type: 'li',
              text: 'Work 文档'
            }, {
              type: 'li',
              text: 'Excel 表格'
            }, {
              type: 'li',
              text: 'WinRAR 压缩文件'
            }
          ]
        }, {
          type: 'hr'
        }, {
          type: 'li',
          text: '属性(R)',
          callback: () => alert('点击了属性')
        }
      ]
    }
  }
}
</script>

贡献者

需求计划

• 📆 进行中

  • [ ] 搭建官网文档详细描述插件如何引入和使用
  • [ ] 增加初始化高级配置, 可以设置一些全局的选项, 以及菜单创建的生命周期
  • [ ] 增加icon选项, 可以使用一些内置图标, 图片待定

• 💡 待认领

  • [ ] 🛠 在mac系统下, 第二次点击控制台时 blur 事件没有触发
  • [ ] 🥉 增加 win7 / win8 浏览器菜单主题样式
  • [ ] 🥉 自适应系统的主题色 (mac的暗黑模式)
  • [ ] 🥈 浏览器放大之后, 看看能否保持跟系统菜单同样的大小
  • [ ] 🥇 看看能否对外暴露一个作用域插槽或者是render函数, 来渲染jsx?
  • [ ] 🥇 看看react里是否可以像vue一样通过自定义指令的方式来使用插件, 最好统一一下这俩框架的用法
  • [ ] 🥇 后续也可以继续优化一下三级菜单的方向

历时更新记录

• 🎯 v2.0.0

  • [x] ~当前组件增加对vue3的支持~
  • [x] ~把css样式和js逻辑打包到一个umd包里面, 以便于script标签引入~

• 🎯 v2.0.1

  • [x] ~点击非窗口区域时, 看看能不能监听到然后关闭菜单~
  • [x] ~尝试支持Vue.use(rightMenu, async () => [])异步返回~

• 🎯 v2.0.2

  • [x] ~菜单的宽度根据文字长度做到自适应~
  • [x] ~增加不同的主题样式: mac / win10, 看看能不能根据系统自动切换主题~
  • [x] ~修复了安装缺少脚本报错的问题~

• 🎯 v2.0.3

  • [x] ~目前最多支持二级菜单, 后续增加三级菜单 / 多级菜单的逻辑~
  • [x] ~增加class和style选项, 可以给当前标签添加样式~

友情链接

• 🎁 lucky-canvas 一个跨平台、兼容多端的【大转盘 / 九宫格】抽奖插件