vue径向hamburger导航组件– vue-quick-menu

vue径向hamburger导航组件– vue-quick-menu
插件名称 vue-quick-menu
发布时间 2020年5月6日
插件作者 AshleyLv

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 单击后菜单是否将打开一个新选项卡