Breadcrumb: remove visual feedback for non-link items (ElemeFE#10551)

liuzaiwojia · Apr 4, 2018 · 422a8ac · 422a8ac
1 parent 2bc4df7
commit 422a8ac
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/examples/docs/en-US/breadcrumb.md b/examples/docs/en-US/breadcrumb.md
@@ -10,7 +10,7 @@ Displays the location of the current page, making it easier to browser back.
 ```html
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
   <el-breadcrumb-item>promotion list</el-breadcrumb-item>
   <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
 </el-breadcrumb>

diff --git a/examples/docs/es/breadcrumb.md b/examples/docs/es/breadcrumb.md
@@ -10,7 +10,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
 ```html
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
   <el-breadcrumb-item>promotion list</el-breadcrumb-item>
   <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
 </el-breadcrumb>

diff --git a/examples/docs/zh-CN/breadcrumb.md b/examples/docs/zh-CN/breadcrumb.md
@@ -10,7 +10,7 @@
 ```html
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
   <el-breadcrumb-item>活动列表</el-breadcrumb-item>
   <el-breadcrumb-item>活动详情</el-breadcrumb-item>
 </el-breadcrumb>

diff --git a/packages/breadcrumb/src/breadcrumb-item.vue b/packages/breadcrumb/src/breadcrumb-item.vue
@@ -1,6 +1,9 @@
 <template>
   <span class="el-breadcrumb__item">
-    <span class="el-breadcrumb__inner" ref="link" role="link">
+    <span
+      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
+      ref="link"
+      role="link">
       <slot></slot>
     </span>
     <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>

diff --git a/packages/theme-chalk/src/breadcrumb.scss b/packages/theme-chalk/src/breadcrumb.scss
@@ -22,8 +22,11 @@
     float: left;
 
     @include e(inner) {
-      &, & a {
+      color: $--color-text-regular;
+
+      &.is-link, & a {
         font-weight: bold;
+        text-decoration: none;
         transition: $--color-transition-base;
         color: $--color-text-primary;