Support Breadcrumb

keep slot sepatator

README.md

@@ -53,7 +53,7 @@
 - [x] Tabs
 - [x] Dropdown
 - [ ] Page
-- [ ] Breadcrumb
+- [x] Breadcrumb
 - [x] Steps
 - [ ] LoadingBar
 - [x] Circle

src/components/breadcrumb/breadcrumb-item.vue

@@ -6,8 +6,10 @@
         <span v-else :class="linkClasses">
             <slot></slot>
         </span>
-        <span :class="separatorClasses">
+        <span :class="separatorClasses" v-html="separator" v-if="!showSeparator">
-            <slot name="separator">{{{ separator }}}</slot>
+        </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`;

src/components/breadcrumb/breadcrumb.vue

@@ -18,7 +18,7 @@
                 return `${prefixCls}`;
             }
         },
-        compiled () {
+        mounted () {
             this.updateChildren();
         },
         methods: {

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,
+    Breadcrumb,
-    // BreadcrumbItem: Breadcrumb.Item,
+    BreadcrumbItem: Breadcrumb.Item,
     // iButton: Button,
     Button,
     ButtonGroup: Button.Group,

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>

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')
         }
     ]
 });

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>