From b26389a034ca506c6f6d545f8c98e4c094a5ff41 Mon Sep 17 00:00:00 2001
From: xiaofengsha <181347204@qq.com>
Date: Thu, 29 Mar 2018 23:10:14 +0800
Subject: [PATCH] =?UTF-8?q?*=20=E5=AF=B9=E7=85=A7AntDesign=EF=BC=8C?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=BA=86Divider=E5=88=86=E5=89=B2=E7=BA=BF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84Vue=E7=89=88=E6=9C=AC=20*=20?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86Divider=E5=88=86=E5=89=B2=E7=BA=BF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=BC=94=E7=A4=BA=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/app.vue                   |   1 +
 examples/main.js                   |   4 +
 examples/routers/divider.vue       |  65 +++++++++++++
 src/components/divider/divider.vue |  62 +++++++++++++
 src/components/divider/index.js    |   3 +
 src/index.js                       |   4 +-
 src/styles/components/divider.less | 143 +++++++++++++++++++++++++++++
 src/styles/components/index.less   |   1 +
 8 files changed, 282 insertions(+), 1 deletion(-)
 create mode 100644 examples/routers/divider.vue
 create mode 100644 src/components/divider/divider.vue
 create mode 100644 src/components/divider/index.js
 create mode 100644 src/styles/components/divider.less

diff --git a/examples/app.vue b/examples/app.vue
index e8cc10b3..d46d9903 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -62,6 +62,7 @@ nav {
                 <li><router-link to="/color-picker">ColorPicker</router-link></li>
                 <li><router-link to="/auto-complete">AutoComplete</router-link></li>
                 <li><router-link to="/scroll">Scroll</router-link></li>
+                <li><router-link to="/divider">Divider</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/examples/main.js b/examples/main.js
index 9d7c0e26..c4025cd6 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -202,6 +202,10 @@ const router = new VueRouter({
         {
             path: '/scroll',
             component: (resolve) => require(['./routers/scroll.vue'], resolve)
+        },
+        {
+            path: '/divider',
+            component: (resolve) => require(['./routers/divider.vue'], resolve)
         }
     ]
 });
diff --git a/examples/routers/divider.vue b/examples/routers/divider.vue
new file mode 100644
index 00000000..350c6b0d
--- /dev/null
+++ b/examples/routers/divider.vue
@@ -0,0 +1,65 @@
+<template>
+  <Row :gutter="16">
+    <Col span="12">
+    <Card title="horizontal divider">
+      <div>
+         <p>iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js.</p>
+
+        <Divider />
+
+          <p>iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js.</p>
+
+        <Divider>iView </Divider>
+
+         <p>iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js.</p>
+
+        <Divider dashed />
+
+        <p>iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js.</p>
+
+        <Divider orientation="left">iView</Divider>
+
+        <p>iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js.</p>
+
+        <Divider orientation="right">iView</Divider>
+
+         <p>iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js. 
+          iView is a set of UI components and widgets built on Vue.js.</p>
+
+      </div>
+    </Card>
+    </Col>
+    <Col span="12">
+    <Card title="vertical divider">
+      <div>
+        iView
+        <Divider type="vertical divider" />
+        <a href="#">Components</a>
+        <Divider type="vertical" />
+        <a href="#">Divider</a>
+      </div>
+    </Card>
+    </Col>
+  </Row>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/divider/divider.vue b/src/components/divider/divider.vue
new file mode 100644
index 00000000..c620f953
--- /dev/null
+++ b/src/components/divider/divider.vue
@@ -0,0 +1,62 @@
+<template>
+  <div :class="classes">
+    <span v-if="hasSlot" :class="slotClasses">
+      <slot></slot>
+    </span>
+   </div>
+</template>
+
+<script>
+import { oneOf } from '../../utils/assist';
+
+const prefixCls = 'ivu-divider';
+
+export default {
+  name:'Divider',
+  props: {
+    type: {
+      type: String,
+      default() { return 'horizontal'; },
+      validator (value) {
+          return oneOf(value, ['horizontal', 'vertical']);
+      }
+    },
+    orientation: {
+      type: String,
+      default() { return 'left'; },
+      validator (value) {
+          return oneOf(value, ['left', 'right']);
+      }
+    },
+    dashed:{
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    hasSlot() {
+      if(this.$slots.default) return true;
+      else return false;
+    },
+    classes() {
+      return [
+        `${prefixCls}`, 
+        `${prefixCls}-${this.type}`, 
+        { 
+          [`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot,
+          [`${prefixCls}-dashed`]: !!this.dashed
+        }
+      ];
+    },
+    slotClasses() {
+      return [
+        `${prefixCls}-inner-text`,
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/divider/index.js b/src/components/divider/index.js
new file mode 100644
index 00000000..e4e86666
--- /dev/null
+++ b/src/components/divider/index.js
@@ -0,0 +1,3 @@
+import Divider from './divider.vue';
+
+export default Divider;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ee7d67dc..34845b28 100644
--- a/src/index.js
+++ b/src/index.js
@@ -50,6 +50,7 @@ import Tree from './components/tree';
 import Upload from './components/upload';
 import {Row, Col} from './components/grid';
 import {Select, Option, OptionGroup} from './components/select';
+import Divider from './components/divider';
 import locale from './locale/index';
 
 const components = {
@@ -120,7 +121,8 @@ const components = {
     Tooltip,
     Transfer,
     Tree,
-    Upload
+    Upload,
+    Divider
 };
 
 const iview = {
diff --git a/src/styles/components/divider.less b/src/styles/components/divider.less
new file mode 100644
index 00000000..be93d983
--- /dev/null
+++ b/src/styles/components/divider.less
@@ -0,0 +1,143 @@
+
+
+@divider-prefix-cls: ~"@{css-prefix}divider";
+
+@font-size-base         : 14px;
+@font-size-lg           : @font-size-base + 2px;
+@heading-color          : fade(#000, 85%);
+
+.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;
+}
+
+.@{divider-prefix-cls} {
+  .reset-component;
+  background: @border-color-split;
+
+  &,  // for compatiable
+  &-vertical {
+    margin: 0 8px;
+    display: inline-block;
+    height: 0.9em;
+    width: 1px;
+    vertical-align: middle;
+    position: relative;
+    top: -0.06em;
+  }
+  &-horizontal {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+  }
+  &-horizontal&-with-text {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: @heading-color;
+    font-size: @font-size-lg;
+    margin: 16px 0;
+
+    &:before,
+    &:after {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 50%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+  }
+  &-inner-text {
+    display: inline-block;
+    padding: 0 24px;
+  }
+  &-horizontal&-with-text-left {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: @heading-color;
+    font-size: @font-size-base;
+    margin: 16px 0;
+
+    &:before {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 5%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &:after {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 95%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &-inner-text {
+      display: inline-block;
+      padding: 0 10px;
+    }
+  }
+
+  &-horizontal&-with-text-right {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: @heading-color;
+    font-size: @font-size-base;
+    margin: 16px 0;
+
+    &:before {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 95%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &:after {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 5%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &-inner-text {
+      display: inline-block;
+      padding: 0 10px;
+    }
+  }
+  &-dashed {
+    background: none;
+    border-top: 1px dashed @border-color-split;
+  }
+  &-horizontal&-with-text&-dashed {
+    border-top: 0;
+    &:before,
+    &:after {
+      border-style: dashed none none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/components/index.less b/src/styles/components/index.less
index cb877ad4..7845c882 100644
--- a/src/styles/components/index.less
+++ b/src/styles/components/index.less
@@ -44,3 +44,4 @@
 @import "avatar";
 @import "color-picker";
 @import "auto-complete";
+@import "divider";
\ No newline at end of file