Merge pull request ElemeFE#20 from Leopoldthecoder/master

add breadcrumb

examples/app.vue

@@ -123,6 +123,9 @@
           }, {
             text: 'Accordion',
             path: '/accordion'
+          }, {
+            text: 'Breadcrumb',
+            path: '/breadcrumb'
           }]
         }, {
           text: 'Service',

examples/index.js

@@ -62,6 +62,9 @@ router.map({
   },
   '/accordion': {
     component: require('./nav/accordion.vue')
+  },
+  '/breadcrumb': {
+    component: require('./nav/breadcrumb.vue')
   }
 });
 

examples/nav/breadcrumb.vue

@@ -0,0 +1,12 @@
+<template>
+  <d-breadcrumb>
+    <d-breadcrumb-item>首页</d-breadcrumb-item>
+    <d-breadcrumb-item link="/tabs">Tabs</d-breadcrumb-item>
+    <d-breadcrumb-item link="/accordion">Accordion</d-breadcrumb-item>
+    <d-breadcrumb-item link="/breadcrumb">Breadcrumb</d-breadcrumb-item>
+  </d-breadcrumb>
+</template>
+
+<script type="text/ecmascript-6" lang="babel">
+  export default {};
+</script>

src/index.js

@@ -21,6 +21,8 @@ import Accordion from './nav/accordion.vue';
 import AccordionPanel from './nav/accordion-panel.vue';
 import Tab from './nav/tab.vue';
 import Tabs from './nav/tabs.vue';
+import Breadcrumb from './nav/breadcrumb.vue';
+import BreadcrumbItem from './nav/breadcrumb-item.vue';
 
 import Grid from './data/grid.vue';
 import Tree from './data/tree.vue';
@@ -61,6 +63,8 @@ export var Components = {
   AccordionPanel,
   Tab,
   Tabs,
+  Breadcrumb,
+  BreadcrumbItem,
 
   Grid,
   Tree,

src/nav/breadcrumb-item.vue

@@ -0,0 +1,67 @@
+<template>
+  <li class="breadcrumb-item">
+    <a v-link="{ path: link }" class="breadcrumb-anchor" :class="{ 'breadcrumb-link': isLink }"><slot></slot></a>
+    <span class="breadcrumb-slash">/</span>
+  </li>
+</template>
+
+<style>
+  .breadcrumb-item {
+    display: inline;
+  }
+
+  .breadcrumb-item .breadcrumb-anchor {
+    text-decoration: none;
+    color: #666;
+  }
+
+  .breadcrumb-item .breadcrumb-anchor.v-link-active {
+    font-weight: 700;
+    color: #666;
+    cursor: default;
+  }
+
+  .breadcrumb-item .breadcrumb-anchor.v-link-active:hover {
+    color: #666;
+  }
+
+  .breadcrumb-item .breadcrumb-link {
+    color: #0089dc;
+    transition: color .3s;
+  }
+
+  .breadcrumb-item .breadcrumb-link:hover {
+    color: #006fb7;
+  }
+
+  .breadcrumb-item .breadcrumb-slash {
+    margin: 0 5px;
+  }
+
+  .breadcrumb-item:last-child .breadcrumb-slash {
+    display: none;
+  }
+</style>
+
+<script type="text/ecmascript-6" lang="babel">
+  export default {
+    props: {
+      link: {
+        type: String,
+        default: null
+      }
+    },
+
+    data() {
+      return {
+        isLink: false
+      }
+    },
+
+    ready() {
+      if (this.link) {
+        this.isLink = true;
+      }
+    }
+  }
+</script>

src/nav/breadcrumb.vue

@@ -0,0 +1,18 @@
+<template>
+  <ul class="breadcrumb">
+    <slot></slot>
+  </ul>
+</template>
+
+<style>
+  .breadcrumb {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: 14px;
+  }
+</style>
+
+<script type="text/ecmascript-6" lang="babel">
+  export default {}
+</script>