feat: add divider (#644)

Co-authored-by: johnyang2017 <tarende2008@126.com>

src/config.json

@@ -171,6 +171,17 @@
           "sort": 14,
           "show": true,
           "author": "szg2008"
+        },
+        {
+          "version": "3.0.0",
+          "name": "Divider",
+          "taro": true,
+          "type": "component",
+          "cName": "分割线",
+          "desc": "用于将内容分隔为多个区域。",
+          "sort": 23,
+          "show": true,
+          "author": "yangjinjun3"
         }
       ]
     },

src/packages/__VUE/divider/demo.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-divider />
+    </nut-cell>
+    <h2>展示文本</h2>
+    <nut-cell>
+      <nut-divider>文本</nut-divider>
+    </nut-cell>
+    <h2>内容位置</h2>
+    <nut-cell>
+      <nut-divider content-position="left">文本</nut-divider>
+    </nut-cell>
+    <nut-cell>
+      <nut-divider content-position="right">文本</nut-divider>
+    </nut-cell>
+    <h2>虚线</h2>
+    <nut-cell>
+      <nut-divider dashed>文本</nut-divider>
+    </nut-cell>
+    <h2>自定义样式</h2>
+    <nut-cell>
+      <nut-divider
+        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
+        >文本</nut-divider
+      >
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { createComponent } from '../../utils/create';
+const { createDemo } = createComponent('divider');
+export default createDemo({
+  props: {},
+  setup() {
+    return {};
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.demo {
+}
+</style>

src/packages/__VUE/divider/doc.md

@@ -0,0 +1,78 @@
+# Divider 分割线
+
+### 介绍
+    
+用于将内容分隔为多个区域。
+
+### 安装
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { Divider } from '@nutui/nutui';
+// taro
+import { Divider } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Divider);
+```
+
+
+## 代码演示
+
+### 基础用法
+
+默认渲染一条水平分割线。
+
+``` html
+<nut-divider />
+```
+
+### 展示文本
+
+通过插槽在可以分割线中间插入内容。
+
+``` html
+<nut-divider>文本</nut-divider>
+```
+
+### 内容位置
+
+通过 content-position 指定内容所在位置。
+
+``` html
+<nut-divider content-position="left">文本</nut-divider>
+<nut-divider content-position="right">文本</nut-divider>
+```
+
+### 虚线
+
+添加 dashed 属性使分割线渲染为虚线。
+
+``` html
+<nut-divider dashed />
+```
+
+### 自定义样式
+
+可以直接通过 style 属性设置分割线的样式。
+
+``` html
+<nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文本</nut-divider>
+```
+
+## API
+
+### Props
+
+| 参数         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| dashed         | 是否使用虚线               | Boolean | false                |
+| hairline        | 是否使用 0.5px 线                         | Boolean | true                |
+| content-position        | 内容位置，可选值为left right                         | String | center                |
+
+### Slots
+
+| 名称 | 说明           | 
+|--------|----------------|
+| default  | 内容 | 
+    

src/packages/__VUE/divider/index.scss

@@ -0,0 +1,54 @@
+.nut-divider {
+  display: flex;
+  align-items: center;
+  font-size: 28px;
+  color: #909ca4;
+  margin: 16px 0;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    border: 1px solid currentColor;
+    border-width: 1px 0 0;
+    flex: 1;
+  }
+
+  &.nut-divider-center,
+  &.nut-divider-left,
+  &.nut-divider-right {
+    &::before {
+      margin-right: 16px;
+    }
+
+    &::after {
+      margin-left: 16px;
+    }
+  }
+
+  &.nut-divider-left {
+    &::before {
+      max-width: 10%;
+    }
+  }
+
+  &.nut-divider-right {
+    &::after {
+      max-width: 10%;
+    }
+  }
+
+  &.nut-divider-dashed {
+    &::before,
+    &::after {
+      border-style: dashed;
+    }
+  }
+
+  &.nut-divider-hairline {
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+}

src/packages/__VUE/divider/index.taro.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="classes">
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import { login } from '@tarojs/taro';
+import { computed, onMounted } from 'vue';
+import { createComponent } from '../../utils/create';
+const { componentName, create } = createComponent('divider');
+
+export default create({
+  props: {
+    contentPosition: {
+      type: String,
+      default: 'center'
+    },
+    dashed: {
+      type: Boolean,
+      default: false
+    },
+    hairline: {
+      type: Boolean,
+      default: true
+    }
+  },
+  components: {},
+
+  setup(props, context) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-center`]: context.slots.default,
+        [`${prefixCls}-left`]: props.contentPosition === 'left',
+        [`${prefixCls}-right`]: props.contentPosition === 'right',
+        [`${prefixCls}-dashed`]: props.dashed,
+        [`${prefixCls}-hairline`]: props.hairline
+      };
+    });
+
+    return { classes };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/packages/__VUE/divider/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="classes">
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import { login } from '@tarojs/taro';
+import { computed, onMounted } from 'vue';
+import { createComponent } from '../../utils/create';
+const { componentName, create } = createComponent('divider');
+
+export default create({
+  props: {
+    contentPosition: {
+      type: String,
+      default: 'center'
+    },
+    dashed: {
+      type: Boolean,
+      default: false
+    },
+    hairline: {
+      type: Boolean,
+      default: true
+    }
+  },
+  components: {},
+
+  setup(props, context) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-center`]: context.slots.default,
+        [`${prefixCls}-left`]: props.contentPosition === 'left',
+        [`${prefixCls}-right`]: props.contentPosition === 'right',
+        [`${prefixCls}-dashed`]: props.dashed,
+        [`${prefixCls}-hairline`]: props.hairline
+      };
+    });
+
+    return { classes };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/sites/mobile-taro/vue/src/app.config.ts

@@ -35,7 +35,8 @@ export default {
         'pages/price/index',
         'pages/button/index',
         'pages/avatar/index',
-        'pages/overlay/index'
+        'pages/overlay/index',
+        'pages/divider/index'
       ]
     },
     {

src/sites/mobile-taro/vue/src/base/pages/divider/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Divider'
+};

src/sites/mobile-taro/vue/src/base/pages/divider/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-divider />
+    </nut-cell>
+    <h2>展示文本</h2>
+    <nut-cell>
+      <nut-divider>文本</nut-divider>
+    </nut-cell>
+    <h2>内容位置</h2>
+    <nut-cell>
+      <nut-divider content-position="left">文本</nut-divider>
+    </nut-cell>
+    <nut-cell>
+      <nut-divider content-position="right">文本</nut-divider>
+    </nut-cell>
+    <h2>虚线</h2>
+    <nut-cell>
+      <nut-divider dashed>文本</nut-divider>
+    </nut-cell>
+    <h2>自定义样式</h2>
+    <nut-cell>
+      <nut-divider
+        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
+        >文本</nut-divider
+      >
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  props: {},
+  setup() {
+    return {};
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.demo {
+}
+</style>