Nav 导航菜单

示例

尺寸

可供选用的尺寸 ui 属性值：m。

Group One
Button
Navigation Three
Navigation Four

<template>
<article>
  <section>
    <veui-nav
      ui="m"
      :items="items"
    />
  </section>
</article>
</template>

<script>
import { Nav } from 'veui'

export default {
  name: 'veui-nav-demo',
  components: {
    'veui-nav': Nav
  },
  data () {
    let items = [
      {
        label: 'Group One',
        name: 'group-one',
        children: [
          {
            label: 'Sub One',
            name: 'sub-one',
            children: [
              {
                label: 'Input',
                to: '/components/input'
              }
            ]
          },
          {
            label: 'Loading',
            name: 'Loading',
            to: '/components/loading',
            children: [
              {
                label: 'Switch',
                to: '/components/switch'
              }
            ]
          }
        ]
      },
      {
        label: 'Button',
        name: 'Button',
        to: '/components/button',
        children: [
          {
            label: 'Disabled',
            name: 'Disabled',
            disabled: true,
            children: [
              {
                label: 'Link',
                name: 'Link',
                to: '/components/link'
              }
            ]
          }
        ]
      },
      {
        label: 'Navigation Three',
        name: 'nav-three',
        disabled: true
      },
      {
        label: 'Navigation Four',
        name: 'nav-four',
        children: [
          {
            label: 'Progress',
            to: '/components/progress'
          }
        ]
      }
    ]
    return {
      items
    }
  }
}
</script>

大卡样式

设置首层数据项属性 position 为 card 可使该数据项下拉展示成大卡样式。

Group One
Button
Navigation Three
Navigation Four

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-nav :items="items"/>
  </section>
</article>
</template>

<script>
import { Nav } from 'veui'

export default {
  name: 'veui-nav-demo',
  components: {
    'veui-nav': Nav
  },
  data () {
    let items = [
      {
        label: 'Group One',
        name: 'group-one',
        position: 'card',
        children: [
          {
            label: 'Sub One',
            name: 'sub-one',
            children: [
              {
                label: 'Input',
                to: '/components/input'
              }
            ]
          },
          {
            label: 'Loading',
            name: 'Loading',
            to: '/components/loading',
            children: [
              {
                label: 'Switch',
                to: '/components/switch'
              }
            ]
          }
        ]
      },
      {
        label: 'Button',
        name: 'Button',
        to: '/components/button',
        children: [
          {
            label: 'Disabled',
            name: 'Disabled',
            disabled: true,
            children: [
              {
                label: 'Link',
                name: 'Link',
                to: '/components/link'
              }
            ]
          }
        ]
      },
      {
        label: 'Navigation Three',
        name: 'nav-three',
        disabled: true
      },
      {
        label: 'Navigation Four',
        name: 'nav-four',
        children: [
          {
            label: 'Progress',
            to: '/components/progress'
          }
        ]
      }
    ]
    return {
      items
    }
  }
}
</script>

自定义插槽

Group One
Button
Navigation Three
Navigation Four

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-nav
      :items="items"
    >
      <template #item-label="{ label }">
        <i>{{ label }}</i>
      </template>
    </veui-nav>
  </section>
</article>
</template>

<script>
import { Nav } from 'veui'

export default {
  name: 'veui-nav-demo',
  components: {
    'veui-nav': Nav
  },
  data () {
    let items = [
      {
        label: 'Group One',
        name: 'group-one',
        children: [
          {
            label: 'Sub One',
            name: 'sub-one',
            children: [
              {
                label: 'Input',
                to: '/components/input'
              }
            ]
          },
          {
            label: 'Loading',
            name: 'Loading',
            to: '/components/loading',
            children: [
              {
                label: 'Switch',
                to: '/switch'
              }
            ]
          }
        ]
      },
      {
        label: 'Button',
        name: 'Button',
        to: '/components/button',
        children: [
          {
            label: 'Disabled',
            name: 'Disabled',
            disabled: true,
            children: [
              {
                label: 'Link',
                name: 'Link',
                to: '/link'
              }
            ]
          }
        ]
      },
      {
        label: 'Navigation Three',
        name: 'nav-three',
        disabled: true
      },
      {
        label: 'Navigation Four',
        name: 'nav-four',
        children: [
          {
            label: 'Progress',
            to: '/components/progress'
          }
        ]
      }
    ]
    return {
      items
    }
  }
}
</script>

自适应宽度

自动根据实际渲染宽度来决定是否将多余的导航项目折叠起来。

Group One
Button
Navigation Three
Navigation Four

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-nav
      class="more-nav-items"
      :items="items"
    />
  </section>
</article>
</template>

<script>
import { Nav } from 'veui'

export default {
  name: 'veui-nav-demo',
  components: {
    'veui-nav': Nav
  },
  data () {
    let items = [
      {
        label: 'Group One',
        name: 'group-one',
        children: [
          {
            label: 'Sub One',
            name: 'sub-one',
            children: [
              {
                label: 'Input',
                to: '/components/input'
              }
            ]
          },
          {
            label: 'Loading',
            name: 'Loading',
            to: '/components/loading',
            children: [
              {
                label: 'Switch',
                to: '/components/switch'
              }
            ]
          }
        ]
      },
      {
        label: 'Button',
        name: 'Button',
        to: '/components/button',
        children: [
          {
            label: 'Disabled',
            name: 'Disabled',
            disabled: true,
            children: [
              {
                label: 'Link',
                name: 'Link',
                to: '/components/link'
              }
            ]
          }
        ]
      },
      {
        label: 'Navigation Three',
        name: 'nav-three',
        disabled: true
      },
      {
        label: 'Navigation Four',
        name: 'nav-four',
        children: [
          {
            label: 'Progress',
            to: '/components/progress'
          }
        ]
      }
    ]
    return {
      items
    }
  }
}
</script>

<style lang="less" scoped>
.more-nav-items {
  max-width: 300px;
}
</style>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`m`	中尺寸样式。

items

Array<Object>

[]

数据源数组，每个节点类型为 {label, to, name, icon, disabled, children, ...}。

名称	类型	描述
`label`	`string`	节点的文字描述。
`to`	`string \| Object`	节点的导航目的地。参考 `Link` 组件的 `to` 属性。
`name`	`string`	节点的唯一标识，`name` 和 `to` 二者至少有一个存在。
`disabled`	`boolean`	节点是否被禁用。
`position`	`string`	首层节点的下拉面板样式，设置成 `card` 则展示成大卡样式。
`children`	`Array<Object>`	节点的子节点数组，数组项类型同 `items` 数组项。

active

string

当前激活节点，若该节点定义了 name 则就是该 name 值，否则该值是由 to 生成的路由路径（route.path）。

matches

function(Object, string): boolean

当路由发生切换时，用来从 items 中找到激活的项目。

默认实现：项目路由路径和当前路由的路径相等 (===) 则认为该项目是激活的。

插槽

名称描述

item

每个节点的渲染插槽。

默认内容：渲染了节点的图标和文字描述。

名称	类型	描述
`label`	`string`	节点的文字描述。
`to`	`string \| Object`	节点的导航目的地。参考 `Link` 组件的 `to` 属性。
`name`	`string`	节点的唯一标识，`name` 和 `to` 二者至少有一个存在。
`disabled`	`boolean`	节点是否被禁用。
`children`	`Array<Object>`	节点的子节点数组，数组项类型同 `items` 属性数组项。

item-label

节点的 label 插槽。

默认内容：渲染节点对应的 Link。

插槽参数参考 item 插槽。

事件

名称	描述
`activate`	用户点击有 `to` 的节点触发，参数是激活节点在 `items` 属性中对应的数据项。
`click`	用户点击节点时触发，参数是激活节点在 `items` 属性中对应的数据项。

图标

名称	描述
`expand`	展开。
`more`	更多。

在 GitHub 上编辑此页面编辑