vue-quick-menu是用于Vue.js的易于使用且跨平台的径向hamburger导航组件。

安装和下载：

# NPM
$ npm install vue-quick-menu --save

使用：

1.安装并导入组件。

import Vue from 'vue'
import quickMenu from 'vue-quick-menu'

2.注册组件。

export default {
  components: {
    quickMenu
  },
}

3.将径向导航组件添加到模板。

<quick-menu :menu-count=getCount :icon-class=icons :menu-url-list=list :background-color=backgroundColor :color=color :position=position :is-open-new-tab=getIsOpenNewTab @process=print></quick-menu>

export default {
  name: 'demo',
  data () {
    return {
      count:4,
      icons:["fa fa-github","fa fa-comment","fa fa-code","fa fa-envelope"],
      list:[{'isLink':false},{'isLink':true,url:"/doo"},{'isLink':true,url:"/foo"},{'isLink':false}],
      backgroundColor:'#17c4c5',
      color:'#ffffff',
      position:'top-left',
      isOpenNewTab:false
      
    }
  },
  components:{
  'quickMenu':quickMenu
}}

Props：

名称	需要	默认	类型	描述
menuCount	true	4	Number	菜单项目数
menuUrlList	true	–	Array	每个菜单项的链接数组
iconClass	true	–	Array	每个菜单项的图标类的数组
position	false	top-left	top-left,top-right,bottom-left,bottom-right	快速菜单的位置
backgroundColor	false	#009dc7	String	快速菜单的背景色
color	false	#ffffff	String	快速菜单图标的颜色
isOpenNewTab	false	false	Boolean	单击后菜单是否将打开一个新选项卡

---

官网：https://github.com/AshleyLv/vue-quick-menu

演示：https://www.vue365.cn/code_demo.php?id=462

GitHub下载：https://github.com/AshleyLv/vue-quick-menu/archive/master.zip