chenhaodong / mew-iview

Commit 32fd4ffa06a726b3fcd787eae56f8978940e9cbd

Authored by Aresn
Committed by GitHub
2 parents 83cc2fd2 e9dc3c42

Merge pull request #3275 from xiaofengsha/pr004 

参照AntDesign，实现了Vue版本的Divider分割线组件
Showing 8 changed files with 281 additions and 1 deletions   Show diff stats
Inline Side-by-side
examples/app.vue
  Show/Hide comments   View file @32fd4ff
... ... @@ -64,6 +64,7 @@ nav {
64 64 <li><router-link to="/color-picker">ColorPicker</router-link></li>
65 65 <li><router-link to="/auto-complete">AutoComplete</router-link></li>
66 66 <li><router-link to="/scroll">Scroll</router-link></li>
  67 + <li><router-link to="/divider">Divider</router-link></li>
67 68 <li><router-link to="/time">Time</router-link></li>
68 69 </ul>
69 70 </nav>
... ...
examples/main.js
  Show/Hide comments   View file @32fd4ff
... ... @@ -212,6 +212,10 @@ const router = new VueRouter({
212 212 component: (resolve) => require(['./routers/scroll.vue'], resolve)
213 213 },
214 214 {
  215 + path: '/divider',
  216 + component: (resolve) => require(['./routers/divider.vue'], resolve)
  217 + },
  218 + {
215 219 path: '/time',
216 220 component: (resolve) => require(['./routers/time.vue'], resolve)
217 221 }
... ...
examples/routers/divider.vue 0 → 100644
  Show/Hide comments   View file @32fd4ff
  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 @32fd4ff
  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 + return !!this.$slots.default;
  39 + },
  40 + classes() {
  41 + return [
  42 + `${prefixCls}`,
  43 + `${prefixCls}-${this.type}`,
  44 + {
  45 + [`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot,
  46 + [`${prefixCls}-dashed`]: !!this.dashed
  47 + }
  48 + ];
  49 + },
  50 + slotClasses() {
  51 + return [
  52 + `${prefixCls}-inner-text`,
  53 + ]
  54 + }
  55 + }
  56 +}
  57 +</script>
  58 +
  59 +<style>
  60 +
  61 +</style>
... ...
src/components/divider/index.js 0 → 100644
  Show/Hide comments   View file @32fd4ff
  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 @32fd4ff
... ... @@ -54,6 +54,7 @@ import Tree from &#39;./components/tree&#39;;
54 54 import Upload from './components/upload';
55 55 import {Row, Col} from './components/grid';
56 56 import {Select, Option, OptionGroup} from './components/select';
  57 +import Divider from './components/divider';
57 58 import locale from './locale/index';
58 59  
59 60 const components = {
... ... @@ -128,7 +129,8 @@ const components = {
128 129 Tooltip,
129 130 Transfer,
130 131 Tree,
131   - Upload
  132 + Upload,
  133 + Divider
132 134 };
133 135  
134 136 const iview = {
... ...
src/styles/components/divider.less 0 → 100644
  Show/Hide comments   View file @32fd4ff
  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 @32fd4ff
... ... @@ -45,5 +45,6 @@
45 45 @import "avatar";
46 46 @import "color-picker";
47 47 @import "auto-complete";
  48 +@import "divider";
48 49 @import "anchor";
49 50 @import "time";
... ...