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] * 对照AntDesign，实现了Divider分割线组件的Vue版本 * 完成了Divider分割线组件演示代码 --- 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 e8cc10b..d46d990 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -62,6 +62,7 @@ nav {
  • ColorPicker
  • AutoComplete
  • Scroll
    • +
  • Divider
    • diff --git a/examples/main.js b/examples/main.js index 9d7c0e2..c4025cd 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 0000000..350c6b0 --- /dev/null +++ b/examples/routers/divider.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/src/components/divider/divider.vue b/src/components/divider/divider.vue new file mode 100644 index 0000000..c620f95 --- /dev/null +++ b/src/components/divider/divider.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/src/components/divider/index.js b/src/components/divider/index.js new file mode 100644 index 0000000..e4e8666 --- /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 ee7d67d..34845b2 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 0000000..be93d98 --- /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 cb877ad..7845c88 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 -- libgit2 0.21.4