refactor(divider): final version

src/divider/divider.en-US.md

@@ -0,0 +1,13 @@
+:: BASE_DOC ::
+
+## API
+
+### Divider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+align | String | center | options：left/right/center | N
+content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+dashed | Boolean | false | \- | N
+default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+layout | String | horizontal | options：horizontal/vertical | N

src/divider/divider.md

@@ -6,7 +6,7 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
-content | String / Slot / Function | - | 子元素。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+content | String / Slot / Function | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
-default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N

src/divider/divider.vue

@@ -1,43 +1,34 @@
 <template>
-  <div role="separator" :class="{ [`${name}--vertical-center`]: layout === 'vertical' }">
-    <div :class="dividerClass" :style="`border-color:${lineColor}`">
-      <div :class="`${name}__content`">
-        <t-node :content="dividerContent" />
-      </div>
+  <div :class="rootClass" role="separator">
+    <div :class="`${name}__content`">
+      <t-node :content="dividerContent" />
     </div>
   </div>
 </template>
 <script lang="ts">
-import { computed, toRefs, defineComponent, getCurrentInstance } from 'vue';
+import { computed, defineProps, getCurrentInstance } from 'vue';
 import { renderContent, TNode } from '../shared';
 import DividerProps from './props';
 import config from '../config';
 
 const { prefix } = config;
 const name = `${prefix}-divider`;
 
-export default defineComponent({
+export default {
   name,
-  components: { TNode },
-  props: DividerProps,
-  setup(props) {
-    const internalInstance = getCurrentInstance();
-    const dividerContent = computed(() => renderContent(internalInstance, 'default', 'content'));
-    const dividerClass = computed(() => [
-      `${name}`,
-      `${name}--${props.layout}`,
-      `${name}--${props.align}`,
-      {
-        [`${name}--dashed`]: props.dashed,
-      },
-    ]);
+};
+</script>
 
-    return {
-      name,
-      ...toRefs(props),
-      dividerContent,
-      dividerClass,
-    };
+<script lang="ts" setup>
+const props = defineProps(DividerProps);
+const internalInstance = getCurrentInstance();
+const dividerContent = computed(() => renderContent(internalInstance, 'default', 'content'));
+const rootClass = computed(() => [
+  `${name}`,
+  `${name}--${props.layout}`,
+  `${name}--${props.align}`,
+  {
+    [`${name}--dashed`]: props.dashed,
   },
-});
+]);
 </script>

src/divider/props.ts

@@ -36,9 +36,4 @@ export default {
       return ['horizontal', 'vertical'].includes(val);
     },
   },
-  /** 分隔线颜色 */
-  lineColor: {
-    type: String,
-    default: '',
-  },
 };

src/divider/type.ts

@@ -30,9 +30,4 @@ export interface TdDividerProps {
    * @default horizontal
    */
   layout?: 'horizontal' | 'vertical';
-  /**
-   * 分隔线颜色
-   * @default ''
-   */
-  lineColor?: string;
 }