diff --git a/src/packages/__VUE/divider/demo.vue b/src/packages/__VUE/divider/demo.vue
index 1964243294..21a5c238ac 100644
--- a/src/packages/__VUE/divider/demo.vue
+++ b/src/packages/__VUE/divider/demo.vue
@@ -1,52 +1,49 @@
 <template>
   <div class="demo full bg-w">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-divider />
-    <h2>{{ translate('withText') }}</h2>
-    <nut-divider>{{ translate('text') }}</nut-divider>
-    <h2>{{ translate('contentPosition') }}</h2>
-    <nut-divider content-position="left">{{ translate('text') }}</nut-divider>
-    <nut-divider content-position="right">{{ translate('text') }}</nut-divider>
-    <h2>{{ translate('dashed') }}</h2>
-    <nut-divider dashed>{{ translate('text') }}</nut-divider>
-    <h2>{{ translate('customStyle') }}</h2>
-    <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">{{
-      translate('text')
-    }}</nut-divider>
-    <h2>{{ translate('verticalDivider') }}</h2>
-    <div :style="{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }">
-      {{ translate('text') }}
-      <nut-divider direction="vertical" />
-      <a href="#" :style="{ color: '#1989fa' }">{{ translate('link') }}</a>
-      <nut-divider direction="vertical" />
-      <a href="#" :style="{ color: '#1989fa' }">{{ translate('link') }}</a>
-    </div>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('text') }}</h2>
+    <Text />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('dashed') }}</h2>
+    <Dashed />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('vertical') }}</h2>
+    <Vertical />
   </div>
 </template>
 
 <script setup lang="ts">
-import NutDivider from './index.vue';
+import Basic from './demo/basic.vue';
+import Text from './demo/text.vue';
+import Position from './demo/position.vue';
+import Dashed from './demo/dashed.vue';
+import Custom from './demo/custom.vue';
+import Vertical from './demo/vertical.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
+const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
-    withText: '展示文本',
-    contentPosition: '内容位置',
+    text: '展示文本',
+    position: '内容位置',
     dashed: '虚线',
-    customStyle: '自定义样式',
-    verticalDivider: '垂直分割线',
-    text: '文本',
-    link: '链接'
+    custom: '自定义样式',
+    vertical: '垂直分割线'
   },
   'en-US': {
     basic: 'Basic Usage',
-    withText: 'With Text',
-    contentPosition: 'Content Position',
+    text: 'With Text',
+    position: 'Content Position',
     dashed: 'Dashed',
-    customStyle: 'Custom Style',
-    verticalDivider: 'Vertical Divider',
-    text: 'Text',
-    link: 'Link'
+    custom: 'Custom Style',
+    vertical: 'Vertical Divider'
   }
 });
 </script>
diff --git a/src/packages/__VUE/divider/demo/basic.vue b/src/packages/__VUE/divider/demo/basic.vue
new file mode 100644
index 0000000000..d2b4f9635a
--- /dev/null
+++ b/src/packages/__VUE/divider/demo/basic.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-divider />
+</template>
diff --git a/src/packages/__VUE/divider/demo/custom.vue b/src/packages/__VUE/divider/demo/custom.vue
new file mode 100644
index 0000000000..48594270cb
--- /dev/null
+++ b/src/packages/__VUE/divider/demo/custom.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> text </nut-divider>
+</template>
diff --git a/src/packages/__VUE/divider/demo/dashed.vue b/src/packages/__VUE/divider/demo/dashed.vue
new file mode 100644
index 0000000000..0e45d81f88
--- /dev/null
+++ b/src/packages/__VUE/divider/demo/dashed.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-divider dashed> text </nut-divider>
+</template>
diff --git a/src/packages/__VUE/divider/demo/position.vue b/src/packages/__VUE/divider/demo/position.vue
new file mode 100644
index 0000000000..404a3b2c6c
--- /dev/null
+++ b/src/packages/__VUE/divider/demo/position.vue
@@ -0,0 +1,5 @@
+<template>
+  <nut-divider content-position="left"> text </nut-divider>
+  <nut-divider> text </nut-divider>
+  <nut-divider content-position="right"> text </nut-divider>
+</template>
diff --git a/src/packages/__VUE/divider/demo/text.vue b/src/packages/__VUE/divider/demo/text.vue
new file mode 100644
index 0000000000..7b2b831bdb
--- /dev/null
+++ b/src/packages/__VUE/divider/demo/text.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-divider> text </nut-divider>
+</template>
diff --git a/src/packages/__VUE/divider/demo/vertical.vue b/src/packages/__VUE/divider/demo/vertical.vue
new file mode 100644
index 0000000000..2978aa7201
--- /dev/null
+++ b/src/packages/__VUE/divider/demo/vertical.vue
@@ -0,0 +1,9 @@
+<template>
+  <div :style="{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }">
+    text1
+    <nut-divider direction="vertical" />
+    <a href="#" style="color: #1989fa"> link </a>
+    <nut-divider direction="vertical" />
+    text2
+  </div>
+</template>
diff --git a/src/packages/__VUE/divider/doc.en-US.md b/src/packages/__VUE/divider/doc.en-US.md
index 33b788dcbe..51ae46846e 100644
--- a/src/packages/__VUE/divider/doc.en-US.md
+++ b/src/packages/__VUE/divider/doc.en-US.md
@@ -18,106 +18,51 @@ app.use(Divider);
 
 Default render one horizontal divider line.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider />
-</template>
-```
-
-:::
+> demo: divider basic
 
 ### With Text
 
 Insert text into divider with default slot.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider>text</nut-divider>
-</template>
-```
-
-:::
+> demo: divider text
 
 ### Content Position
 
 Set Content Position with content-position attribute.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider content-position="left">text</nut-divider>
-  <nut-divider content-position="right">text</nut-divider>
-</template>
-```
-
-:::
+> demo: divider position
 
 ### Dashed
 
 Render dashed divider line with dashed attribute.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider dashed>text</nut-divider>
-</template>
-```
-
-:::
+> demo: divider dashed
 
 ### Custom Style
 
 User can custom divider style with style attribute.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">text</nut-divider>
-</template>
-```
-
-:::
+> demo: divider custom
 
 ### Vertical Divider
 
-:::demo
-
-```vue
-<template>
-  <div :style="{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }">
-    Text
-    <nut-divider direction="vertical" />
-    <a href="#" :style="{ color: '#1989fa' }">Link</a>
-    <nut-divider direction="vertical" />
-    <a href="#" :style="{ color: '#1989fa' }">Link</a>
-  </div>
-</template>
-```
-
-:::
+> demo: divider vertical
 
 ## API
 
 ### Props
 
-| Attribute        | Description                                        | Type    | Default      |
-| ---------------- | -------------------------------------------------- | ------- | ------------ |
-| dashed           | Whether to use dashed border                       | boolean | `false`      |
-| hairline         | Whether to use hairline                            | boolean | `true`       |
-| content-position | Content position, can be set to `left` or `right`  | string  | `center`     |
-| direction        | The direction of divider, can to set to `vertical` | string  | `horizontal` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| dashed | Whether to use dashed border | boolean | `false` |
+| hairline | Whether to use hairline | boolean | `true` |
+| content-position | Content position, can be set to `left` or `right` | string | `center` |
+| direction | The direction of divider, can to set to `vertical` | string | `horizontal` |
 
 ### Slots
 
-| Name    | Description                                   |
-| ------- | --------------------------------------------- |
+| Name | Description |
+| --- | --- |
 | default | Default slot, when `direction` = `horizontal` |
 
 ## Theming
@@ -126,15 +71,15 @@ User can custom divider style with style attribute.
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                               | Default Value            |
-| ---------------------------------- | ------------------------ |
-| --nut-divider-margin               | _16px 0_                 |
-| --nut-divider-text-font-size       | _var(--nut-font-size-2)_ |
-| --nut-divider-text-color           | _#909ca4_                |
-| --nut-divider-line-height          | _2px_                    |
-| --nut-divider-before-margin-right  | _16px_                   |
-| --nut-divider-after-margin-left    | _16px_                   |
-| --nut-divider-vertical-height      | _12px_                   |
-| --nut-divider-vertical-top         | _2px_                    |
-| --nut-divider-vertical-border-left | _rgba(0, 0, 0, 0.06)_    |
-| --nut-divider-vertical-margin      | _0 8px_                  |
+| Name | Default Value |
+| --- | --- |
+| --nut-divider-margin | _16px 0_ |
+| --nut-divider-text-font-size | _var(--nut-font-size-2)_ |
+| --nut-divider-text-color | _#909ca4_ |
+| --nut-divider-line-height | _2px_ |
+| --nut-divider-before-margin-right | _16px_ |
+| --nut-divider-after-margin-left | _16px_ |
+| --nut-divider-vertical-height | _12px_ |
+| --nut-divider-vertical-top | _2px_ |
+| --nut-divider-vertical-border-left | _rgba(0, 0, 0, 0.06)_ |
+| --nut-divider-vertical-margin | _0 8px_ |
diff --git a/src/packages/__VUE/divider/doc.md b/src/packages/__VUE/divider/doc.md
index f9bc76d892..2f5d8af006 100644
--- a/src/packages/__VUE/divider/doc.md
+++ b/src/packages/__VUE/divider/doc.md
@@ -18,106 +18,51 @@ app.use(Divider);
 
 默认渲染一条水平分割线。
 
-:::demo
-
-```vue
-<template>
-  <nut-divider />
-</template>
-```
-
-:::
+> demo: divider basic
 
 ### 展示文本
 
 通过插槽可以在分割线中间插入内容。
 
-:::demo
-
-```vue
-<template>
-  <nut-divider>文本</nut-divider>
-</template>
-```
-
-:::
+> demo: divider text
 
 ### 内容位置
 
 通过 content-position 指定内容所在位置。
 
-:::demo
-
-```vue
-<template>
-  <nut-divider content-position="left">文本</nut-divider>
-  <nut-divider content-position="right">文本</nut-divider>
-</template>
-```
-
-:::
+> demo: divider position
 
 ### 虚线
 
 添加 dashed 属性使分割线渲染为虚线。
 
-:::demo
-
-```vue
-<template>
-  <nut-divider dashed>文本</nut-divider>
-</template>
-```
-
-:::
+> demo: divider dashed
 
 ### 自定义样式
 
 可以直接通过 style 属性设置分割线的样式。
 
-:::demo
-
-```vue
-<template>
-  <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文本</nut-divider>
-</template>
-```
-
-:::
+> demo: divider custom
 
 ### 垂直分割线
 
-:::demo
-
-```vue
-<template>
-  <div :style="{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }">
-    文本
-    <nut-divider direction="vertical" />
-    <a href="#" :style="{ color: '#1989fa' }">链接</a>
-    <nut-divider direction="vertical" />
-    <a href="#" :style="{ color: '#1989fa' }">链接</a>
-  </div>
-</template>
-```
-
-:::
+> demo: divider vertical
 
 ## API
 
 ### Props
 
-| 参数             | 说明                                | 类型    | 默认值       |
-| ---------------- | ----------------------------------- | ------- | ------------ |
-| dashed           | 是否使用虚线                        | boolean | `false`      |
-| hairline         | 是否使用 `0.5px` 线                 | boolean | `true`       |
-| content-position | 内容位置，可选值为 `left`、`right`  | string  | `center`     |
-| direction        | 水平还是垂直类型，可选值 `vertical` | string  | `horizontal` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| dashed | 是否使用虚线 | boolean | `false` |
+| hairline | 是否使用 `0.5px` 线 | boolean | `true` |
+| content-position | 内容位置，可选值为 `left`、`right` | string | `center` |
+| direction | 水平还是垂直类型，可选值 `vertical` | string | `horizontal` |
 
 ### Slots
 
-| 名称    | 说明                                          |
-| ------- | --------------------------------------------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 内容，仅在 `direction` 为 `horizontal` 时生效 |
 
 ## 主题定制
@@ -126,15 +71,15 @@ app.use(Divider);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                               | 默认值                   |
-| ---------------------------------- | ------------------------ |
-| --nut-divider-margin               | _16px 0_                 |
-| --nut-divider-text-font-size       | _var(--nut-font-size-2)_ |
-| --nut-divider-text-color           | _#909ca4_                |
-| --nut-divider-line-height          | _2px_                    |
-| --nut-divider-before-margin-right  | _16px_                   |
-| --nut-divider-after-margin-left    | _16px_                   |
-| --nut-divider-vertical-height      | _12px_                   |
-| --nut-divider-vertical-top         | _2px_                    |
-| --nut-divider-vertical-border-left | _rgba(0, 0, 0, 0.06)_    |
-| --nut-divider-vertical-margin      | _0 8px_                  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-divider-margin | _16px 0_ |
+| --nut-divider-text-font-size | _var(--nut-font-size-2)_ |
+| --nut-divider-text-color | _#909ca4_ |
+| --nut-divider-line-height | _2px_ |
+| --nut-divider-before-margin-right | _16px_ |
+| --nut-divider-after-margin-left | _16px_ |
+| --nut-divider-vertical-height | _12px_ |
+| --nut-divider-vertical-top | _2px_ |
+| --nut-divider-vertical-border-left | _rgba(0, 0, 0, 0.06)_ |
+| --nut-divider-vertical-margin | _0 8px_ |
diff --git a/src/packages/__VUE/divider/index.taro.vue b/src/packages/__VUE/divider/index.taro.vue
index c601962716..fb25ac45f0 100644
--- a/src/packages/__VUE/divider/index.taro.vue
+++ b/src/packages/__VUE/divider/index.taro.vue
@@ -7,7 +7,7 @@
 import { PropType, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { DividerDirection, DividerPosition } from './types';
-const { componentName, create } = createComponent('divider');
+const { create } = createComponent('divider');
 
 export default create({
   props: {
@@ -30,7 +30,7 @@ export default create({
   },
   setup(props, context) {
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-divider';
       if (props.direction === 'horizontal') {
         return {
           [prefixCls]: true,
diff --git a/src/packages/__VUE/divider/index.vue b/src/packages/__VUE/divider/index.vue
index c601962716..fb25ac45f0 100644
--- a/src/packages/__VUE/divider/index.vue
+++ b/src/packages/__VUE/divider/index.vue
@@ -7,7 +7,7 @@
 import { PropType, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { DividerDirection, DividerPosition } from './types';
-const { componentName, create } = createComponent('divider');
+const { create } = createComponent('divider');
 
 export default create({
   props: {
@@ -30,7 +30,7 @@ export default create({
   },
   setup(props, context) {
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-divider';
       if (props.direction === 'horizontal') {
         return {
           [prefixCls]: true,