Sidenav 边栏菜单

示例

普通

结合 Vue Router 使用边栏菜单。

  • Basic
  • Groups
  • Form Controls
在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-sidenav :items="items"/>
</article>
</template>

<script>
import { Sidenav } from 'veui'

export default {
  name: 'veui-sidenav-demo',
  components: {
    'veui-sidenav': Sidenav
  },
  data () {
    return {
      items: [
        {
          label: 'Basic',
          children: [
            {
              label: 'Button',
              to: '/components/button'
            },
            {
              label: 'Dropdown',
              to: '/components/dropdown'
            }
          ]
        },
        {
          label: 'Groups',
          children: [
            {
              label: 'RadioGroup',
              to: '/components/radio-group'
            },
            {
              label: 'CheckboxGroup',
              to: '/components/checkbox-group'
            }
          ]
        },
        {
          label: 'Form Controls',
          children: [
            {
              label: 'Text Fields',
              children: [
                {
                  label: 'Input',
                  to: '/components/input'
                },
                {
                  label: 'Textarea',
                  to: '/components/textarea'
                }
              ]
            },
            {
              label: 'Pickers',
              children: [
                {
                  label: 'Select',
                  to: '/components/select'
                },
                {
                  label: 'DatePicker',
                  to: '/components/date-picker'
                },
                {
                  label: 'TimePicker',
                  to: '/components/time-picker'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

可折叠

配合 Sidebarcollapsible 属性可以控制菜单的展开/收起。

/demo/sidenav/collaspible.vue
在 GitHub 上编辑此示例编辑
<template>
<veui-layout>
  <veui-header>Header</veui-header>
  <veui-layout>
    <veui-sidebar collapsible>
      <veui-sidenav
        :items="items"
        collapsible
      />
    </veui-sidebar>
    <veui-layout>
      <veui-content>Content</veui-content>
      <veui-footer style="background: #ccc;">
        Footer(背景仅为演示)
      </veui-footer>
    </veui-layout>
  </veui-layout>
</veui-layout>
</template>

<script>
import { Layout, Header, Footer, Sidebar, Content, Sidenav } from 'veui'
import 'veui-theme-dls-icons/calendar'
import 'veui-theme-dls-icons/bullseye'
import 'veui-theme-dls-icons/clock'
import 'veui-theme-dls-icons/eye'

export default {
  name: 'veui-sidenav-demo',
  components: {
    'veui-layout': Layout,
    'veui-header': Header,
    'veui-footer': Footer,
    'veui-sidebar': Sidebar,
    'veui-content': Content,
    'veui-sidenav': Sidenav
  },
  data () {
    let items = [
      {
        label: 'Group One',
        name: 'group-one',
        icon: 'calendar',
        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',
        icon: 'bullseye',
        children: [
          {
            label: 'Disabled',
            name: 'Disabled',
            disabled: true,
            children: [
              {
                label: 'Link',
                name: 'Link',
                to: '/components/link'
              }
            ]
          }
        ]
      },
      {
        label: 'Navigation Three',
        name: 'nav-three',
        icon: 'eye',
        disabled: true
      },
      {
        label: 'Navigation Four',
        name: 'nav-four',
        icon: 'clock',
        children: [
          {
            label: 'Progress',
            to: '/components/progress'
          }
        ]
      }
    ]
    return {
      items
    }
  }
}
</script>

<style lang="less" scoped>
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

自定义插槽

  • Group One
  • Navigation Three
  • Navigation Four
在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-sidenav
    :items="items"
    collapsible
  >
    <template #icon>
      <veui-icon name="calendar"/>
    </template>
  </veui-sidenav>
</article>
</template>

<script>
import { Sidenav, Icon } from 'veui'
import 'veui-theme-dls-icons/calendar'

export default {
  name: 'veui-sidenav-demo',
  components: {
    'veui-sidenav': Sidenav,
    'veui-icon': Icon
  },
  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>

API

属性

名称类型默认值描述
uistring=-

预设样式。

描述
s小尺寸样式。
m中尺寸样式。
itemsArray<Object>=[]

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

名称类型描述
labelstring节点的文字描述。
tostring | Object节点的导航目的地。参考 Link 组件的 to 属性。
namestring节点的唯一标识,nameto 二者至少有一个存在。
disabledboolean=节点是否被禁用。
iconstring|{render: function}首层节点使用的图标。
childrenArray<Object>=节点的子节点数组,数组项类型同 items 数组项。
activestring-

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

matchesfunction(Object, string): boolean-

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

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

collapsedbooleanfalse

.sync

当前折叠状态。

expandedArray<string>=[]

.sync

指定当前展开的节点,是一个对应于 items 中节点数据中 name 属性或路由路径的数组。

插槽

名称描述
before前置插槽。
item

每个节点的渲染插槽。

默认内容:渲染了 icon 插槽和 item-label 插槽。

名称类型描述
labelstring图标名称。
tostring | Object节点的导航目的地。参考 Link 组件的 to 属性。
namestring节点的唯一标识,nameto 二者至少有一个存在。
disabledboolean=节点是否被禁用。
iconstring首层节点使用的图标。
childrenArray<Object>=节点的子节点数组,数组项类型同 items 数组项。
icon

节点前的图标插槽。

默认内容:渲染 item.icon 指定的图标。

名称类型描述
iconstring|{render: function}图标名称。
item-label

节点的文字标签插槽。

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

作用域参数参考 item 插槽。

after后置插槽。

事件

名称描述
activate用户点击有 to 的节点触发,参数是激活节点的整个 item 数据。
click用户点击节点时触发,参数是激活节点整个 item 数据。
在 GitHub 上编辑此页面编辑