Baidu DLS

返回 DLS

Breadcrumb 面包屑

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

示例

风格

可选的风格 ui 属性值:strong

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

尺寸

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

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

使用内联 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 #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>

事件监听

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

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

API

属性

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

预设样式。

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

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

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

插槽

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

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

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

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

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

事件

名称描述
redirect

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

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