[new feature] add divider component (#3755)

src/divider/demo/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-divider />
+    </demo-block>
+
+    <demo-block :title="$t('withText')">
+      <van-divider>
+        {{ $t('text') }}
+      </van-divider>
+    </demo-block>
+
+    <demo-block :title="$t('contentPosition')">
+      <van-divider content-position="left">
+        {{ $t('text') }}
+      </van-divider>
+
+      <van-divider content-position="right">
+        {{ $t('text') }}
+      </van-divider>
+    </demo-block>
+
+    <demo-block :title="$t('dashed')">
+      <van-divider
+        dashed
+        :hairline="false"
+      >
+        {{ $t('text') }}
+      </van-divider>
+    </demo-block>
+
+    <demo-block :title="$t('customStyle')">
+      <van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 15px' }">
+        {{ $t('text') }}
+      </van-divider>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import { BLUE } from '../../utils/color';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文本',
+      dashed: '虚线',
+      withText: '展示文本',
+      contentPosition: '内容位置',
+      customStyle: '自定义样式'
+    },
+    'en-US': {
+      text: 'Text',
+      dashed: 'Dashed',
+      withText: 'With Text',
+      contentPosition: 'Content Position',
+      customStyle: 'Custom Style'
+    }
+  },
+
+  data() {
+    return {
+      BLUE
+    };
+  }
+};
+</script>
+
+<style lang="less">
+.demo-divider {
+  background-color: #fff;
+
+  .van-doc-demo-block__title {
+    padding-top: 15px;
+  }
+}
+</style>