From c06e99d09f9f36cdd40c198f1e5b0daa762722ee Mon Sep 17 00:00:00 2001
From: huixisheng <huixisheng@huixishengdeMacBook-Pro.local>
Date: Fri, 3 Mar 2017 21:05:30 +0800
Subject: [PATCH] Support Breadcrumb

---
 README.md                                     |  4 ++--
 src/components/breadcrumb/breadcrumb-item.vue | 19 +++++++++++++------
 src/components/breadcrumb/breadcrumb.vue      |  2 +-
 src/index.js                                  |  6 +++---
 test/app.vue                                  |  1 +
 test/main.js                                  |  4 ++++
 test/routers/breadcrumb.vue                   | 35 +++++++++++++++++++++++++++++++++++
 7 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 test/routers/breadcrumb.vue

diff --git a/README.md b/README.md
index 6f88487..dd61e87 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,7 @@
 - [x] Tabs
 - [x] Dropdown
 - [ ] Page
-- [ ] Breadcrumb
+- [x] Breadcrumb
 - [x] Steps
 - [ ] LoadingBar
 - [x] Circle
@@ -76,7 +76,7 @@
 
 ## Install
 
-### Install vue-webpack project in the first place 
+### Install vue-webpack project in the first place
 
 Use [iview-project](https://github.com/iview/iview-project)(Recommended) Or [vue-cli](https://github.com/vuejs/vue-cli)
 
diff --git a/src/components/breadcrumb/breadcrumb-item.vue b/src/components/breadcrumb/breadcrumb-item.vue
index 427d265..5052883 100644
--- a/src/components/breadcrumb/breadcrumb-item.vue
+++ b/src/components/breadcrumb/breadcrumb-item.vue
@@ -6,8 +6,10 @@
         <span v-else :class="linkClasses">
             <slot></slot>
         </span>
-        <span :class="separatorClasses">
-            <slot name="separator">{{{ separator }}}</slot>
+        <span :class="separatorClasses" v-html="separator" v-if="!showSeparator">
+        </span>
+        <span :class="separatorClasses" v-else>
+            <slot name="separator"></slot>
         </span>
     </span>
 </template>
@@ -18,12 +20,17 @@
         props: {
             href: {
                 type: String
-            },
-            separator: {
-                type: String,
-                default: '/'
             }
         },
+        data () {
+            return {
+                separator: '',
+                showSeparator: false
+            }
+        },
+        mounted () {
+            this.showSeparator = this.$slots.separator !== undefined;
+        },
         computed: {
             linkClasses () {
                 return `${prefixCls}-link`;
diff --git a/src/components/breadcrumb/breadcrumb.vue b/src/components/breadcrumb/breadcrumb.vue
index 81b89a6..8f4a7d9 100644
--- a/src/components/breadcrumb/breadcrumb.vue
+++ b/src/components/breadcrumb/breadcrumb.vue
@@ -18,7 +18,7 @@
                 return `${prefixCls}`;
             }
         },
-        compiled () {
+        mounted () {
             this.updateChildren();
         },
         methods: {
diff --git a/src/index.js b/src/index.js
index dbc9949..5aa84e8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ import Affix from './components/affix';
 import Alert from './components/alert';
 // import BackTop from './components/back-top';
 import Badge from './components/badge';
-// import Breadcrumb from './components/breadcrumb';
+import Breadcrumb from './components/breadcrumb';
 import Button from './components/button';
 import Card from './components/card';
 import Carousel from './components/carousel';
@@ -51,8 +51,8 @@ const iview = {
     Alert,
     // BackTop,
     Badge,
-    // Breadcrumb,
-    // BreadcrumbItem: Breadcrumb.Item,
+    Breadcrumb,
+    BreadcrumbItem: Breadcrumb.Item,
     // iButton: Button,
     Button,
     ButtonGroup: Button.Group,
diff --git a/test/app.vue b/test/app.vue
index 4278a1f..283fa18 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -39,6 +39,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/poptip">Poptip</router-link></li>
                 <li><router-link to="/slider">Slider</router-link></li>
                 <li><router-link to="/dropdown">Dropdown</router-link></li>
+                <li><router-link to="/breadcrumb">Breadcrumb</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 3e7625b..edcc532 100644
--- a/test/main.js
+++ b/test/main.js
@@ -120,6 +120,10 @@ const router = new VueRouter({
         {
             path: '/dropdown',
             component: require('./routers/dropdown.vue')
+        },
+        {
+            path: '/breadcrumb',
+            component: require('./routers/breadcrumb.vue')
         }
     ]
 });
diff --git a/test/routers/breadcrumb.vue b/test/routers/breadcrumb.vue
new file mode 100644
index 0000000..057bce5
--- /dev/null
+++ b/test/routers/breadcrumb.vue
@@ -0,0 +1,35 @@
+<style>
+    .demo-breadcrumb-separator{
+        color: #ff5500;
+        padding: 0 5px;
+    }
+</style>
+<template>
+<div>
+    <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
+        <Breadcrumb-item href="/">Home4</Breadcrumb-item>
+        <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
+        <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
+    </Breadcrumb>
+    <Breadcrumb separator="">
+        <Breadcrumb-item href="/">
+            <template>Home</template>
+            <template slot="separator">
+                <b style="color: #ff5500;">-></b>
+            </template>
+        </Breadcrumb-item>
+        <Breadcrumb-item href="/components/breadcrumb">
+            <template>Breadcrumb</template>
+            <template slot="separator">
+                <b style="color: #ff5500;">-></b>
+            </template>
+        </Breadcrumb-item>
+        <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
+    </Breadcrumb>
+</div>
+</template>
+<script>
+    export default {
+
+    }
+</script>
\ No newline at end of file
--
libgit2 0.21.4