Breadcrumb 面包屑

示例

风格

可选的风格 ui 属性值：strong。

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-breadcrumb>
      <veui-breadcrumb-item to="./breadcrumb">
        Home
      </veui-breadcrumb-item>
      <veui-breadcrumb-item to="./breadcrumb">
        Components
      </veui-breadcrumb-item>
      <veui-breadcrumb-item type="text">
        Breadcrumb
      </veui-breadcrumb-item>
    </veui-breadcrumb>
  </section>
  <section>
    <veui-breadcrumb ui="strong">
      <veui-breadcrumb-item to="./breadcrumb">
        Home
      </veui-breadcrumb-item>
      <veui-breadcrumb-item to="./breadcrumb">
        Components
      </veui-breadcrumb-item>
      <veui-breadcrumb-item type="text">
        Breadcrumb
      </veui-breadcrumb-item>
    </veui-breadcrumb>
  </section>
</article>
</template>

<script>
import { Breadcrumb, BreadcrumbItem } from 'veui'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb,
    'veui-breadcrumb-item': BreadcrumbItem
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

尺寸

可选的尺寸 ui 属性值：s / m。

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-breadcrumb ui="m">
      <veui-breadcrumb-item to="./breadcrumb">
        Home
      </veui-breadcrumb-item>
      <veui-breadcrumb-item to="./breadcrumb">
        Components
      </veui-breadcrumb-item>
      <veui-breadcrumb-item type="text">
        Breadcrumb
      </veui-breadcrumb-item>
    </veui-breadcrumb>
  </section>
  <section>
    <veui-breadcrumb ui="s">
      <veui-breadcrumb-item to="./breadcrumb">
        Home
      </veui-breadcrumb-item>
      <veui-breadcrumb-item to="./breadcrumb">
        Components
      </veui-breadcrumb-item>
      <veui-breadcrumb-item type="text">
        Breadcrumb
      </veui-breadcrumb-item>
    </veui-breadcrumb>
  </section>
</article>
</template>

<script>
import { Breadcrumb, BreadcrumbItem } from 'veui'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb,
    'veui-breadcrumb-item': BreadcrumbItem
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

内联模式

直接内联 BreadcrumbItem 使用。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-breadcrumb>
    <veui-breadcrumb-item to="./breadcrumb">
      Home
    </veui-breadcrumb-item>
    <veui-breadcrumb-item to="./breadcrumb">
      Components
    </veui-breadcrumb-item>
    <veui-breadcrumb-item type="text">
      Breadcrumb
    </veui-breadcrumb-item>
  </veui-breadcrumb>
</article>
</template>

<script>
import { Breadcrumb, BreadcrumbItem } from 'veui'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb,
    'veui-breadcrumb-item': BreadcrumbItem
  }
}
</script>

使用数据源

也可以传入数据源。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-breadcrumb :routes="routes"/>
</article>
</template>

<script>
import { Breadcrumb } from 'veui'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb
  },
  data () {
    return {
      routes: [
        {
          to: './breadcrumb',
          label: 'Home'
        },
        {
          to: './breadcrumb',
          label: 'Components'
        },
        {
          label: 'Breadcrumb'
        }
      ]
    }
  }
}
</script>

自定义分隔符

可以使用插槽自定义分隔符。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-breadcrumb :routes="routes">
    <template #separator>
      -
    </template>
  </veui-breadcrumb>
  <veui-breadcrumb :routes="routes">
    <template #separator>
      <veui-icon name="arrow-right"/>
    </template>
  </veui-breadcrumb>
</article>
</template>

<script>
import { Breadcrumb, Icon } from 'veui'
import 'veui-theme-dls-icons/arrow-right'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb,
    'veui-icon': Icon
  },
  data () {
    return {
      routes: [
        {
          to: './breadcrumb',
          label: 'Home'
        },
        {
          to: './breadcrumb',
          label: 'Components'
        },
        {
          label: 'Breadcrumb'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.veui-breadcrumb:first-child {
  margin-bottom: 20px;
}
</style>

事件监听

监听 redirect 事件后处理而非直接路由跳转。

Not redirected yet.
在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-breadcrumb
    :routes="routes"
    @redirect="handleRedirect"
  />
  <div class="console">
    <template v-if="currentRoute">
      Redirected to <b>{{ currentRoute.label }}</b>.
    </template>
    <template v-else>
      Not redirected yet.
    </template>
  </div>
</article>
</template>

<script>
import { Breadcrumb } from 'veui'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb
  },
  data () {
    return {
      currentRoute: null,
      routes: [
        {
          label: 'Home',
          type: 'link'
        },
        {
          label: 'Components',
          type: 'link'
        },
        {
          label: 'Breadcrumb'
        }
      ]
    }
  },
  methods: {
    handleRedirect (event, route) {
      this.currentRoute = route
    }
  }
}
</script>

<style lang="less" scoped>
.veui-breadcrumb:first-child {
  margin-bottom: 20px;
}
</style>

API

属性

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

预设样式。

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

面包屑配置，项目类型为 {label: string, type: string, to: string | Object=, native: boolean=}，除 label 外字段详情可参考 BreadcrumbItem 组件的属性。

插槽

名称描述
default支持内联模式，直接传入 BreadcrumbItem 组件列表。填充后 routes 属性将被忽略。
item

用于为每个项目自定义内容。默认内容为 routes 项目的 label 或 BreadcrumbItem 组件的默认插槽。

名称类型描述
routeObjectroutes 中的项目。自定义字段亦会绑定到作用域对象中。
separator

面包屑条目之间的分隔符。默认显示全局配置的分隔图标。

事件

名称描述
redirect

点击 type 为 link 的项目时将触发该事件，回调参数为 (event, route, index)。

名称类型描述
eventEvent事件对象。
routeObject面包屑条目对象。
indexnumber当前点击条目的索引。
在 GitHub 上编辑此页编辑