elementui breadcrumb

ElementUI Breadcrumb 组件使用指南

ElementUI 的 Breadcrumb 组件用于显示当前页面的路径，方便用户快速导航。以下是具体用法和常见配置：

基础用法

最简单的面包屑导航只需使用 el-breadcrumb 和 el-breadcrumb-item 组件：

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/components' }">组件</el-breadcrumb-item>
  <el-breadcrumb-item>面包屑</el-breadcrumb-item>
</el-breadcrumb>

分隔符配置

通过 separator 属性可以自定义分隔符：

<el-breadcrumb separator=">">
  <el-breadcrumb-item>首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>

图标分隔符

分隔符也可以是图标：

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item>首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>

动态生成面包屑

结合路由信息动态生成面包屑：

<el-breadcrumb separator="/">
  <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
    <router-link :to="item.path">{{ item.meta.title }}</router-link>
  </el-breadcrumb-item>
</el-breadcrumb>

<script>
export default {
  data() {
    return {
      breadcrumbList: []
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      this.breadcrumbList = this.$route.matched.filter(item => item.meta && item.meta.title)
    }
  }
}
</script>

属性说明

el-breadcrumb 组件支持以下属性：

• separator: 分隔符，默认为 /
• separator-class: 使用图标作为分隔符时指定的类名

el-breadcrumb-item 组件支持以下属性：

• to: 路由跳转对象，同 vue-router 的 to
• replace: 是否使用 replace 进行路由跳转

样式定制

可以通过 CSS 覆盖默认样式：

.el-breadcrumb {
  padding: 15px 0;
  font-size: 14px;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #409EFF;
}

以上是 ElementUI Breadcrumb 组件的主要用法和配置选项，可以根据实际需求进行调整和扩展。