Breadcrumb 面包屑

Breadcrumb 组件可以内联 BreadcrumbItem 组件使用。

示例

使用内联 BreadcrumbItem

直接内联 BreadcrumbItem 使用。

<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>

使用数据源

也可以传入数据源。

<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>

自定义分隔符

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

<template>
<article>
  <veui-breadcrumb :routes="routes">
    <template slot="separator">
      -
    </template>
  </veui-breadcrumb>
  <veui-breadcrumb :routes="routes">
    <template slot="separator">
      <veui-icon name="arrow-right"/>
    </template>
  </veui-breadcrumb>
</article>
</template>

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

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

事件监听

监听跳转事件。

Not redirected yet. 
<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></template>
  </div>
</article>
</template>

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

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>

API

属性

名称类型默认值描述
routesArray<Object>[]

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

默认情况下，最后一项始终会显示成普通文本样式。

插槽

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

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

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

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

当使用 Vue.js 2.5.17 及以下版本时，必须绑定 slot-scope 使用。

事件

名称描述
redirect

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

名称类型描述
eventEvent事件对象。
routeObject面包屑条目对象。
indexnumber当前点击条目的索引。