add breadcrumb router props

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Pagination 修复输入后再点击切换，输入框的值不更新
 - Step: 修复自定义 icon 的样式
 - 修复 Tree 组件 checkbox 点击失效的问题
+- Breadcrumb 增加路由跳转的功能
 
 ### 1.0.0-rc.6
 

examples/docs/zh-cn/breadcrumb.md

@@ -9,7 +9,7 @@
 
 ```html
 <el-breadcrumb separator="/">
-  <el-breadcrumb-item>首页</el-breadcrumb-item>
+  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>活动管理</el-breadcrumb-item>
   <el-breadcrumb-item>活动列表</el-breadcrumb-item>
   <el-breadcrumb-item>活动详情</el-breadcrumb-item>
@@ -17,7 +17,13 @@
 ```
 :::
 
-### Attributes
+### Breadcrumb Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | 分隔符 | string | — | 斜杠'/' |
+
+### Breadcrumb Item Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| to        | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — |
+| replace   | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false |

packages/breadcrumb/src/breadcrumb-item.vue

@@ -1,11 +1,15 @@
 <template>
   <span class="el-breadcrumb__item">
-    <span class="el-breadcrumb__item__text"><slot></slot></span><span class="el-breadcrumb__separator">{{separator}}</span>
+    <span class="el-breadcrumb__item__inner" ref="link"><slot></slot></span><span class="el-breadcrumb__separator">{{separator}}</span>
   </span>
 </template>
 <script>
   export default {
     name: 'ElBreadcrumbItem',
+    props: {
+      to: {},
+      replace: Boolean
+    },
     data() {
       return {
         separator: ''
@@ -13,6 +17,15 @@
     },
     mounted() {
       this.separator = this.$parent.separator;
+      var self = this;
+      if (this.to) {
+        let link = this.$refs.link;
+        link.addEventListener('click', _ => {
+          let to = this.to;
+          self.replace ? self.$router.replace(to)
+                       : self.$router.push(to);
+        });
+      }
     }
   };
 </script>

packages/theme-default/src/breadcrumb.css

@@ -5,7 +5,6 @@
 
   @b breadcrumb {
     font-size:13px;
-    color:#475669;
     @utils-clearfix;
 
     @e separator {
@@ -15,9 +14,10 @@
     @e item {
       float: left;
 
-      &:not(:last-child) {
-        .el-breadcrumb__item__text {
+      @e inner {
+        &, & a {
           transition: color .15s linear;
+          color:#475669;
 
           &:hover {
             color: var(--color-primary);
@@ -27,7 +27,13 @@
       }
 
       &:last-child {
-        color: #99a9bf;
+        .el-breadcrumb__item__inner,
+        .el-breadcrumb__item__inner a {
+          &, &:hover {
+            color: #99a9bf;
+            cursor: text;
+          }
+        }
 
         .el-breadcrumb__separator {
           display: none;