From aa32f2441e3dcb6bc4ead77f09dd05358dfbefe7 Mon Sep 17 00:00:00 2001
From: KongYe <40623993+kongyeah@users.noreply.github.com>
Date: Thu, 19 Sep 2019 16:51:22 +0800
Subject: [PATCH]  feat(Divider): add divider (#2058)

---
 example/app.json                 |  1 +
 example/config.js                |  4 ++
 example/pages/divider/index.js   |  3 ++
 example/pages/divider/index.json |  3 ++
 example/pages/divider/index.wxml | 17 ++++++++
 example/pages/divider/index.wxss |  3 ++
 packages/common/style/var.less   | 10 +++++
 packages/divider/README.md       | 74 ++++++++++++++++++++++++++++++++
 packages/divider/index.json      |  4 ++
 packages/divider/index.less      | 64 +++++++++++++++++++++++++++
 packages/divider/index.ts        | 34 +++++++++++++++
 packages/divider/index.wxml      |  8 ++++
 12 files changed, 225 insertions(+)
 create mode 100644 example/pages/divider/index.js
 create mode 100644 example/pages/divider/index.json
 create mode 100644 example/pages/divider/index.wxml
 create mode 100644 example/pages/divider/index.wxss
 create mode 100644 packages/divider/README.md
 create mode 100644 packages/divider/index.json
 create mode 100644 packages/divider/index.less
 create mode 100644 packages/divider/index.ts
 create mode 100644 packages/divider/index.wxml

diff --git a/example/app.json b/example/app.json
index 950b8d9f..fc646bfe 100644
--- a/example/app.json
+++ b/example/app.json
@@ -77,6 +77,7 @@
     "van-checkbox-group": "./dist/checkbox-group/index",
     "van-col": "./dist/col/index",
     "van-dialog": "./dist/dialog/index",
+    "van-divider": "./dist/divider/index",
     "van-field": "./dist/field/index",
     "van-goods-action": "./dist/goods-action/index",
     "van-goods-action-icon": "./dist/goods-action-icon/index",
diff --git a/example/config.js b/example/config.js
index d5d6ac9b..951e7903 100644
--- a/example/config.js
+++ b/example/config.js
@@ -148,6 +148,10 @@ export default [
       {
         path: '/tree-select',
         title: 'TreeSelect 分类选择'
+      },
+      {
+        path: '/divider',
+        title: 'Divider 分割线'
       }
     ]
   },
diff --git a/example/pages/divider/index.js b/example/pages/divider/index.js
new file mode 100644
index 00000000..cc11dfda
--- /dev/null
+++ b/example/pages/divider/index.js
@@ -0,0 +1,3 @@
+import Page from '../../common/page';
+
+Page();
diff --git a/example/pages/divider/index.json b/example/pages/divider/index.json
new file mode 100644
index 00000000..1cb53549
--- /dev/null
+++ b/example/pages/divider/index.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Divider 分割线"
+}
diff --git a/example/pages/divider/index.wxml b/example/pages/divider/index.wxml
new file mode 100644
index 00000000..b01a8fdb
--- /dev/null
+++ b/example/pages/divider/index.wxml
@@ -0,0 +1,17 @@
+<demo-block custom-class="white" title="基础用法" padding>
+  <van-divider />
+</demo-block>
+
+<demo-block custom-class="white" title="内容位置" padding>
+  <van-divider content-position="center">文本</van-divider>
+  <van-divider content-position="left">文本</van-divider>
+  <van-divider content-position="right">文本</van-divider>
+</demo-block>
+
+<demo-block custom-class="white" title="虚线" padding>
+  <van-divider dashed />
+</demo-block>
+
+<demo-block custom-class="white" title="自定义样式" padding>
+  <van-divider content-position="center" custom-style="color: #1989fa;border-color: #1989fa;font-size: 18px;">文本</van-divider>
+</demo-block>
\ No newline at end of file
diff --git a/example/pages/divider/index.wxss b/example/pages/divider/index.wxss
new file mode 100644
index 00000000..c24354b1
--- /dev/null
+++ b/example/pages/divider/index.wxss
@@ -0,0 +1,3 @@
+page {
+  background-color: white;
+}
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index bc240043..35b31265 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -197,3 +197,13 @@
 @grid-item-icon-size: 26px;
 @grid-item-text-color: @gray-darker;
 @grid-item-text-font-size: @font-size-sm;
+
+// Divider
+@divider-margin: @padding-md 0;
+@divider-text-color: @gray-dark;
+@divider-font-size: @font-size-md;
+@divider-line-height: 24px;
+@divider-border-color: @border-color;
+@divider-content-padding: @padding-md;
+@divider-content-left-width: 10%;
+@divider-content-right-width: 10%;
diff --git a/packages/divider/README.md b/packages/divider/README.md
new file mode 100644
index 00000000..fa21a5df
--- /dev/null
+++ b/packages/divider/README.md
@@ -0,0 +1,74 @@
+# Divider 分割线
+
+### 介绍
+
+分割线
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
+
+```json
+"usingComponents": {
+  "van-divider": "path/to/vant-weapp/dist/divider/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-divider />
+```
+
+### 使用hairline
+
+```html
+<van-divider hairline />
+```
+
+### 虚线
+
+```html
+<van-divider dashed />
+```
+
+### 文本位置
+
+```html
+<van-divider contentPosition="center">文本</van-divider>
+  <van-divider contentPosition="left">文本</van-divider>
+  <van-divider contentPosition="right">文本</van-divider>
+```
+
+### 自定义属性
+
+```html
+<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>
+<van-divider contentPosition="center" borderColor="#1989fa">border颜色</van-divider>
+<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>
+```
+
+### 自定义样式
+
+```html
+<van-divider contentPosition="center" customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;">文本</van-divider>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|-----------|-----------|-----------|-------------|-------------|
+| dashed | 虚线 | *boolean* | false | - |
+| hairline | 细线 | *boolean* | false | - |
+| content-position | 文本位置，`left` `center` `right` | *string* | - | - |
+| custom-style | 自定义样式 | *string* | - | - |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| 默认 | 自定义文本内容 |
diff --git a/packages/divider/index.json b/packages/divider/index.json
new file mode 100644
index 00000000..e8cfaaf8
--- /dev/null
+++ b/packages/divider/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/packages/divider/index.less b/packages/divider/index.less
new file mode 100644
index 00000000..047bc27b
--- /dev/null
+++ b/packages/divider/index.less
@@ -0,0 +1,64 @@
+@import '../common/style/var.less';
+
+.van-divider {
+  display: flex;
+  align-items: center;
+  margin: @divider-margin;
+  color: @divider-text-color;
+  font-size: @divider-font-size;
+  line-height: @divider-line-height;
+  border-color: @divider-border-color;
+  border-style: solid;
+  border-width: 0;
+
+  &::before,
+  &::after {
+    display: block;
+    flex: 1;
+    box-sizing: border-box;
+    height: 1px;
+    border-color: inherit;
+    border-style: inherit;
+    border-width: 1px 0 0;
+  }
+
+  &::before {
+    content: '';
+  }
+
+  &--hairline {
+    &::before,
+    &::after {
+      transform: scaleY(.5);
+    }
+  }
+
+  &--dashed {
+    border-style: dashed;
+  }
+
+  &--center,
+  &--left,
+  &--right {
+    &::before {
+      margin-right: @divider-content-padding;
+    }
+
+    &::after {
+      margin-left: @divider-content-padding;
+      content: '';
+    }
+  }
+
+  &--left {
+    &::before {
+      max-width: @divider-content-left-width;
+    }
+  }
+
+  &--right {
+    &::after {
+      max-width: @divider-content-right-width;
+    }
+  }
+}
diff --git a/packages/divider/index.ts b/packages/divider/index.ts
new file mode 100644
index 00000000..5f1cc27e
--- /dev/null
+++ b/packages/divider/index.ts
@@ -0,0 +1,34 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  props: {
+    dashed: {
+      type: Boolean,
+      value: false
+    },
+    hairline: {
+      type: Boolean,
+      value: false
+    },
+    contentPosition: {
+      type: String,
+      value: ''
+    },
+    fontSize: {
+      type: Number,
+      value: ''
+    },
+    borderColor: {
+      type: String,
+      value: ''
+    },
+    textColor: {
+      type: String,
+      value: ''
+    },
+    customStyle: {
+      type: String,
+      value: ''
+    }
+  }
+});
diff --git a/packages/divider/index.wxml b/packages/divider/index.wxml
new file mode 100644
index 00000000..9edadbfa
--- /dev/null
+++ b/packages/divider/index.wxml
@@ -0,0 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="custom-class {{ utils.bem('divider', [{dashed, hairline}, contentPosition]) }}"
+  style="{{ borderColor  ? 'border-color: ' + borderColor + ';' : '' }}{{ textColor ? 'color: ' + textColor : '' }} {{ fontSize ? 'font-size: ' + fontSize + 'px' : '' }} {{ customStyle }}"
+>
+  <slot />
+</view>
\ No newline at end of file