chenhaodong / mew-iview

Commit b26389a034ca506c6f6d545f8c98e4c094a5ff41

Authored by xiaofengsha
1 parent 320fba54

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

* 完成了Divider分割线组件演示代码
Showing 8 changed files with 282 additions and 1 deletions   Show diff stats
Inline Side-by-side
examples/app.vue
  Show/Hide comments   View file @b26389a
... ... @@ -62,6 +62,7 @@ nav {
62 62 <li><router-link to="/color-picker">ColorPicker</router-link></li>
63 63 <li><router-link to="/auto-complete">AutoComplete</router-link></li>
64 64 <li><router-link to="/scroll">Scroll</router-link></li>
  65 + <li><router-link to="/divider">Divider</router-link></li>
65 66 </ul>
66 67 </nav>
67 68 <router-view></router-view>
... ...
examples/main.js
  Show/Hide comments   View file @b26389a
... ... @@ -202,6 +202,10 @@ const router = new VueRouter({
202 202 {
203 203 path: '/scroll',
204 204 component: (resolve) => require(['./routers/scroll.vue'], resolve)
  205 + },
  206 + {
  207 + path: '/divider',
  208 + component: (resolve) => require(['./routers/divider.vue'], resolve)
205 209 }
206 210 ]
207 211 });
... ...
examples/routers/divider.vue 0 → 100644
  Show/Hide comments   View file @b26389a
  1 +<template>
  2 + <Row :gutter="16">
  3 + <Col span="12">
  4 + <Card title="horizontal divider">
  5 + <div>
  6 + <p>iView is a set of UI components and widgets built on Vue.js.
  7 + iView is a set of UI components and widgets built on Vue.js.
  8 + iView is a set of UI components and widgets built on Vue.js.</p>
  9 +
  10 + <Divider />
  11 +
  12 + <p>iView is a set of UI components and widgets built on Vue.js.
  13 + iView is a set of UI components and widgets built on Vue.js.
  14 + iView is a set of UI components and widgets built on Vue.js.</p>
  15 +
  16 + <Divider>iView </Divider>
  17 +
  18 + <p>iView is a set of UI components and widgets built on Vue.js.
  19 + iView is a set of UI components and widgets built on Vue.js.
  20 + iView is a set of UI components and widgets built on Vue.js.</p>
  21 +
  22 + <Divider dashed />
  23 +
  24 + <p>iView is a set of UI components and widgets built on Vue.js.
  25 + iView is a set of UI components and widgets built on Vue.js.
  26 + iView is a set of UI components and widgets built on Vue.js.</p>
  27 +
  28 + <Divider orientation="left">iView</Divider>
  29 +
  30 + <p>iView is a set of UI components and widgets built on Vue.js.
  31 + iView is a set of UI components and widgets built on Vue.js.
  32 + iView is a set of UI components and widgets built on Vue.js.</p>
  33 +
  34 + <Divider orientation="right">iView</Divider>
  35 +
  36 + <p>iView is a set of UI components and widgets built on Vue.js.
  37 + iView is a set of UI components and widgets built on Vue.js.
  38 + iView is a set of UI components and widgets built on Vue.js.</p>
  39 +
  40 + </div>
  41 + </Card>
  42 + </Col>
  43 + <Col span="12">
  44 + <Card title="vertical divider">
  45 + <div>
  46 + iView
  47 + <Divider type="vertical divider" />
  48 + <a href="#">Components</a>
  49 + <Divider type="vertical" />
  50 + <a href="#">Divider</a>
  51 + </div>
  52 + </Card>
  53 + </Col>
  54 + </Row>
  55 +</template>
  56 +
  57 +<script>
  58 +export default {
  59 +
  60 +}
  61 +</script>
  62 +
  63 +<style>
  64 +
  65 +</style>
... ...
src/components/divider/divider.vue 0 → 100644
  Show/Hide comments   View file @b26389a
  1 +<template>
  2 + <div :class="classes">
  3 + <span v-if="hasSlot" :class="slotClasses">
  4 + <slot></slot>
  5 + </span>
  6 + </div>
  7 +</template>
  8 +
  9 +<script>
  10 +import { oneOf } from '../../utils/assist';
  11 +
  12 +const prefixCls = 'ivu-divider';
  13 +
  14 +export default {
  15 + name:'Divider',
  16 + props: {
  17 + type: {
  18 + type: String,
  19 + default() { return 'horizontal'; },
  20 + validator (value) {
  21 + return oneOf(value, ['horizontal', 'vertical']);
  22 + }
  23 + },
  24 + orientation: {
  25 + type: String,
  26 + default() { return 'left'; },
  27 + validator (value) {
  28 + return oneOf(value, ['left', 'right']);
  29 + }
  30 + },
  31 + dashed:{
  32 + type: Boolean,
  33 + default: false,
  34 + }
  35 + },
  36 + computed: {
  37 + hasSlot() {
  38 + if(this.$slots.default) return true;
  39 + else return false;
  40 + },
  41 + classes() {
  42 + return [
  43 + `${prefixCls}`,
  44 + `${prefixCls}-${this.type}`,
  45 + {
  46 + [`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot,
  47 + [`${prefixCls}-dashed`]: !!this.dashed
  48 + }
  49 + ];
  50 + },
  51 + slotClasses() {
  52 + return [
  53 + `${prefixCls}-inner-text`,
  54 + ]
  55 + }
  56 + }
  57 +}
  58 +</script>
  59 +
  60 +<style>
  61 +
  62 +</style>
... ...
src/components/divider/index.js 0 → 100644
  Show/Hide comments   View file @b26389a
  1 +import Divider from './divider.vue';
  2 +
  3 +export default Divider;
0 4 \ No newline at end of file
... ...
src/index.js
  Show/Hide comments   View file @b26389a
... ... @@ -50,6 +50,7 @@ import Tree from &#39;./components/tree&#39;;
50 50 import Upload from './components/upload';
51 51 import {Row, Col} from './components/grid';
52 52 import {Select, Option, OptionGroup} from './components/select';
  53 +import Divider from './components/divider';
53 54 import locale from './locale/index';
54 55  
55 56 const components = {
... ... @@ -120,7 +121,8 @@ const components = {
120 121 Tooltip,
121 122 Transfer,
122 123 Tree,
123   - Upload
  124 + Upload,
  125 + Divider
124 126 };
125 127  
126 128 const iview = {
... ...
src/styles/components/divider.less 0 → 100644
  Show/Hide comments   View file @b26389a
  1 +
  2 +
  3 +@divider-prefix-cls: ~"@{css-prefix}divider";
  4 +
  5 +@font-size-base : 14px;
  6 +@font-size-lg : @font-size-base + 2px;
  7 +@heading-color : fade(#000, 85%);
  8 +
  9 +.reset-component() {
  10 + font-family: @font-family;
  11 + font-size: @font-size-base;
  12 + line-height: @line-height-base;
  13 + color: @text-color;
  14 + box-sizing: border-box;
  15 + margin: 0;
  16 + padding: 0;
  17 + list-style: none;
  18 +}
  19 +
  20 +.@{divider-prefix-cls} {
  21 + .reset-component;
  22 + background: @border-color-split;
  23 +
  24 + &, // for compatiable
  25 + &-vertical {
  26 + margin: 0 8px;
  27 + display: inline-block;
  28 + height: 0.9em;
  29 + width: 1px;
  30 + vertical-align: middle;
  31 + position: relative;
  32 + top: -0.06em;
  33 + }
  34 + &-horizontal {
  35 + display: block;
  36 + height: 1px;
  37 + width: 100%;
  38 + margin: 24px 0;
  39 + }
  40 + &-horizontal&-with-text {
  41 + display: table;
  42 + white-space: nowrap;
  43 + text-align: center;
  44 + background: transparent;
  45 + font-weight: 500;
  46 + color: @heading-color;
  47 + font-size: @font-size-lg;
  48 + margin: 16px 0;
  49 +
  50 + &:before,
  51 + &:after {
  52 + content: '';
  53 + display: table-cell;
  54 + position: relative;
  55 + top: 50%;
  56 + width: 50%;
  57 + border-top: 1px solid @border-color-split;
  58 + transform: translateY(50%);
  59 + }
  60 + }
  61 + &-inner-text {
  62 + display: inline-block;
  63 + padding: 0 24px;
  64 + }
  65 + &-horizontal&-with-text-left {
  66 + display: table;
  67 + white-space: nowrap;
  68 + text-align: center;
  69 + background: transparent;
  70 + font-weight: 500;
  71 + color: @heading-color;
  72 + font-size: @font-size-base;
  73 + margin: 16px 0;
  74 +
  75 + &:before {
  76 + content: '';
  77 + display: table-cell;
  78 + position: relative;
  79 + top: 50%;
  80 + width: 5%;
  81 + border-top: 1px solid @border-color-split;
  82 + transform: translateY(50%);
  83 + }
  84 + &:after {
  85 + content: '';
  86 + display: table-cell;
  87 + position: relative;
  88 + top: 50%;
  89 + width: 95%;
  90 + border-top: 1px solid @border-color-split;
  91 + transform: translateY(50%);
  92 + }
  93 + &-inner-text {
  94 + display: inline-block;
  95 + padding: 0 10px;
  96 + }
  97 + }
  98 +
  99 + &-horizontal&-with-text-right {
  100 + display: table;
  101 + white-space: nowrap;
  102 + text-align: center;
  103 + background: transparent;
  104 + font-weight: 500;
  105 + color: @heading-color;
  106 + font-size: @font-size-base;
  107 + margin: 16px 0;
  108 +
  109 + &:before {
  110 + content: '';
  111 + display: table-cell;
  112 + position: relative;
  113 + top: 50%;
  114 + width: 95%;
  115 + border-top: 1px solid @border-color-split;
  116 + transform: translateY(50%);
  117 + }
  118 + &:after {
  119 + content: '';
  120 + display: table-cell;
  121 + position: relative;
  122 + top: 50%;
  123 + width: 5%;
  124 + border-top: 1px solid @border-color-split;
  125 + transform: translateY(50%);
  126 + }
  127 + &-inner-text {
  128 + display: inline-block;
  129 + padding: 0 10px;
  130 + }
  131 + }
  132 + &-dashed {
  133 + background: none;
  134 + border-top: 1px dashed @border-color-split;
  135 + }
  136 + &-horizontal&-with-text&-dashed {
  137 + border-top: 0;
  138 + &:before,
  139 + &:after {
  140 + border-style: dashed none none;
  141 + }
  142 + }
  143 +}
0 144 \ No newline at end of file
... ...
src/styles/components/index.less
  Show/Hide comments   View file @b26389a
... ... @@ -44,3 +44,4 @@
44 44 @import "avatar";
45 45 @import "color-picker";
46 46 @import "auto-complete";
  47 +@import "divider";
47 48 \ No newline at end of file
... ...