breadcrumb

components/badge/demo/index.vue

@@ -109,12 +109,12 @@ export default {
       this.count = count
     },
     changePlusValue () {
-      setInterval(() => {
-        const count = this.count + 1
-        this.count = count
-      }, 300)
+      // setInterval(() => {
       //   const count = this.count + 1
       //   this.count = count
+      // }, 300)
+      const count = this.count + 1
+      this.count = count
     },
     changeShow () {
       this.isShow = !this.isShow

components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,25 @@
+<script>
+  import PropTypes from '../_util/vue-types'
+
+  export default {
+    name: 'Breadcrumb',
+    props: {
+      prefixCls: PropTypes.string.def('ant-breadcrumb'),
+      separator: PropTypes.string.def('/'),
+      styles: PropTypes.Object,
+    },
+    provide () {
+      return {
+        breadCrumbParent: this,
+      }
+    },
+    render () {
+      const { prefixCls, styles } = this
+      return (
+        <div class={prefixCls} style={styles}>
+          {this.$slots.default}
+        </div>
+      )
+    },
+  }
+</script>

components/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,33 @@
+<script>
+  import PropTypes from '../_util/vue-types'
+
+  export default {
+    name: 'BreadcrumbItem',
+    inject: ['breadCrumbParent'],
+    props: {
+      prefixCls: PropTypes.string.def('ant-breadcrumb'),
+      href: PropTypes.string,
+    },
+    render () {
+      const { prefixCls, href, ...restProps } = this
+      const { breadCrumbParent = {}} = this
+      const { separator = '/' } = breadCrumbParent
+      const solt = this.$slots.default
+      let link
+      if (href !== undefined) {
+        link = <a class={`${prefixCls}-link`} {...restProps}>{solt}</a>
+      } else {
+        link = <span class={`${prefixCls}-link`} {...restProps}>{solt}</span>
+      }
+      if (solt) {
+        return (
+          <span>
+            {link}
+            <span class={`${prefixCls}-separator`}>{separator}</span>
+          </span>
+        )
+      }
+      return null
+    },
+  }
+</script>

components/breadcrumb/demo/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    基本用法
+    <Breadcrumb>
+      <BreadcrumbItem>Home</BreadcrumbItem>
+      <BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
+      <BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
+      <BreadcrumbItem>An Application</BreadcrumbItem>
+    </Breadcrumb>
+    <br>
+    带有图标
+    <Breadcrumb>
+      <BreadcrumbItem href="">
+        <Icon type="home" />
+      </BreadcrumbItem>
+      <BreadcrumbItem href="">
+        <Icon type="user" />
+        <span>Application List</span>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        Application
+      </BreadcrumbItem>
+    </Breadcrumb>
+    <br>
+    自定义分隔符
+    <Breadcrumb separator=">">
+      <BreadcrumbItem>Home</BreadcrumbItem>
+      <BreadcrumbItem href="">Application Center</BreadcrumbItem>
+      <BreadcrumbItem href="">Application List</BreadcrumbItem>
+      <BreadcrumbItem>An Application</BreadcrumbItem>
+    </Breadcrumb>
+  </div>
+</template>
+<script>
+import '../style'
+import { Icon, Breadcrumb } from 'antd/index'
+export default {
+  data () {
+    return {
+    }
+  },
+  methods: {
+  },
+  components: {
+    Icon,
+    Breadcrumb,
+    BreadcrumbItem: Breadcrumb.Item,
+  },
+}
+</script>

components/breadcrumb/index.js

@@ -0,0 +1,5 @@
+import Breadcrumb from './Breadcrumb'
+import BreadcrumbItem from './BreadcrumbItem'
+
+Breadcrumb.Item = BreadcrumbItem
+export default Breadcrumb

components/breadcrumb/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'

components/breadcrumb/style/index.less

@@ -0,0 +1,40 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";
+
+.@{breadcrumb-prefix-cls} {
+  .reset-component;
+  color: @text-color-secondary;
+
+  .@{iconfont-css-prefix} {
+    font-size: @font-size-sm;
+  }
+
+  a {
+    color: @text-color-secondary;
+    transition: color .3s;
+    &:hover {
+      color: @primary-5;
+    }
+  }
+
+  & > span:last-child {
+    color: @text-color;
+  }
+
+  & > span:last-child &-separator {
+    display: none;
+  }
+
+  &-separator {
+    margin: 0 @padding-xs;
+    color: @text-color-secondary;
+  }
+
+  &-link {
+    > .@{iconfont-css-prefix} + span {
+      margin-left: 4px;
+    }
+  }
+}

components/index.js

@@ -27,3 +27,5 @@ export { default as Badge } from './badge'
 export { default as Tabs } from './tabs'
 
 export { default as Input } from './input'
+
+export { default as Breadcrumb } from './breadcrumb'

components/style/mixins/index.less

@@ -6,3 +6,4 @@
 @import "clearfix";
 @import "iconfont";
 @import "motion";
+@import "reset";

components/style/mixins/reset.less

@@ -0,0 +1,12 @@
+@import '../themes/default';
+
+.reset-component() {
+  font-family: @font-family;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @text-color;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

components/style/themes/default.less

@@ -44,10 +44,21 @@
 @text-color-secondary-dark: fade(#fff, 67%);
 @font-size-base         : 12px;
 @font-size-lg           : @font-size-base + 2px;
+@font-size-sm           : 12px;
 @line-height-base       : 1.5;
 @border-radius-base     : 4px;
 @border-radius-sm       : 2px;
 
+// vertical paddings
+@padding-lg    : 24px; // containers
+@padding-md    : 16px; // small containers and buttons
+@padding-sm    : 12px; // Form controls and items
+@padding-xs    : 8px;  // small items
+
+// vertical padding for all form controls
+@control-padding-horizontal: @padding-sm;
+@control-padding-horizontal-sm: @padding-xs;
+
 // The background colors for active and hover states for things like
 // list items or table cells.
 @item-active-bg         : @primary-1;

contributors.md

@@ -39,11 +39,11 @@ Tree
 TreeSelect
 
 ##王
-Rate
-Pagination
-Avatar
-Badge
-Breadcrumb
+Rate  |  done
+Pagination  |  done|select完成后补全
+Avatar  |  done
+Badge  |  done
+Breadcrumb |  done
 Card
 Collapse
 LocaleProvider

package.json

@@ -77,6 +77,7 @@
   "dependencies": {
     "add-dom-event-listener": "^1.0.2",
     "css-animation": "^1.4.1",
+    "dom-align": "^1.6.7",
     "dom-scroll-into-view": "^1.2.1",
     "eslint-plugin-vue": "^3.13.0",
     "lodash.clonedeep": "^4.5.0",