VEUI

VEUI on GitHub
English

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 项目的 labelBreadcrumbItem 组件的默认插槽。

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

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

事件

名称描述
redirect

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

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