Merge pull request #3275 from xiaofengsha/pr004

参照AntDesign，实现了Vue版本的Divider分割线组件

Merge pull request #3275 from xiaofengsha/pr004
参照AntDesign，实现了Vue版本的Divider分割线组件
Aresn · GitHub
2 parents 83cc2fd2 e9dc3c42
Showing 8 changed files with 281 additions and 1 deletions Show diff stats
examples/app.vue
examples/main.js
examples/routers/divider.vue
src/components/divider/divider.vue
src/components/divider/index.js
src/index.js
src/styles/components/divider.less
src/styles/components/index.less
@@ -64,6 +64,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>
                 <li><router-link to="/time">Time</router-link></li>
             </ul>
         </nav>
@@ -212,6 +212,10 @@ const router = new VueRouter({
             component: (resolve) => require(['./routers/scroll.vue'], resolve)
         },
         {
+            path: '/divider',
+            component: (resolve) => require(['./routers/divider.vue'], resolve)
+        },
+        {
             path: '/time',
             component: (resolve) => require(['./routers/time.vue'], resolve)
         }
+<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>
+<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() {
+      return !!this.$slots.default;
+    },
+    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>
+import Divider from './divider.vue';
+
+export default Divider;
 \ No newline at end of file
@@ -54,6 +54,7 @@ import Tree from &#39;./components/tree&#39;;
 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 = {
@@ -128,7 +129,8 @@ const components = {
     Tooltip,
     Transfer,
     Tree,
-    Upload
+    Upload,
+    Divider
 };
 const iview = {
+
+
+@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
@@ -45,5 +45,6 @@
 @import "avatar";
 @import "color-picker";
 @import "auto-complete";
+@import "divider";
 @import "anchor";
 @import "time";