Vue Quasar NavMenuItem

安装

npm install q-navmenu-item

示例

<template>
  <q-nav-menu :routes="routes" :search-callback="search" />
</template>

<script>
import QNavMenu from 'q-navmenu-item'
export default {
  components: {
    QNavMenu
  },
  data() {
    return {
      routes: [
        {
          path: '/',
          name: 'Level-1',
          meta: {
            title: '一级导航-1',
            caption: '一级导航描述-1',
            icon: 'menu',
            requiresAuth: false,
            separator: true, // 是否显示分割线
            opened: true // 是否展开子级
          },
          children: [
            {
                path: 'level-1-1',
                name: 'Level-1-1',
                meta: {
                    title: '二级导航-1-1',
                    caption: '二级导航描述-1-1',
                    icon: 'menu',
                    requiresAuth: false,
                    separator: true,
                    opened: false
                },
                children: [
                    {
                        path: 'level-1-1-1',
                        name: 'Level-1-1-1',
                        meta: {
                            title: '三级导航-1-1-1',
                            caption: '三级导航描述-1-1-1',
                            icon: 'menu',
                            requiresAuth: false,
                            separator: true
                        }
                    }
                ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    search(str) {
      console.log(str)
    }
  }
}
</script>

参数

| 参数 | 类型 | 默认 | 说明 | | -------------------- | -------- | ----- | ------------------------------------------ | | routes | array | - | 必须，路由 | | vertical | boolean | true | 类型[true-垂直（适用于侧边导航）, false-水平(适用于头部导航)] | | bordered | boolean | true | 展示边框（仅vertical=true时生效） | | active-color | string | '' | 菜单激活时颜色（仅vertical=false时生效） | | active-bg-color | string | '' | 菜单背景颜色（仅vertical=false时生效） | | dense | boolean | false | 紧凑模式 | | expand-icon | string | - | 展开图标（vertical=false时为二级菜单图标） | | expanded-icon | string | - | 展开后图标（vertical=false时为一级菜单图标） | | tab-left-icon | string | - | 导航超出宽度时，向左滚动的图标（仅vertical=false时生效） | | tab-right-icon | string | - | 导航超出宽度时，向右滚动的图标（仅vertical=false时生效） | | tab-class | string | '' | 菜单样式 | | menu-class | string | '' | 菜单样式 | | input-bg-color | string | '' | 搜索框背景 | | input-rounded | boolean | true | 搜索框 rounded | | input-outlined | boolean | true | 搜索框 outlined | | input-dense | boolean | true | 搜索框 dense | | input-class | string | '' | 搜索框 class | | input-style | string | '' | 搜索框样式 | | clear-icon | string | - | 清除按钮图标 | | show-search | boolean | true | 是否显示搜索 | | search-callback | function | - | 搜索回调方法，返回搜索框value值 | | search-icon | string | search | 搜索框图标 | | search-placeholder | string | search | 搜索框 placeholder |

备注

• 当前路由只支持到 3 级，即只能有两层（个） children， 结构参考示例
• 注意：当 children 内只有一个菜单时，将不会显示层级，直接将子菜单显示到上一层级