From 4c41908ac1eed2bf4f7c713f4b25e04f1248c44b Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 11 Aug 2021 10:55:10 +0800
Subject: [PATCH] refactor: demo using script setup (#9235)

---
 src/action-bar/demo/index.vue             |  85 ++--
 src/action-sheet/demo/index.vue           | 160 +++----
 src/address-edit/demo/index.vue           |  61 +--
 src/address-list/demo/index.vue           |  55 +--
 src/area/demo/index.vue                   |  59 +--
 src/badge/demo/index.vue                  |  47 +-
 src/button/demo/index.vue                 | 139 +++---
 src/calendar/demo/index.vue               | 541 +++++++++++-----------
 src/card/demo/index.vue                   |  46 +-
 src/cascader/demo/index.vue               | 363 +++++++--------
 src/cell/demo/index.vue                   |  83 ++--
 src/checkbox/demo/index.vue               | 283 ++++++-----
 src/circle/demo/index.vue                 | 188 ++++----
 src/col/demo/index.vue                    |  39 +-
 src/collapse/demo/index.vue               |  69 ++-
 src/config-provider/demo/index.vue        | 138 +++---
 src/contact-card/demo/index.vue           |  77 ++-
 src/contact-edit/demo/index.vue           |  47 +-
 src/contact-list/demo/index.vue           |  60 +--
 src/count-down/demo/index.vue             | 108 ++---
 src/coupon-list/demo/index.vue            | 179 ++++---
 src/datetime-picker/demo/index.vue        | 150 +++---
 src/dialog/demo/index.vue                 | 173 ++++---
 src/divider/demo/index.vue                |  51 +-
 src/dropdown-menu/demo/index.vue          | 167 ++++---
 src/empty/demo/index.vue                  |  67 ++-
 src/field/demo/Autosize.vue               |  42 +-
 src/field/demo/BasicUsage.vue             |  35 +-
 src/field/demo/CustomType.vue             | 101 ++--
 src/field/demo/Disabled.vue               |  44 +-
 src/field/demo/ErrorInfo.vue              |  65 ++-
 src/field/demo/FormatValue.vue            |  66 ++-
 src/field/demo/InputAlign.vue             |  38 +-
 src/field/demo/InsertButton.vue           |  52 +--
 src/field/demo/ShowIcon.vue               |  65 ++-
 src/field/demo/ShowWordLimit.vue          |  46 +-
 src/field/demo/index.vue                  |  41 +-
 src/form/demo/BasicUsage.vue              | 101 ++--
 src/form/demo/FieldType.vue               | 204 ++++----
 src/form/demo/FieldTypeArea.vue           |  86 ++--
 src/form/demo/FieldTypeCalendar.vue       |  69 ++-
 src/form/demo/FieldTypeDatetimePicker.vue |  72 ++-
 src/form/demo/FieldTypePicker.vue         |  80 ++--
 src/form/demo/ValidateRules.vue           | 154 +++---
 src/form/demo/index.vue                   |  20 +-
 src/grid/demo/index.vue                   |  75 ++-
 src/icon/demo/index.vue                   | 189 ++++----
 src/image-preview/demo/index.vue          | 149 +++---
 src/image/demo/index.vue                  |  66 ++-
 src/index-bar/demo/index.vue              |  62 ++-
 src/lazyload/demo/index.vue               |  71 ++-
 src/list/demo/index.vue                   | 175 ++++---
 src/loading/demo/index.vue                |  55 +--
 src/nav-bar/demo/index.vue                |  46 +-
 src/notice-bar/demo/index.vue             |  63 ++-
 src/notify/demo/index.vue                 | 136 +++---
 src/number-keyboard/demo/index.vue        | 111 ++---
 src/overlay/demo/index.vue                |  51 +-
 src/pagination/demo/index.vue             |  67 ++-
 src/password-input/demo/index.vue         | 255 +++++-----
 src/picker/demo/index.vue                 | 268 +++++------
 src/popover/demo/index.vue                | 196 ++++----
 src/popup/demo/index.vue                  | 103 ++--
 src/progress/demo/index.vue               |  43 +-
 src/pull-refresh/demo/index.vue           | 123 +++--
 src/radio/demo/index.vue                  | 101 ++--
 src/rate/demo/index.vue                   |  98 ++--
 src/search/demo/index.vue                 |  89 ++--
 src/share-sheet/demo/index.vue            | 222 ++++-----
 src/sidebar/demo/index.vue                |  68 ++-
 src/skeleton/demo/index.vue               |  57 +--
 src/slider/demo/index.vue                 | 100 ++--
 src/stepper/demo/index.vue                | 116 +++--
 src/steps/demo/index.vue                  |  92 ++--
 src/sticky/demo/index.vue                 |  51 +-
 src/style/demo/index.vue                  |  80 ++--
 src/submit-bar/demo/index.vue             |  78 ++--
 src/swipe-cell/demo/index.vue             | 100 ++--
 src/swipe/demo/index.vue                  |  78 ++--
 src/switch/demo/index.vue                 |  99 ++--
 src/tab/demo/index.vue                    | 132 +++---
 src/tabbar/demo/index.vue                 |  91 ++--
 src/tag/demo/index.vue                    | 100 ++--
 src/toast/demo/index.vue                  | 190 ++++----
 src/tree-select/demo/index.vue            | 108 ++---
 src/uploader/demo/index.vue               | 258 +++++------
 86 files changed, 4277 insertions(+), 5151 deletions(-)

diff --git a/src/action-bar/demo/index.vue b/src/action-bar/demo/index.vue
index fd7809732..add8ccea1 100644
--- a/src/action-bar/demo/index.vue
+++ b/src/action-bar/demo/index.vue
@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    icon1: '客服',
+    icon2: '购物车',
+    icon3: '店铺',
+    button1: '加入购物车',
+    button2: '立即购买',
+    iconBadge: '徽标提示',
+    collected: '已收藏',
+    clickIcon: '点击图标',
+    clickButton: '点击按钮',
+    customIconColor: '自定义图标颜色',
+    customButtonColor: '自定义按钮颜色',
+  },
+  'en-US': {
+    icon1: 'Icon1',
+    icon2: 'Icon2',
+    icon3: 'Icon3',
+    button1: 'Button',
+    button2: 'Button',
+    iconBadge: 'Icon Badge',
+    collected: 'Collected',
+    clickIcon: 'Click Icon',
+    clickButton: 'Click Button',
+    customIconColor: 'Custom Icon Color',
+    customButtonColor: 'Custom Button Color',
+  },
+};
+
+const t = useTranslate(i18n);
+const onClickIcon = () => Toast(t('clickIcon'));
+const onClickButton = () => Toast(t('clickButton'));
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-action-bar>
@@ -62,53 +100,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    icon1: '客服',
-    icon2: '购物车',
-    icon3: '店铺',
-    button1: '加入购物车',
-    button2: '立即购买',
-    iconBadge: '徽标提示',
-    collected: '已收藏',
-    clickIcon: '点击图标',
-    clickButton: '点击按钮',
-    customIconColor: '自定义图标颜色',
-    customButtonColor: '自定义按钮颜色',
-  },
-  'en-US': {
-    icon1: 'Icon1',
-    icon2: 'Icon2',
-    icon3: 'Icon3',
-    button1: 'Button',
-    button2: 'Button',
-    iconBadge: 'Icon Badge',
-    collected: 'Collected',
-    clickIcon: 'Click Icon',
-    clickButton: 'Click Button',
-    customIconColor: 'Custom Icon Color',
-    customButtonColor: 'Custom Button Color',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const onClickIcon = () => Toast(t('clickIcon'));
-    const onClickButton = () => Toast(t('clickButton'));
-    return {
-      t,
-      onClickIcon,
-      onClickButton,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 .demo-action-bar {
   .van-action-bar {
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index c78cccf66..3f680d806 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -1,3 +1,75 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { ActionSheetAction } from '..';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    option1: '选项一',
+    option2: '选项二',
+    option3: '选项三',
+    subname: '描述信息',
+    showCancel: '展示取消按钮',
+    buttonText: '弹出菜单',
+    customPanel: '自定义面板',
+    description: '这是一段描述信息',
+    optionStatus: '选项状态',
+    coloredOption: '着色选项',
+    disabledOption: '禁用选项',
+    showDescription: '展示描述信息',
+  },
+  'en-US': {
+    option1: 'Option 1',
+    option2: 'Option 2',
+    option3: 'Option 3',
+    subname: 'Description',
+    showCancel: 'Show Cancel Button',
+    buttonText: 'Show ActionSheet',
+    customPanel: 'Custom Panel',
+    description: 'Description',
+    optionStatus: 'Option Status',
+    coloredOption: 'Colored Option',
+    disabledOption: 'Disabled Option',
+    showDescription: 'Show Description',
+  },
+};
+
+const t = useTranslate(i18n);
+const show = reactive({
+  basic: false,
+  cancel: false,
+  title: false,
+  status: false,
+  description: false,
+});
+
+const simpleActions = computed<ActionSheetAction[]>(() => [
+  { name: t('option1') },
+  { name: t('option2') },
+  { name: t('option3') },
+]);
+
+const statusActions = computed<ActionSheetAction[]>(() => [
+  { name: t('coloredOption'), color: '#ee0a24' },
+  { name: t('disabledOption'), disabled: true },
+  { loading: true },
+]);
+
+const actionsWithDescription = computed<ActionSheetAction[]>(() => [
+  { name: t('option1') },
+  { name: t('option2') },
+  { name: t('option3'), subname: t('subname') },
+]);
+
+const onSelect = (item: ActionSheetAction) => {
+  show.basic = false;
+  Toast(item.name);
+};
+
+const onCancel = () => Toast(t('cancel'));
+</script>
+
 <template>
   <demo-block card :title="t('basicUsage')">
     <van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
@@ -51,94 +123,6 @@
   </van-action-sheet>
 </template>
 
-<script lang="ts">
-import { computed, reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { ActionSheetAction } from '..';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    option1: '选项一',
-    option2: '选项二',
-    option3: '选项三',
-    subname: '描述信息',
-    showCancel: '展示取消按钮',
-    buttonText: '弹出菜单',
-    customPanel: '自定义面板',
-    description: '这是一段描述信息',
-    optionStatus: '选项状态',
-    coloredOption: '着色选项',
-    disabledOption: '禁用选项',
-    showDescription: '展示描述信息',
-  },
-  'en-US': {
-    option1: 'Option 1',
-    option2: 'Option 2',
-    option3: 'Option 3',
-    subname: 'Description',
-    showCancel: 'Show Cancel Button',
-    buttonText: 'Show ActionSheet',
-    customPanel: 'Custom Panel',
-    description: 'Description',
-    optionStatus: 'Option Status',
-    coloredOption: 'Colored Option',
-    disabledOption: 'Disabled Option',
-    showDescription: 'Show Description',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      show: {
-        basic: false,
-        cancel: false,
-        title: false,
-        status: false,
-        description: false,
-      },
-    });
-
-    const simpleActions = computed<ActionSheetAction[]>(() => [
-      { name: t('option1') },
-      { name: t('option2') },
-      { name: t('option3') },
-    ]);
-
-    const statusActions = computed<ActionSheetAction[]>(() => [
-      { name: t('coloredOption'), color: '#ee0a24' },
-      { name: t('disabledOption'), disabled: true },
-      { loading: true },
-    ]);
-
-    const actionsWithDescription = computed<ActionSheetAction[]>(() => [
-      { name: t('option1') },
-      { name: t('option2') },
-      { name: t('option3'), subname: t('subname') },
-    ]);
-
-    const onSelect = (item: ActionSheetAction) => {
-      state.show.basic = false;
-      Toast(item.name);
-    };
-
-    const onCancel = () => Toast(t('cancel'));
-
-    return {
-      ...toRefs(state),
-      t,
-      onSelect,
-      onCancel,
-      simpleActions,
-      statusActions,
-      actionsWithDescription,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/address-edit/demo/index.vue b/src/address-edit/demo/index.vue
index 165ddb9af..ce3a676b3 100644
--- a/src/address-edit/demo/index.vue
+++ b/src/address-edit/demo/index.vue
@@ -1,21 +1,4 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-address-edit
-      :area-list="areaList"
-      show-postal
-      show-delete
-      show-set-default
-      show-search-result
-      :search-result="searchResult"
-      :area-columns-placeholder="t('areaColumnsPlaceholder')"
-      @save="onSave"
-      @delete="onDelete"
-      @change-detail="onChangeDetail"
-    />
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { areaList } from '@vant/area-data';
 import { useTranslate } from '@demo/use-translate';
@@ -56,29 +39,33 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const searchResult = ref([]);
+const t = useTranslate(i18n);
+const searchResult = ref([]);
 
-    const onSave = () => Toast(t('save'));
-    const onDelete = () => Toast(t('delete'));
-    const onChangeDetail = (val: string) => {
-      searchResult.value = val ? t('searchResult') : [];
-    };
-
-    return {
-      t,
-      onSave,
-      onDelete,
-      areaList,
-      searchResult,
-      onChangeDetail,
-    };
-  },
+const onSave = () => Toast(t('save'));
+const onDelete = () => Toast(t('delete'));
+const onChangeDetail = (val: string) => {
+  searchResult.value = val ? t('searchResult') : [];
 };
 </script>
 
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-address-edit
+      :area-list="areaList"
+      show-postal
+      show-delete
+      show-set-default
+      show-search-result
+      :search-result="searchResult"
+      :area-columns-placeholder="t('areaColumnsPlaceholder')"
+      @save="onSave"
+      @delete="onDelete"
+      @change-detail="onChangeDetail"
+    />
+  </demo-block>
+</template>
+
 <style lang="less">
 .demo-address-edit {
   .van-doc-demo-block__title {
diff --git a/src/address-list/demo/index.vue b/src/address-list/demo/index.vue
index 83ac7f767..f59a9a726 100644
--- a/src/address-list/demo/index.vue
+++ b/src/address-list/demo/index.vue
@@ -1,18 +1,4 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-address-list
-      v-model="chosenAddressId"
-      :list="t('list')"
-      :disabled-list="t('disabledList')"
-      :disabled-text="t('disabledText')"
-      :default-tag-text="t('defaultTagText')"
-      @add="onAdd"
-      @edit="onEdit"
-    />
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
@@ -78,27 +64,30 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const chosenAddressId = ref('1');
-    const onAdd = () => {
-      Toast(t('add'));
-    };
-    const onEdit = (item: unknown, index: number) => {
-      Toast(`${t('edit')}:${index}`);
-    };
-
-    return {
-      t,
-      onAdd,
-      onEdit,
-      chosenAddressId,
-    };
-  },
+const t = useTranslate(i18n);
+const chosenAddressId = ref('1');
+const onAdd = () => {
+  Toast(t('add'));
+};
+const onEdit = (item: unknown, index: number) => {
+  Toast(`${t('edit')}:${index}`);
 };
 </script>
 
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-address-list
+      v-model="chosenAddressId"
+      :list="t('list')"
+      :disabled-list="t('disabledList')"
+      :disabled-text="t('disabledText')"
+      :default-tag-text="t('defaultTagText')"
+      @add="onAdd"
+      @edit="onEdit"
+    />
+  </demo-block>
+</template>
+
 <style lang="less">
 .demo-address-list {
   .van-doc-demo-block__title {
diff --git a/src/area/demo/index.vue b/src/area/demo/index.vue
index 5e2aa9b77..809eb67b7 100644
--- a/src/area/demo/index.vue
+++ b/src/area/demo/index.vue
@@ -1,26 +1,4 @@
-<template>
-  <demo-block card :title="t('basicUsage')">
-    <van-area :title="t('title')" :area-list="t('areaList')" />
-  </demo-block>
-
-  <demo-block card :title="t('title2')">
-    <van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
-  </demo-block>
-
-  <demo-block card :title="t('title3')">
-    <van-area :title="t('title')" :area-list="t('areaList')" :columns-num="2" />
-  </demo-block>
-
-  <demo-block card :title="t('title4')">
-    <van-area
-      :title="t('title')"
-      :area-list="t('areaList')"
-      :columns-placeholder="t('columnsPlaceholder')"
-    />
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { areaList } from '@vant/area-data';
 import { areaListEn } from './area-en';
@@ -43,15 +21,28 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = ref('330302');
-
-    return {
-      t,
-      value,
-    };
-  },
-};
+const t = useTranslate(i18n);
+const value = ref('330302');
 </script>
+
+<template>
+  <demo-block card :title="t('basicUsage')">
+    <van-area :title="t('title')" :area-list="t('areaList')" />
+  </demo-block>
+
+  <demo-block card :title="t('title2')">
+    <van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
+  </demo-block>
+
+  <demo-block card :title="t('title3')">
+    <van-area :title="t('title')" :area-list="t('areaList')" :columns-num="2" />
+  </demo-block>
+
+  <demo-block card :title="t('title4')">
+    <van-area
+      :title="t('title')"
+      :area-list="t('areaList')"
+      :columns-placeholder="t('columnsPlaceholder')"
+    />
+  </demo-block>
+</template>
diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index 8394dc342..a00aacd97 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    max: '最大值',
+    standalone: '独立展示',
+    customColor: '自定义颜色',
+    customContent: '自定义徽标内容',
+  },
+  'en-US': {
+    max: 'Max',
+    standalone: 'Standalone',
+    customColor: 'Custom Color',
+    customContent: 'Custom Content',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-badge content="5">
@@ -65,32 +86,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    max: '最大值',
-    standalone: '独立展示',
-    customColor: '自定义颜色',
-    customContent: '自定义徽标内容',
-  },
-  'en-US': {
-    max: 'Max',
-    standalone: 'Standalone',
-    customColor: 'Custom Color',
-    customContent: 'Custom Content',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index 8d0ebd226..d1019475e 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -1,3 +1,70 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    type: '按钮类型',
+    size: '按钮尺寸',
+    icon: '图标按钮',
+    loading: '加载状态',
+    shape: '按钮形状',
+    default: '默认按钮',
+    primary: '主要按钮',
+    success: '成功按钮',
+    danger: '危险按钮',
+    warning: '警告按钮',
+    large: '大号按钮',
+    normal: '普通按钮',
+    small: '小型按钮',
+    mini: '迷你按钮',
+    plain: '朴素按钮',
+    square: '方形按钮',
+    round: '圆形按钮',
+    hairline: '细边框',
+    hairlineButton: '细边框按钮',
+    loadingText: '加载中...',
+    router: '页面导航',
+    urlRoute: 'URL 跳转',
+    vueRoute: '路由跳转',
+    customColor: '自定义颜色',
+    pure: '单色按钮',
+    gradient: '渐变色按钮',
+    blockElement: '块级元素',
+  },
+  'en-US': {
+    type: 'Type',
+    size: 'Size',
+    icon: 'Icon',
+    loading: 'Loading',
+    shape: 'Shape',
+    default: 'Default',
+    primary: 'Primary',
+    success: 'Success',
+    danger: 'Danger',
+    warning: 'Warning',
+    large: 'Large',
+    normal: 'Normal',
+    small: 'Small',
+    mini: 'Mini',
+    plain: 'Plain',
+    square: 'Square',
+    round: 'Round',
+    hairline: 'Hairline',
+    hairlineButton: 'Hairline',
+    loadingText: 'Loading...',
+    router: 'Router',
+    urlRoute: 'URL',
+    vueRoute: 'Vue Router',
+    customColor: 'Custom Color',
+    pure: 'Pure',
+    gradient: 'Gradient',
+    blockElement: 'Block Element',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('type')">
     <div class="demo-button-row">
@@ -72,78 +139,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    type: '按钮类型',
-    size: '按钮尺寸',
-    icon: '图标按钮',
-    loading: '加载状态',
-    shape: '按钮形状',
-    default: '默认按钮',
-    primary: '主要按钮',
-    success: '成功按钮',
-    danger: '危险按钮',
-    warning: '警告按钮',
-    large: '大号按钮',
-    normal: '普通按钮',
-    small: '小型按钮',
-    mini: '迷你按钮',
-    plain: '朴素按钮',
-    square: '方形按钮',
-    round: '圆形按钮',
-    hairline: '细边框',
-    hairlineButton: '细边框按钮',
-    loadingText: '加载中...',
-    router: '页面导航',
-    urlRoute: 'URL 跳转',
-    vueRoute: '路由跳转',
-    customColor: '自定义颜色',
-    pure: '单色按钮',
-    gradient: '渐变色按钮',
-    blockElement: '块级元素',
-  },
-  'en-US': {
-    type: 'Type',
-    size: 'Size',
-    icon: 'Icon',
-    loading: 'Loading',
-    shape: 'Shape',
-    default: 'Default',
-    primary: 'Primary',
-    success: 'Success',
-    danger: 'Danger',
-    warning: 'Warning',
-    large: 'Large',
-    normal: 'Normal',
-    small: 'Small',
-    mini: 'Mini',
-    plain: 'Plain',
-    square: 'Square',
-    round: 'Round',
-    hairline: 'Hairline',
-    hairlineButton: 'Hairline',
-    loadingText: 'Loading...',
-    router: 'Router',
-    urlRoute: 'URL',
-    vueRoute: 'Vue Router',
-    customColor: 'Custom Color',
-    pure: 'Pure',
-    gradient: 'Gradient',
-    blockElement: 'Block Element',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index cd022246b..f6f8d3923 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -1,126 +1,5 @@
-<template>
-  <demo-block card :title="t('basicUsage')">
-    <van-cell
-      is-link
-      :title="t('selectSingle')"
-      :value="formatFullDate(date.selectSingle)"
-      @click="show('single', 'selectSingle')"
-    />
-
-    <van-cell
-      is-link
-      :title="t('selectMultiple')"
-      :value="formatMultiple(date.selectMultiple)"
-      @click="show('multiple', 'selectMultiple')"
-    />
-
-    <van-cell
-      is-link
-      :title="t('selectRange')"
-      :value="formatRange(date.selectRange)"
-      @click="show('range', 'selectRange')"
-    />
-  </demo-block>
-
-  <demo-block card :title="t('quickSelect')">
-    <van-cell
-      is-link
-      :title="t('selectSingle')"
-      :value="formatFullDate(date.quickSelect1)"
-      @click="show('single', 'quickSelect1')"
-    />
-
-    <van-cell
-      is-link
-      :title="t('selectRange')"
-      :value="formatRange(date.quickSelect2)"
-      @click="show('range', 'quickSelect2')"
-    />
-  </demo-block>
-
-  <demo-block card :title="t('customCalendar')">
-    <van-cell
-      is-link
-      :title="t('customColor')"
-      :value="formatRange(date.customColor)"
-      @click="show('range', 'customColor')"
-    />
-
-    <van-cell
-      is-link
-      :title="t('customRange')"
-      :value="formatFullDate(date.customRange)"
-      @click="show('single', 'customRange')"
-    />
-
-    <van-cell
-      is-link
-      :title="t('customConfirm')"
-      :value="formatRange(date.customConfirm)"
-      @click="show('range', 'customConfirm')"
-    />
-
-    <van-cell
-      is-link
-      :title="t('customDayText')"
-      :value="formatRange(date.customDayText)"
-      @click="show('range', 'customDayText')"
-    />
-
-    <van-cell
-      is-link
-      :title="t('customPosition')"
-      :value="formatFullDate(date.customPosition)"
-      @click="show('single', 'customPosition')"
-    />
-
-    <van-cell
-      is-link
-      :title="t('maxRange')"
-      :value="formatRange(date.maxRange)"
-      @click="show('range', 'maxRange')"
-    />
-
-    <van-cell
-      v-if="!isWeapp"
-      is-link
-      :title="t('firstDayOfWeek')"
-      @click="show('single', 'firstDayOfWeek')"
-    />
-  </demo-block>
-
-  <demo-block card :title="t('tiledDisplay')">
-    <van-calendar
-      :title="t('calendar')"
-      :poppable="false"
-      :show-confirm="false"
-      :min-date="tiledMinDate"
-      :max-date="tiledMaxDate"
-      :default-date="tiledMinDate"
-      :style="{ height: '500px' }"
-    />
-  </demo-block>
-
-  <van-calendar
-    v-model:show="showCalendar"
-    :type="type"
-    :color="color"
-    :round="round"
-    :position="position"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :max-range="maxRange"
-    :formatter="formatter"
-    :show-confirm="showConfirm"
-    :confirm-text="confirmText"
-    :confirm-disabled-text="confirmDisabledText"
-    :first-day-of-week="firstDayOfWeek"
-    @confirm="onConfirm"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import type { CalendarDayItem } from '../types';
 
@@ -175,161 +54,267 @@ const i18n = {
   },
 };
 
-export default defineComponent({
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive<Record<string, any>>({
-      date: {
-        maxRange: [],
-        selectSingle: null,
-        selectRange: [],
-        selectMultiple: [],
-        quickSelect1: null,
-        quickSelect2: [],
-        customColor: [],
-        customConfirm: [],
-        customRange: null,
-        customDayText: [],
-        customPosition: null,
-      },
-      type: 'single',
-      round: true,
-      color: undefined,
-      minDate: undefined,
-      maxDate: undefined,
-      maxRange: undefined,
-      position: undefined,
-      formatter: undefined,
-      showConfirm: false,
-      showCalendar: false,
-      tiledMinDate: new Date(2012, 0, 10),
-      tiledMaxDate: new Date(2012, 2, 20),
-      confirmText: undefined,
-      confirmDisabledText: undefined,
-      firstDayOfWeek: 0,
-    });
-
-    const resetSettings = () => {
-      state.round = true;
-      state.color = undefined;
-      state.minDate = undefined;
-      state.maxDate = undefined;
-      state.maxRange = undefined;
-      state.position = undefined;
-      state.formatter = undefined;
-      state.showConfirm = true;
-      state.confirmText = undefined;
-      state.confirmDisabledText = undefined;
-      state.firstDayOfWeek = 0;
-    };
-
-    const dayFormatter = (day: CalendarDayItem) => {
-      if (!day.date) {
-        return day;
-      }
-
-      const month = day.date.getMonth() + 1;
-      const date = day.date.getDate();
-
-      if (month === 5) {
-        if (date === 1) {
-          day.topInfo = t('laborDay');
-        } else if (date === 4) {
-          day.topInfo = t('youthDay');
-        } else if (date === 11) {
-          day.text = t('today');
-        }
-      }
-
-      if (day.type === 'start') {
-        day.bottomInfo = t('in');
-      } else if (day.type === 'end') {
-        day.bottomInfo = t('out');
-      }
-
-      return day;
-    };
-
-    const show = (type: string, id: string) => {
-      resetSettings();
-      state.id = id;
-      state.type = type;
-      state.showCalendar = true;
-
-      switch (id) {
-        case 'quickSelect1':
-        case 'quickSelect2':
-          state.showConfirm = false;
-          break;
-        case 'customColor':
-          state.color = '#1989fa';
-          break;
-        case 'customConfirm':
-          state.confirmText = t('confirmText');
-          state.confirmDisabledText = t('confirmDisabledText');
-          break;
-        case 'customRange':
-          state.minDate = new Date(2010, 0, 1);
-          state.maxDate = new Date(2010, 0, 31);
-          break;
-        case 'customDayText':
-          state.minDate = new Date(2010, 4, 1);
-          state.maxDate = new Date(2010, 4, 31);
-          state.formatter = dayFormatter;
-          break;
-        case 'customPosition':
-          state.round = false;
-          state.position = 'right';
-          break;
-        case 'maxRange':
-          state.maxRange = 3;
-          break;
-        case 'firstDayOfWeek':
-          state.firstDayOfWeek = 1;
-          break;
-      }
-    };
-
-    const formatDate = (date: Date) => {
-      if (date) {
-        return `${date.getMonth() + 1}/${date.getDate()}`;
-      }
-    };
-
-    const formatFullDate = (date: Date) => {
-      if (date) {
-        return `${date.getFullYear()}/${formatDate(date)}`;
-      }
-    };
-
-    const formatMultiple = (dates: Date[]) => {
-      if (dates.length) {
-        return t('selectCount', dates.length);
-      }
-    };
-
-    const formatRange = (dateRange: Date[]) => {
-      if (dateRange.length) {
-        const [start, end] = dateRange;
-        return `${formatDate(start)} - ${formatDate(end)}`;
-      }
-    };
-
-    const onConfirm = (date: Date | Date[]) => {
-      state.showCalendar = false;
-      state.date[state.id] = date;
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      show,
-      onConfirm,
-      formatDate,
-      formatRange,
-      formatFullDate,
-      formatMultiple,
-    };
+const t = useTranslate(i18n);
+const state = reactive<Record<string, any>>({
+  date: {
+    maxRange: [],
+    selectSingle: null,
+    selectRange: [],
+    selectMultiple: [],
+    quickSelect1: null,
+    quickSelect2: [],
+    customColor: [],
+    customConfirm: [],
+    customRange: null,
+    customDayText: [],
+    customPosition: null,
   },
+  type: 'single',
+  round: true,
+  color: undefined,
+  minDate: undefined,
+  maxDate: undefined,
+  maxRange: undefined,
+  position: undefined,
+  formatter: undefined,
+  showConfirm: false,
+  showCalendar: false,
+  tiledMinDate: new Date(2012, 0, 10),
+  tiledMaxDate: new Date(2012, 2, 20),
+  confirmText: undefined,
+  confirmDisabledText: undefined,
+  firstDayOfWeek: 0,
 });
+
+const resetSettings = () => {
+  state.round = true;
+  state.color = undefined;
+  state.minDate = undefined;
+  state.maxDate = undefined;
+  state.maxRange = undefined;
+  state.position = undefined;
+  state.formatter = undefined;
+  state.showConfirm = true;
+  state.confirmText = undefined;
+  state.confirmDisabledText = undefined;
+  state.firstDayOfWeek = 0;
+};
+
+const dayFormatter = (day: CalendarDayItem) => {
+  if (!day.date) {
+    return day;
+  }
+
+  const month = day.date.getMonth() + 1;
+  const date = day.date.getDate();
+
+  if (month === 5) {
+    if (date === 1) {
+      day.topInfo = t('laborDay');
+    } else if (date === 4) {
+      day.topInfo = t('youthDay');
+    } else if (date === 11) {
+      day.text = t('today');
+    }
+  }
+
+  if (day.type === 'start') {
+    day.bottomInfo = t('in');
+  } else if (day.type === 'end') {
+    day.bottomInfo = t('out');
+  }
+
+  return day;
+};
+
+const show = (type: string, id: string) => {
+  resetSettings();
+  state.id = id;
+  state.type = type;
+  state.showCalendar = true;
+
+  switch (id) {
+    case 'quickSelect1':
+    case 'quickSelect2':
+      state.showConfirm = false;
+      break;
+    case 'customColor':
+      state.color = '#1989fa';
+      break;
+    case 'customConfirm':
+      state.confirmText = t('confirmText');
+      state.confirmDisabledText = t('confirmDisabledText');
+      break;
+    case 'customRange':
+      state.minDate = new Date(2010, 0, 1);
+      state.maxDate = new Date(2010, 0, 31);
+      break;
+    case 'customDayText':
+      state.minDate = new Date(2010, 4, 1);
+      state.maxDate = new Date(2010, 4, 31);
+      state.formatter = dayFormatter;
+      break;
+    case 'customPosition':
+      state.round = false;
+      state.position = 'right';
+      break;
+    case 'maxRange':
+      state.maxRange = 3;
+      break;
+    case 'firstDayOfWeek':
+      state.firstDayOfWeek = 1;
+      break;
+  }
+};
+
+const formatDate = (date: Date) => {
+  if (date) {
+    return `${state.date.getMonth() + 1}/${state.date.getDate()}`;
+  }
+};
+
+const formatFullDate = (date: Date) => {
+  if (date) {
+    return `${state.date.getFullYear()}/${formatDate(date)}`;
+  }
+};
+
+const formatMultiple = (dates: Date[]) => {
+  if (dates.length) {
+    return t('selectCount', dates.length);
+  }
+};
+
+const formatRange = (dateRange: Date[]) => {
+  if (dateRange.length) {
+    const [start, end] = dateRange;
+    return `${formatDate(start)} - ${formatDate(end)}`;
+  }
+};
+
+const onConfirm = (date: Date | Date[]) => {
+  state.showCalendar = false;
+  state.date[state.id] = date;
+};
 </script>
+
+<template>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell
+      is-link
+      :title="t('selectSingle')"
+      :value="formatFullDate(state.date.selectSingle)"
+      @click="show('single', 'selectSingle')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('selectMultiple')"
+      :value="formatMultiple(state.date.selectMultiple)"
+      @click="show('multiple', 'selectMultiple')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('selectRange')"
+      :value="formatRange(state.date.selectRange)"
+      @click="show('range', 'selectRange')"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('quickSelect')">
+    <van-cell
+      is-link
+      :title="t('selectSingle')"
+      :value="formatFullDate(state.date.quickSelect1)"
+      @click="show('single', 'quickSelect1')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('selectRange')"
+      :value="formatRange(state.date.quickSelect2)"
+      @click="show('range', 'quickSelect2')"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('customCalendar')">
+    <van-cell
+      is-link
+      :title="t('customColor')"
+      :value="formatRange(state.date.customColor)"
+      @click="show('range', 'customColor')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('customRange')"
+      :value="formatFullDate(state.date.customRange)"
+      @click="show('single', 'customRange')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('customConfirm')"
+      :value="formatRange(state.date.customConfirm)"
+      @click="show('range', 'customConfirm')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('customDayText')"
+      :value="formatRange(state.date.customDayText)"
+      @click="show('range', 'customDayText')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('customPosition')"
+      :value="formatFullDate(state.date.customPosition)"
+      @click="show('single', 'customPosition')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('maxRange')"
+      :value="formatRange(state.date.maxRange)"
+      @click="show('range', 'maxRange')"
+    />
+
+    <van-cell
+      v-if="!isWeapp"
+      is-link
+      :title="t('firstDayOfWeek')"
+      @click="show('single', 'firstDayOfWeek')"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('tiledDisplay')">
+    <van-calendar
+      :title="t('calendar')"
+      :poppable="false"
+      :show-confirm="false"
+      :min-date="state.tiledMinDate"
+      :max-date="state.tiledMaxDate"
+      :default-date="state.tiledMinDate"
+      :style="{ height: '500px' }"
+    />
+  </demo-block>
+
+  <van-calendar
+    v-model:show="state.showCalendar"
+    :type="state.type"
+    :color="state.color"
+    :round="state.round"
+    :position="state.position"
+    :min-date="state.minDate"
+    :max-date="state.maxDate"
+    :max-range="state.maxRange"
+    :formatter="state.formatter"
+    :show-confirm="state.showConfirm"
+    :confirm-text="state.confirmText"
+    :first-day-of-week="state.firstDayOfWeek"
+    :confirm-disabled-text="state.confirmDisabledText"
+    @confirm="onConfirm"
+  />
+</template>
diff --git a/src/card/demo/index.vue b/src/card/demo/index.vue
index ccb54765f..143f975ce 100644
--- a/src/card/demo/index.vue
+++ b/src/card/demo/index.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    title: '商品名称',
+    discountInfo: '营销信息',
+    customContent: '自定义内容',
+  },
+  'en-US': {
+    discountInfo: 'Discount Info',
+    customContent: 'Custom Content',
+  },
+};
+
+const t = useTranslate(i18n);
+const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-card
@@ -52,33 +71,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    title: '商品名称',
-    discountInfo: '营销信息',
-    customContent: '自定义内容',
-  },
-  'en-US': {
-    discountInfo: 'Discount Info',
-    customContent: 'Custom Content',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-
-    return {
-      t,
-      imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue
index 00b8157ba..96fa28865 100644
--- a/src/cascader/demo/index.vue
+++ b/src/cascader/demo/index.vue
@@ -1,106 +1,5 @@
-<template>
-  <demo-block card :title="t('basicUsage')">
-    <van-field
-      v-model="base.result"
-      is-link
-      readonly
-      :label="t('area')"
-      :placeholder="t('selectArea')"
-      @click="base.show = true"
-    />
-    <van-popup v-model:show="base.show" round teleport="body" position="bottom">
-      <van-cascader
-        v-model="base.value"
-        :title="t('selectArea')"
-        :options="t('options')"
-        @close="base.show = false"
-        @finish="onFinish('base', $event)"
-      />
-    </van-popup>
-  </demo-block>
-
-  <demo-block card :title="t('customColor')">
-    <van-field
-      v-model="customColor.result"
-      is-link
-      readonly
-      :label="t('area')"
-      :placeholder="t('selectArea')"
-      @click="customColor.show = true"
-    />
-    <van-popup
-      v-model:show="customColor.show"
-      round
-      teleport="body"
-      position="bottom"
-    >
-      <van-cascader
-        v-model="customColor.value"
-        :title="t('selectArea')"
-        :options="t('options')"
-        active-color="#1989fa"
-        @close="customColor.show = false"
-        @finish="onFinish('customColor', $event)"
-      />
-    </van-popup>
-  </demo-block>
-
-  <demo-block card :title="t('asyncOptions')">
-    <van-field
-      v-model="async.result"
-      is-link
-      readonly
-      :label="t('area')"
-      :placeholder="t('selectArea')"
-      @click="async.show = true"
-    />
-    <van-popup
-      v-model:show="async.show"
-      round
-      teleport="body"
-      position="bottom"
-    >
-      <van-cascader
-        v-model="async.value"
-        :title="t('selectArea')"
-        :options="async.options"
-        @close="async.show = false"
-        @change="loadDynamicOptions"
-        @finish="onFinish('async', $event)"
-      />
-    </van-popup>
-  </demo-block>
-
-  <demo-block card :title="t('customFieldNames')">
-    <van-field
-      v-model="customFieldNames.result"
-      is-link
-      readonly
-      :label="t('area')"
-      :placeholder="t('selectArea')"
-      @click="customFieldNames.show = true"
-    />
-    <van-popup
-      v-model:show="customFieldNames.show"
-      round
-      teleport="body"
-      position="bottom"
-      safe-area-inset-bottom
-    >
-      <van-cascader
-        v-model="customFieldNames.value"
-        :title="t('selectArea')"
-        :options="customFieldOptions"
-        :field-names="fieldNames"
-        @close="customFieldNames.show = false"
-        @finish="onFinish('customFieldNames', $event)"
-      />
-    </van-popup>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { computed, reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
 import { CascaderOption } from '..';
 import { useTranslate } from '@demo/use-translate';
 import { deepClone } from '../../utils/deep-clone';
@@ -155,95 +54,183 @@ type StateItem = {
   options?: CascaderOption[];
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive<Record<string, StateItem>>({
-      base: {
-        show: false,
-        value: '',
-        result: '',
-      },
-      customColor: {
-        show: false,
-        value: null,
-        result: '',
-      },
-      async: {
-        show: false,
-        value: null,
-        result: '',
-        options: t('asyncOptions1'),
-      },
-      customFieldNames: {
-        show: false,
-        value: null,
-        result: '',
-      },
-    });
+const t = useTranslate(i18n);
+const baseState = reactive<StateItem>({
+  show: false,
+  value: '',
+  result: '',
+});
+const customColorState = reactive<StateItem>({
+  show: false,
+  value: null,
+  result: '',
+});
+const asyncState = reactive<StateItem>({
+  show: false,
+  value: null,
+  result: '',
+  options: t('asyncOptions1'),
+});
+const customFieldState = reactive<StateItem>({
+  show: false,
+  value: null,
+  result: '',
+});
 
-    const fieldNames = {
-      text: 'name',
-      value: 'code',
-      children: 'items',
-    };
+const fieldNames = {
+  text: 'name',
+  value: 'code',
+  children: 'items',
+};
 
-    const customFieldOptions = computed(() => {
-      const options = deepClone(t('options'));
-      const adjustFieldName = (item: CascaderOption) => {
-        if ('text' in item) {
-          item.name = item.text;
-          delete item.text;
-        }
-        if ('value' in item) {
-          item.code = item.value;
-          delete item.value;
-        }
-        if ('children' in item) {
-          item.items = item.children;
-          delete item.children;
-          item.items.forEach(adjustFieldName);
-        }
-      };
-      options.forEach(adjustFieldName);
-      return options;
-    });
+const customFieldOptions = computed(() => {
+  const options = deepClone(t('options'));
+  const adjustFieldName = (item: CascaderOption) => {
+    if ('text' in item) {
+      item.name = item.text;
+      delete item.text;
+    }
+    if ('value' in item) {
+      item.code = item.value;
+      delete item.value;
+    }
+    if ('children' in item) {
+      item.items = item.children;
+      delete item.children;
+      item.items.forEach(adjustFieldName);
+    }
+  };
+  options.forEach(adjustFieldName);
+  return options;
+});
 
-    const loadDynamicOptions = ({ value }: CascaderOption) => {
-      if (value === '330000') {
-        setTimeout(() => {
-          state.async.options![0].children = t('asyncOptions2');
-        }, 500);
-      }
-    };
+const loadDynamicOptions = ({ value }: CascaderOption) => {
+  if (value === '330000') {
+    setTimeout(() => {
+      asyncState.options![0].children = t('asyncOptions2');
+    }, 500);
+  }
+};
 
-    const onFinish = (
-      type: string,
-      {
-        value,
-        selectedOptions,
-      }: { value: number | string; selectedOptions: CascaderOption[] }
-    ) => {
-      const result = selectedOptions
-        .map((option) => option.text || option.name)
-        .join('/');
+const onFinish = (
+  state: StateItem,
+  {
+    value,
+    selectedOptions,
+  }: { value: number | string; selectedOptions: CascaderOption[] }
+) => {
+  const result = selectedOptions
+    .map((option) => option.text || option.name)
+    .join('/');
 
-      state[type] = {
-        ...state[type],
-        show: false,
-        value,
-        result,
-      };
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onFinish,
-      fieldNames,
-      customFieldOptions,
-      loadDynamicOptions,
-    };
-  },
+  state.show = false;
+  state.value = value;
+  state.result = result;
 };
 </script>
+
+<template>
+  <demo-block card :title="t('basicUsage')">
+    <van-field
+      v-model="baseState.result"
+      is-link
+      readonly
+      :label="t('area')"
+      :placeholder="t('selectArea')"
+      @click="baseState.show = true"
+    />
+    <van-popup
+      v-model:show="baseState.show"
+      round
+      teleport="body"
+      position="bottom"
+    >
+      <van-cascader
+        v-model="baseState.value"
+        :title="t('selectArea')"
+        :options="t('options')"
+        @close="baseState.show = false"
+        @finish="onFinish(baseState, $event)"
+      />
+    </van-popup>
+  </demo-block>
+
+  <demo-block card :title="t('customColor')">
+    <van-field
+      v-model="customColorState.result"
+      is-link
+      readonly
+      :label="t('area')"
+      :placeholder="t('selectArea')"
+      @click="customColorState.show = true"
+    />
+    <van-popup
+      v-model:show="customColorState.show"
+      round
+      teleport="body"
+      position="bottom"
+    >
+      <van-cascader
+        v-model="customColorState.value"
+        :title="t('selectArea')"
+        :options="t('options')"
+        active-color="#1989fa"
+        @close="customColorState.show = false"
+        @finish="onFinish(customColorState, $event)"
+      />
+    </van-popup>
+  </demo-block>
+
+  <demo-block card :title="t('asyncOptions')">
+    <van-field
+      v-model="asyncState.result"
+      is-link
+      readonly
+      :label="t('area')"
+      :placeholder="t('selectArea')"
+      @click="asyncState.show = true"
+    />
+    <van-popup
+      v-model:show="asyncState.show"
+      round
+      teleport="body"
+      position="bottom"
+    >
+      <van-cascader
+        v-model="asyncState.value"
+        :title="t('selectArea')"
+        :options="asyncState.options"
+        @close="asyncState.show = false"
+        @change="loadDynamicOptions"
+        @finish="onFinish(asyncState, $event)"
+      />
+    </van-popup>
+  </demo-block>
+
+  <demo-block card :title="t('customFieldNames')">
+    <van-field
+      v-model="customFieldState.result"
+      is-link
+      readonly
+      :label="t('area')"
+      :placeholder="t('selectArea')"
+      @click="customFieldState.show = true"
+    />
+    <van-popup
+      v-model:show="customFieldState.show"
+      round
+      teleport="body"
+      position="bottom"
+      safe-area-inset-bottom
+    >
+      <van-cascader
+        v-model="customFieldState.value"
+        :title="t('selectArea')"
+        :options="customFieldOptions"
+        :field-names="fieldNames"
+        @close="customFieldState.show = false"
+        @finish="onFinish(customFieldState, $event)"
+      />
+    </van-popup>
+  </demo-block>
+</template>
diff --git a/src/cell/demo/index.vue b/src/cell/demo/index.vue
index dc2ee9ff9..d80898877 100644
--- a/src/cell/demo/index.vue
+++ b/src/cell/demo/index.vue
@@ -1,3 +1,42 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    cell: '单元格',
+    group: '分组',
+    router: '页面导航',
+    urlRoute: 'URL 跳转',
+    vueRoute: '路由跳转',
+    useSlots: '使用插槽',
+    showIcon: '展示图标',
+    showArrow: '展示箭头',
+    largeSize: '单元格大小',
+    valueOnly: '只设置 value',
+    groupTitle: '分组标题',
+    insetGrouped: '卡片风格',
+    verticalCenter: '垂直居中',
+  },
+  'en-US': {
+    cell: 'Cell title',
+    group: 'Group',
+    router: 'Router',
+    urlRoute: 'URL',
+    vueRoute: 'Vue Router',
+    useSlots: 'Use Slots',
+    showIcon: 'Left Icon',
+    showArrow: 'Link',
+    largeSize: 'Size',
+    valueOnly: 'Value only',
+    groupTitle: 'Group Title',
+    insetGrouped: 'Inset Grouped',
+    verticalCenter: 'Vertical center',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-cell-group>
@@ -81,50 +120,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    cell: '单元格',
-    group: '分组',
-    router: '页面导航',
-    urlRoute: 'URL 跳转',
-    vueRoute: '路由跳转',
-    useSlots: '使用插槽',
-    showIcon: '展示图标',
-    showArrow: '展示箭头',
-    largeSize: '单元格大小',
-    valueOnly: '只设置 value',
-    groupTitle: '分组标题',
-    insetGrouped: '卡片风格',
-    verticalCenter: '垂直居中',
-  },
-  'en-US': {
-    cell: 'Cell title',
-    group: 'Group',
-    router: 'Router',
-    urlRoute: 'URL',
-    vueRoute: 'Vue Router',
-    useSlots: 'Use Slots',
-    showIcon: 'Left Icon',
-    showArrow: 'Link',
-    largeSize: 'Size',
-    valueOnly: 'Value only',
-    groupTitle: 'Group Title',
-    insetGrouped: 'Inset Grouped',
-    verticalCenter: 'Vertical center',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
 <style lang="less">
 .demo-cell {
   .custom-title {
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index e2ac98ef7..3f6b9f243 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -1,113 +1,8 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
-  </demo-block>
-
-  <demo-block :title="t('disabled')">
-    <van-checkbox :model-value="false" disabled>
-      {{ t('checkbox') }}
-    </van-checkbox>
-    <van-checkbox :model-value="true" disabled>
-      {{ t('checkbox') }}
-    </van-checkbox>
-  </demo-block>
-
-  <demo-block :title="t('customShape')">
-    <van-checkbox v-model="checkboxShape" shape="square">
-      {{ t('customShape') }}
-    </van-checkbox>
-  </demo-block>
-
-  <demo-block :title="t('customColor')">
-    <van-checkbox v-model="checkbox2" checked-color="#ee0a24">
-      {{ t('customColor') }}
-    </van-checkbox>
-  </demo-block>
-
-  <demo-block :title="t('customIconSize')">
-    <van-checkbox v-model="checboxIcon" icon-size="24px">
-      {{ t('customIconSize') }}
-    </van-checkbox>
-  </demo-block>
-
-  <demo-block :title="t('customIcon')">
-    <van-checkbox v-model="checkbox3">
-      {{ t('customIcon') }}
-      <template #icon="{ checked }">
-        <img :src="checked ? activeIcon : inactiveIcon" />
-      </template>
-    </van-checkbox>
-  </demo-block>
-
-  <demo-block :title="t('disableLabel')">
-    <van-checkbox v-model="checkboxLabel" label-disabled>
-      {{ t('checkbox') }}
-    </van-checkbox>
-  </demo-block>
-
-  <demo-block :title="t('title3')">
-    <van-checkbox-group v-model="result">
-      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
-      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
-    </van-checkbox-group>
-  </demo-block>
-
-  <demo-block v-if="!isWeapp" :title="t('horizontal')">
-    <van-checkbox-group v-model="horizontalResult" direction="horizontal">
-      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
-      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
-    </van-checkbox-group>
-  </demo-block>
-
-  <demo-block :title="t('title4')">
-    <van-checkbox-group v-model="result2" :max="2">
-      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
-      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
-      <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
-    </van-checkbox-group>
-  </demo-block>
-
-  <demo-block v-if="!isWeapp" :title="t('toggleAll')">
-    <van-checkbox-group v-model="checkAllResult" ref="group">
-      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
-      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
-      <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
-    </van-checkbox-group>
-
-    <div class="demo-checkbox-buttons">
-      <van-button type="primary" @click="checkAll">
-        {{ t('checkAll') }}
-      </van-button>
-      <van-button type="primary" @click="toggleAll">
-        {{ t('inverse') }}
-      </van-button>
-    </div>
-  </demo-block>
-
-  <demo-block :title="t('title5')">
-    <van-checkbox-group v-model="result3">
-      <van-cell-group>
-        <van-cell
-          v-for="(item, index) in list"
-          clickable
-          :key="index"
-          :title="`${t('checkbox')} ${item}`"
-          @click="toggle(index)"
-        >
-          <template #right-icon>
-            <van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
-          </template>
-        </van-cell>
-      </van-cell-group>
-    </van-checkbox-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { ref, reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { useRefs } from '../../composables/use-refs';
-import { ComponentInstance } from 'src/utils';
+import { ComponentInstance } from '../../utils';
 
 const i18n = {
   'zh-CN': {
@@ -142,54 +37,146 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      checkbox1: true,
-      checkbox2: true,
-      checkbox3: true,
-      checkboxShape: true,
-      checkboxLabel: true,
-      checboxIcon: true,
-      list: ['a', 'b'],
-      result: ['a', 'b'],
-      result2: [],
-      result3: [],
-      checkAllResult: [],
-      horizontalResult: [],
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  checkbox1: true,
+  checkbox2: true,
+  checkbox3: true,
+  checkboxShape: true,
+  checkboxLabel: true,
+  checboxIcon: true,
+  list: ['a', 'b'],
+  result: ['a', 'b'],
+  result2: [],
+  result3: [],
+  checkAllResult: [],
+  horizontalResult: [],
+});
 
-    const group = ref<ComponentInstance>();
-    const [refs, setRefs] = useRefs<ComponentInstance>();
+const activeIcon = 'https://img.yzcdn.cn/vant/user-active.png';
+const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
 
-    const toggle = (index: number) => {
-      refs.value[index].toggle();
-    };
+const group = ref<ComponentInstance>();
+const [refs, setRefs] = useRefs<ComponentInstance>();
 
-    const checkAll = () => {
-      group.value?.toggleAll(true);
-    };
+const toggle = (index: number) => {
+  refs.value[index].toggle();
+};
 
-    const toggleAll = () => {
-      group.value?.toggleAll();
-    };
+const checkAll = () => {
+  group.value?.toggleAll(true);
+};
 
-    return {
-      ...toRefs(state),
-      t,
-      group,
-      toggle,
-      setRefs,
-      checkAll,
-      toggleAll,
-      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
-    };
-  },
+const toggleAll = () => {
+  group.value?.toggleAll();
 };
 </script>
 
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-checkbox v-model="state.checkbox1">{{ t('checkbox') }}</van-checkbox>
+  </demo-block>
+
+  <demo-block :title="t('disabled')">
+    <van-checkbox :model-value="false" disabled>
+      {{ t('checkbox') }}
+    </van-checkbox>
+    <van-checkbox :model-value="true" disabled>
+      {{ t('checkbox') }}
+    </van-checkbox>
+  </demo-block>
+
+  <demo-block :title="t('customShape')">
+    <van-checkbox v-model="state.checkboxShape" shape="square">
+      {{ t('customShape') }}
+    </van-checkbox>
+  </demo-block>
+
+  <demo-block :title="t('customColor')">
+    <van-checkbox v-model="state.checkbox2" checked-color="#ee0a24">
+      {{ t('customColor') }}
+    </van-checkbox>
+  </demo-block>
+
+  <demo-block :title="t('customIconSize')">
+    <van-checkbox v-model="state.checboxIcon" icon-size="24px">
+      {{ t('customIconSize') }}
+    </van-checkbox>
+  </demo-block>
+
+  <demo-block :title="t('customIcon')">
+    <van-checkbox v-model="state.checkbox3">
+      {{ t('customIcon') }}
+      <template #icon="{ checked }">
+        <img :src="checked ? activeIcon : inactiveIcon" />
+      </template>
+    </van-checkbox>
+  </demo-block>
+
+  <demo-block :title="t('disableLabel')">
+    <van-checkbox v-model="state.checkboxLabel" label-disabled>
+      {{ t('checkbox') }}
+    </van-checkbox>
+  </demo-block>
+
+  <demo-block :title="t('title3')">
+    <van-checkbox-group v-model="state.result">
+      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+    </van-checkbox-group>
+  </demo-block>
+
+  <demo-block v-if="!isWeapp" :title="t('horizontal')">
+    <van-checkbox-group v-model="state.horizontalResult" direction="horizontal">
+      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+    </van-checkbox-group>
+  </demo-block>
+
+  <demo-block :title="t('title4')">
+    <van-checkbox-group v-model="state.result2" :max="2">
+      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+      <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
+    </van-checkbox-group>
+  </demo-block>
+
+  <demo-block v-if="!isWeapp" :title="t('toggleAll')">
+    <van-checkbox-group v-model="state.checkAllResult" ref="group">
+      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+      <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
+    </van-checkbox-group>
+
+    <div class="demo-checkbox-buttons">
+      <van-button type="primary" @click="checkAll">
+        {{ t('checkAll') }}
+      </van-button>
+      <van-button type="primary" @click="toggleAll">
+        {{ t('inverse') }}
+      </van-button>
+    </div>
+  </demo-block>
+
+  <demo-block :title="t('title5')">
+    <van-checkbox-group v-model="state.result3">
+      <van-cell-group>
+        <van-cell
+          v-for="(item, index) in state.list"
+          clickable
+          :key="index"
+          :title="`${t('checkbox')} ${item}`"
+          @click="toggle(index)"
+        >
+          <template #right-icon>
+            <van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </van-checkbox-group>
+  </demo-block>
+</template>
+
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue
index 4cfde09de..c8ad48bba 100644
--- a/src/circle/demo/index.vue
+++ b/src/circle/demo/index.vue
@@ -1,74 +1,5 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-circle
-      v-model:current-rate="currentRate1"
-      :rate="rate"
-      :speed="100"
-      :text="currentRate1.toFixed(0) + '%'"
-    />
-  </demo-block>
-
-  <demo-block :title="t('customStyle')">
-    <van-circle
-      v-model:current-rate="currentRate3"
-      :rate="rate"
-      :speed="100"
-      :stroke-width="60"
-      :text="t('customWidth')"
-    />
-
-    <van-circle
-      v-model:current-rate="currentRate3"
-      color="#ee0a24"
-      :rate="rate"
-      layer-color="#ebedf0"
-      :speed="100"
-      :text="t('customColor')"
-    />
-
-    <van-circle
-      v-model:current-rate="currentRate2"
-      :rate="rate"
-      :speed="100"
-      :color="gradientColor"
-      :text="t('gradient')"
-    />
-
-    <van-circle
-      v-model:current-rate="currentRate4"
-      color="#07c160"
-      :rate="rate"
-      :speed="100"
-      :clockwise="false"
-      :text="t('counterClockwise')"
-      style="margin-top: 15px"
-    />
-
-    <van-circle
-      v-model:current-rate="currentRate4"
-      color="#7232dd"
-      :rate="rate"
-      :speed="100"
-      size="120px"
-      :clockwise="false"
-      :text="t('customSize')"
-      style="margin-top: 15px"
-    />
-  </demo-block>
-
-  <div style="margin-top: 15px">
-    <van-button :text="t('add')" type="primary" size="small" @click="add" />
-    <van-button
-      :text="t('decrease')"
-      type="danger"
-      size="small"
-      @click="reduce"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
@@ -92,41 +23,98 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      rate: 70,
-      currentRate1: 70,
-      currentRate2: 70,
-      currentRate3: 70,
-      currentRate4: 70,
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  rate: 70,
+  currentRate1: 70,
+  currentRate2: 70,
+  currentRate3: 70,
+  currentRate4: 70,
+});
 
-    const gradientColor = {
-      '0%': '#3fecff',
-      '100%': '#6149f6',
-    };
+const gradientColor = {
+  '0%': '#3fecff',
+  '100%': '#6149f6',
+};
 
-    const add = () => {
-      state.rate = format(state.rate + 20);
-    };
+const add = () => {
+  state.rate = format(state.rate + 20);
+};
 
-    const reduce = () => {
-      state.rate = format(state.rate - 20);
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      add,
-      reduce,
-      gradientColor,
-    };
-  },
+const reduce = () => {
+  state.rate = format(state.rate - 20);
 };
 </script>
 
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-circle
+      v-model:current-rate="state.currentRate1"
+      :rate="state.rate"
+      :speed="100"
+      :text="state.currentRate1.toFixed(0) + '%'"
+    />
+  </demo-block>
+
+  <demo-block :title="t('customStyle')">
+    <van-circle
+      v-model:current-rate="state.currentRate3"
+      :rate="state.rate"
+      :speed="100"
+      :stroke-width="60"
+      :text="t('customWidth')"
+    />
+
+    <van-circle
+      v-model:current-rate="state.currentRate3"
+      color="#ee0a24"
+      :rate="state.rate"
+      layer-color="#ebedf0"
+      :speed="100"
+      :text="t('customColor')"
+    />
+
+    <van-circle
+      v-model:current-rate="state.currentRate2"
+      :rate="state.rate"
+      :speed="100"
+      :color="gradientColor"
+      :text="t('gradient')"
+    />
+
+    <van-circle
+      v-model:current-rate="state.currentRate4"
+      color="#07c160"
+      :rate="state.rate"
+      :speed="100"
+      :clockwise="false"
+      :text="t('counterClockwise')"
+      style="margin-top: 15px"
+    />
+
+    <van-circle
+      v-model:current-rate="state.currentRate4"
+      color="#7232dd"
+      :rate="state.rate"
+      :speed="100"
+      size="120px"
+      :clockwise="false"
+      :text="t('customSize')"
+      style="margin-top: 15px"
+    />
+  </demo-block>
+
+  <div style="margin-top: 15px">
+    <van-button :text="t('add')" type="primary" size="small" @click="add" />
+    <van-button
+      :text="t('decrease')"
+      type="danger"
+      size="small"
+      @click="reduce"
+    />
+  </div>
+</template>
+
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/col/demo/index.vue b/src/col/demo/index.vue
index 4ddd66c14..396ce67e1 100644
--- a/src/col/demo/index.vue
+++ b/src/col/demo/index.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    title2: '在列元素之间增加间距',
+    justify: '对齐方式',
+  },
+  'en-US': {
+    title2: 'Column Spacing',
+    justify: 'Justify Content',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-row>
@@ -51,28 +68,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    title2: '在列元素之间增加间距',
-    justify: '对齐方式',
-  },
-  'en-US': {
-    title2: 'Column Spacing',
-    justify: 'Justify Content',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/collapse/demo/index.vue b/src/collapse/demo/index.vue
index 1ad17b625..89324bd84 100644
--- a/src/collapse/demo/index.vue
+++ b/src/collapse/demo/index.vue
@@ -1,6 +1,32 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    accordion: '手风琴',
+    titleSlot: '自定义标题内容',
+    text: '代码是写出来给人看的，附带能在机器上运行',
+  },
+  'en-US': {
+    accordion: 'Accordion',
+    titleSlot: 'Custom title',
+    text: 'Content',
+  },
+};
+
+const t = useTranslate(i18n);
+const state = reactive({
+  active1: [0],
+  active2: 0,
+  active3: [],
+  active4: [],
+});
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
-    <van-collapse v-model="active1">
+    <van-collapse v-model="state.active1">
       <van-collapse-item :title="t('title') + 1">
         {{ t('text') }}
       </van-collapse-item>
@@ -14,7 +40,7 @@
   </demo-block>
 
   <demo-block :title="t('accordion')">
-    <van-collapse v-model="active2" accordion>
+    <van-collapse v-model="state.active2" accordion>
       <van-collapse-item :title="t('title') + 1">
         {{ t('text') }}
       </van-collapse-item>
@@ -28,7 +54,7 @@
   </demo-block>
 
   <demo-block :title="t('disabled')">
-    <van-collapse v-model="active3">
+    <van-collapse v-model="state.active3">
       <van-collapse-item :title="t('title') + 1">
         {{ t('text') }}
       </van-collapse-item>
@@ -42,7 +68,7 @@
   </demo-block>
 
   <demo-block :title="t('titleSlot')">
-    <van-collapse v-model="active4">
+    <van-collapse v-model="state.active4">
       <van-collapse-item>
         <template #title>
           {{ t('title') + 1 }}<van-icon name="question-o" />
@@ -60,41 +86,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    accordion: '手风琴',
-    titleSlot: '自定义标题内容',
-    text: '代码是写出来给人看的，附带能在机器上运行',
-  },
-  'en-US': {
-    accordion: 'Accordion',
-    titleSlot: 'Custom title',
-    text: 'Content',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      active1: [0],
-      active2: 0,
-      active3: [],
-      active4: [],
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/config-provider/demo/index.vue b/src/config-provider/demo/index.vue
index cf4e76c81..4587debbb 100644
--- a/src/config-provider/demo/index.vue
+++ b/src/config-provider/demo/index.vue
@@ -1,54 +1,6 @@
-<template>
-  <demo-block :title="t('defaultTheme')">
-    <van-form>
-      <van-field name="rate" :label="t('rate')">
-        <template #input>
-          <van-rate v-model="rate" />
-        </template>
-      </van-field>
-
-      <van-field name="slider" :label="t('slider')">
-        <template #input>
-          <van-slider v-model="slider" />
-        </template>
-      </van-field>
-
-      <div style="margin: 16px">
-        <van-button round block type="primary" native-type="submit">
-          {{ t('submit') }}
-        </van-button>
-      </div>
-    </van-form>
-  </demo-block>
-
-  <demo-block :title="t('customTheme')">
-    <van-config-provider :theme-vars="themeVars">
-      <van-form>
-        <van-field name="rate" :label="t('rate')">
-          <template #input>
-            <van-rate v-model="rate" />
-          </template>
-        </van-field>
-
-        <van-field name="slider" :label="t('slider')">
-          <template #input>
-            <van-slider v-model="slider" />
-          </template>
-        </van-field>
-
-        <div style="margin: 16px">
-          <van-button round block type="primary" native-type="submit">
-            {{ t('submit') }}
-          </van-button>
-        </div>
-      </van-form>
-    </van-config-provider>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
-import { reactive, toRefs } from '@vue/reactivity';
+import { reactive } from '@vue/reactivity';
 
 const i18n = {
   'zh-CN': {
@@ -69,34 +21,72 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      rate: 4,
-      slider: 50,
-      switchChecked: true,
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  rate: 4,
+  slider: 50,
+  switchChecked: true,
+});
 
-    const themeVars = {
-      rateIconFullColor: '#07c160',
-      sliderBarHeight: '4px',
-      sliderButtonWidth: '20px',
-      sliderButtonHeight: '20px',
-      sliderActiveBackgroundColor: '#07c160',
-      buttonPrimaryBorderColor: '#07c160',
-      buttonPrimaryBackgroundColor: '#07c160',
-    };
-
-    return {
-      t,
-      themeVars,
-      ...toRefs(state),
-    };
-  },
+const themeVars = {
+  rateIconFullColor: '#07c160',
+  sliderBarHeight: '4px',
+  sliderButtonWidth: '20px',
+  sliderButtonHeight: '20px',
+  sliderActiveBackgroundColor: '#07c160',
+  buttonPrimaryBorderColor: '#07c160',
+  buttonPrimaryBackgroundColor: '#07c160',
 };
 </script>
 
+<template>
+  <demo-block :title="t('defaultTheme')">
+    <van-form>
+      <van-field name="rate" :label="t('rate')">
+        <template #input>
+          <van-rate v-model="state.rate" />
+        </template>
+      </van-field>
+
+      <van-field name="slider" :label="t('slider')">
+        <template #input>
+          <van-slider v-model="state.slider" />
+        </template>
+      </van-field>
+
+      <div style="margin: 16px">
+        <van-button round block type="primary" native-type="submit">
+          {{ t('submit') }}
+        </van-button>
+      </div>
+    </van-form>
+  </demo-block>
+
+  <demo-block :title="t('customTheme')">
+    <van-config-provider :theme-vars="themeVars">
+      <van-form>
+        <van-field name="rate" :label="t('rate')">
+          <template #input>
+            <van-rate v-model="state.rate" />
+          </template>
+        </van-field>
+
+        <van-field name="slider" :label="t('slider')">
+          <template #input>
+            <van-slider v-model="state.slider" />
+          </template>
+        </van-field>
+
+        <div style="margin: 16px">
+          <van-button round block type="primary" native-type="submit">
+            {{ t('submit') }}
+          </van-button>
+        </div>
+      </van-form>
+    </van-config-provider>
+  </demo-block>
+</template>
+
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/contact-card/demo/index.vue b/src/contact-card/demo/index.vue
index 6b38f03fd..8469fc16e 100644
--- a/src/contact-card/demo/index.vue
+++ b/src/contact-card/demo/index.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    add: '新增',
+    edit: '编辑',
+    name: '张三',
+    addContact: '添加联系人',
+    editContact: '编辑联系人',
+  },
+  'en-US': {
+    add: 'Add',
+    edit: 'Edit',
+    name: 'John Snow',
+    addContact: 'Add Contact',
+    editContact: 'Edit Contact',
+  },
+};
+
+const t = useTranslate(i18n);
+
+const currentContact = computed(() => ({
+  name: t('name'),
+  tel: '13000000000',
+}));
+
+const onAdd = () => Toast(t('add'));
+const onEdit = () => Toast(t('edit'));
+</script>
+
 <template>
   <demo-block :title="t('addContact')">
     <van-contact-card type="add" @click="onAdd" />
@@ -21,47 +54,3 @@
     />
   </demo-block>
 </template>
-
-<script lang="ts">
-import { computed } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    add: '新增',
-    edit: '编辑',
-    name: '张三',
-    addContact: '添加联系人',
-    editContact: '编辑联系人',
-  },
-  'en-US': {
-    add: 'Add',
-    edit: 'Edit',
-    name: 'John Snow',
-    addContact: 'Add Contact',
-    editContact: 'Edit Contact',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-
-    const currentContact = computed(() => ({
-      name: t('name'),
-      tel: '13000000000',
-    }));
-
-    const onAdd = () => Toast(t('add'));
-    const onEdit = () => Toast(t('edit'));
-
-    return {
-      t,
-      onAdd,
-      onEdit,
-      currentContact,
-    };
-  },
-};
-</script>
diff --git a/src/contact-edit/demo/index.vue b/src/contact-edit/demo/index.vue
index ec7e12801..5e8f536d7 100644
--- a/src/contact-edit/demo/index.vue
+++ b/src/contact-edit/demo/index.vue
@@ -1,17 +1,4 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-contact-edit
-      is-edit
-      show-set-default
-      :contact-info="editingContact"
-      :set-default-label="t('defaultLabel')"
-      @save="onSave"
-      @delete="onDelete"
-    />
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
@@ -25,24 +12,26 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const editingContact = ref({});
+const t = useTranslate(i18n);
+const editingContact = ref({});
 
-    const onSave = () => Toast(t('save'));
-    const onDelete = () => Toast(t('delete'));
-
-    return {
-      t,
-      onSave,
-      onDelete,
-      editingContact,
-    };
-  },
-};
+const onSave = () => Toast(t('save'));
+const onDelete = () => Toast(t('delete'));
 </script>
 
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-contact-edit
+      is-edit
+      show-set-default
+      :contact-info="editingContact"
+      :set-default-label="t('defaultLabel')"
+      @save="onSave"
+      @delete="onDelete"
+    />
+  </demo-block>
+</template>
+
 <style lang="less">
 .demo-contact-edit {
   .van-doc-demo-block__title {
diff --git a/src/contact-list/demo/index.vue b/src/contact-list/demo/index.vue
index 2958e7a31..29c81ab16 100644
--- a/src/contact-list/demo/index.vue
+++ b/src/contact-list/demo/index.vue
@@ -1,17 +1,4 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-contact-list
-      v-model="chosenContactId"
-      :list="t('list')"
-      :default-tag-text="t('defaultTagText')"
-      @add="onAdd"
-      @edit="onEdit"
-      @select="onSelect"
-    />
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
@@ -57,32 +44,33 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const chosenContactId = ref('1');
+const t = useTranslate(i18n);
+const chosenContactId = ref('1');
 
-    const onAdd = () => {
-      Toast(t('add'));
-    };
-    const onEdit = (contact: { id: string }) => {
-      Toast(t('edit') + contact.id);
-    };
-    const onSelect = (contact: { id: string }) => {
-      Toast(t('select') + contact.id);
-    };
-
-    return {
-      t,
-      onAdd,
-      onEdit,
-      onSelect,
-      chosenContactId,
-    };
-  },
+const onAdd = () => {
+  Toast(t('add'));
+};
+const onEdit = (contact: { id: string }) => {
+  Toast(t('edit') + contact.id);
+};
+const onSelect = (contact: { id: string }) => {
+  Toast(t('select') + contact.id);
 };
 </script>
 
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-contact-list
+      v-model="chosenContactId"
+      :list="t('list')"
+      :default-tag-text="t('defaultTagText')"
+      @add="onAdd"
+      @edit="onEdit"
+      @select="onSelect"
+    />
+  </demo-block>
+</template>
+
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index a7dd8f857..1a7a64402 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -1,3 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { ComponentInstance } from '../../utils';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    reset: '重置',
+    pause: '暂停',
+    start: '开始',
+    finished: '倒计时结束',
+    millisecond: '毫秒级渲染',
+    customStyle: '自定义样式',
+    customFormat: '自定义格式',
+    manualControl: '手动控制',
+    formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
+  },
+  'en-US': {
+    reset: 'Reset',
+    pause: 'Pause',
+    start: 'Start',
+    finished: 'Finished',
+    millisecond: 'Millisecond',
+    customStyle: 'Custom Style',
+    customFormat: 'Custom Format',
+    manualControl: 'Manual Control',
+    formatWithDay: 'DD Day, HH:mm:ss',
+  },
+};
+
+const t = useTranslate(i18n);
+const time = ref(30 * 60 * 60 * 1000);
+const countDown = ref<ComponentInstance>();
+
+const start = () => {
+  countDown.value?.start();
+};
+const pause = () => {
+  countDown.value?.pause();
+};
+const reset = () => {
+  countDown.value?.reset();
+};
+const onFinish = () => Toast(t('finished'));
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-count-down :time="time" />
@@ -40,67 +87,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { ComponentInstance } from '../../utils';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    reset: '重置',
-    pause: '暂停',
-    start: '开始',
-    finished: '倒计时结束',
-    millisecond: '毫秒级渲染',
-    customStyle: '自定义样式',
-    customFormat: '自定义格式',
-    manualControl: '手动控制',
-    formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
-  },
-  'en-US': {
-    reset: 'Reset',
-    pause: 'Pause',
-    start: 'Start',
-    finished: 'Finished',
-    millisecond: 'Millisecond',
-    customStyle: 'Custom Style',
-    customFormat: 'Custom Format',
-    manualControl: 'Manual Control',
-    formatWithDay: 'DD Day, HH:mm:ss',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const time = ref(30 * 60 * 60 * 1000);
-    const countDown = ref<ComponentInstance>();
-
-    const start = () => {
-      countDown.value?.start();
-    };
-    const pause = () => {
-      countDown.value?.pause();
-    };
-    const reset = () => {
-      countDown.value?.reset();
-    };
-    const onFinish = () => Toast(t('finished'));
-
-    return {
-      t,
-      time,
-      start,
-      pause,
-      reset,
-      onFinish,
-      countDown,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/coupon-list/demo/index.vue b/src/coupon-list/demo/index.vue
index eb8a94b4b..97534686a 100644
--- a/src/coupon-list/demo/index.vue
+++ b/src/coupon-list/demo/index.vue
@@ -1,30 +1,5 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-coupon-cell
-      :coupons="coupons"
-      :chosen-coupon="chosenCoupon"
-      @click="showList = true"
-    />
-    <van-popup
-      v-model:show="showList"
-      round
-      position="bottom"
-      style="height: 90%; padding-top: 4px"
-    >
-      <van-coupon-list
-        :coupons="coupons"
-        :chosen-coupon="chosenCoupon"
-        :disabled-coupons="disabledCoupons"
-        :show-count="false"
-        @change="onChange"
-        @exchange="onExchange"
-      />
-    </van-popup>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { computed, reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { CouponInfo } from '../../coupon';
 import { Toast } from '../../toast';
@@ -51,82 +26,94 @@ const i18n = {
 const getRandomId = (max = 999999) =>
   String(Math.floor(Math.random() * max) + 1);
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      showList: false,
-      chosenCoupon: -1,
-      exchangedCoupons: [] as CouponInfo[],
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  showList: false,
+  chosenCoupon: -1,
+  exchangedCoupons: [] as CouponInfo[],
+});
 
-    const coupon = computed(() => ({
-      id: 1,
-      condition: '无使用门槛\n最多优惠12元',
-      reason: '',
-      value: 150,
-      name: t('coupon.name'),
-      description: t('coupon.description'),
-      startAt: 1489104000,
-      endAt: 1514592000,
-      valueDesc: '1.5',
-      unitDesc: '元',
-    }));
+const coupon = computed(() => ({
+  id: 1,
+  condition: '无使用门槛\n最多优惠12元',
+  reason: '',
+  value: 150,
+  name: t('coupon.name'),
+  description: t('coupon.description'),
+  startAt: 1489104000,
+  endAt: 1514592000,
+  valueDesc: '1.5',
+  unitDesc: '元',
+}));
 
-    const discountCoupon = computed(() => ({
-      ...coupon.value,
-      id: 2,
-      value: 12,
-      valueDesc: '8.8',
-      unitDesc: '折',
-    }));
+const discountCoupon = computed(() => ({
+  ...coupon.value,
+  id: 2,
+  value: 12,
+  valueDesc: '8.8',
+  unitDesc: '折',
+}));
 
-    const disabledCoupon = computed(() => ({
-      ...coupon.value,
-      id: 3,
-      reason: t('coupon.reason'),
-    }));
+const disabledCoupon = computed(() => ({
+  ...coupon.value,
+  id: 3,
+  reason: t('coupon.reason'),
+}));
 
-    const disabledDiscountCoupon = computed(() => ({
-      ...discountCoupon.value,
-      valueDesc: '1',
-      unitDesc: '折',
-      id: 4,
-      reason: t('coupon.reason'),
-    }));
+const disabledDiscountCoupon = computed(() => ({
+  ...discountCoupon.value,
+  valueDesc: '1',
+  unitDesc: '折',
+  id: 4,
+  reason: t('coupon.reason'),
+}));
 
-    const coupons = computed(() => [
-      coupon.value,
-      discountCoupon.value,
-      ...state.exchangedCoupons,
-    ]);
+const coupons = computed(() => [
+  coupon.value,
+  discountCoupon.value,
+  ...state.exchangedCoupons,
+]);
 
-    const disabledCoupons = computed(() => [
-      disabledCoupon.value,
-      disabledDiscountCoupon.value,
-    ]);
+const disabledCoupons = computed(() => [
+  disabledCoupon.value,
+  disabledDiscountCoupon.value,
+]);
 
-    const onChange = (index: number) => {
-      state.showList = false;
-      state.chosenCoupon = index;
-    };
+const onChange = (index: number) => {
+  state.showList = false;
+  state.chosenCoupon = index;
+};
 
-    const onExchange = () => {
-      Toast(t('exchange'));
-      state.exchangedCoupons.push({
-        ...coupon.value,
-        id: getRandomId(),
-      });
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      coupons,
-      onChange,
-      onExchange,
-      disabledCoupons,
-    };
-  },
+const onExchange = () => {
+  Toast(t('exchange'));
+  state.exchangedCoupons.push({
+    ...coupon.value,
+    id: getRandomId(),
+  });
 };
 </script>
+
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-coupon-cell
+      :coupons="coupons"
+      :chosen-coupon="state.chosenCoupon"
+      @click="state.showList = true"
+    />
+    <van-popup
+      v-model:show="state.showList"
+      round
+      position="bottom"
+      style="height: 90%; padding-top: 4px"
+    >
+      <van-coupon-list
+        :coupons="coupons"
+        :chosen-coupon="state.chosenCoupon"
+        :disabled-coupons="disabledCoupons"
+        :show-count="false"
+        @change="onChange"
+        @exchange="onExchange"
+      />
+    </van-popup>
+  </demo-block>
+</template>
diff --git a/src/datetime-picker/demo/index.vue b/src/datetime-picker/demo/index.vue
index 7258c853e..a94dd59aa 100644
--- a/src/datetime-picker/demo/index.vue
+++ b/src/datetime-picker/demo/index.vue
@@ -1,3 +1,72 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    day: '日',
+    year: '年',
+    month: '月',
+    timeType: '选择时间',
+    dateType: '选择年月日',
+    datetimeType: '选择完整时间',
+    datehourType: '选择年月日小时',
+    monthDayType: '选择月日',
+    yearMonthType: '选择年月',
+    optionFilter: '选项过滤器',
+    sortColumns: '自定义列排序',
+  },
+  'en-US': {
+    day: ' Day',
+    year: ' Year',
+    month: ' Month',
+    timeType: 'Choose Time',
+    dateType: 'Choose Date',
+    datetimeType: 'Choose DateTime',
+    datehourType: 'Choose DateHour',
+    monthDayType: 'Choose Month-Day',
+    yearMonthType: 'Choose Year-Month',
+    optionFilter: 'Option Filter',
+    sortColumns: 'Columns Order',
+  },
+};
+
+const t = useTranslate(i18n);
+const value = reactive({
+  date: new Date(2021, 0, 17),
+  time: '12:00',
+  datetime: new Date(2020, 0, 1),
+  datehour: new Date(2020, 0, 1),
+  monthDay: new Date(2020, 0, 1),
+  yearMonth: new Date(2020, 0, 1),
+  optionFilter: '12:00',
+  sortColumnsDate: new Date(2020, 0, 1),
+});
+
+const minDate = new Date(2020, 0, 1);
+const maxDate = new Date(2025, 10, 1);
+
+const filter = (type: string, values: string[]) => {
+  if (type === 'minute') {
+    return values.filter((value) => Number(value) % 5 === 0);
+  }
+  return values;
+};
+
+const formatter = (type: string, value: string) => {
+  if (type === 'year') {
+    return value + t('year');
+  }
+  if (type === 'month') {
+    return value + t('month');
+  }
+  if (type === 'day') {
+    return value + t('day');
+  }
+  return value;
+};
+</script>
+
 <template>
   <demo-block card :title="t('dateType')">
     <van-datetime-picker
@@ -22,7 +91,7 @@
 
   <demo-block v-if="!isWeapp" card :title="t('monthDayType')">
     <van-datetime-picker
-      v-model="value.monthDayType"
+      v-model="value.monthDay"
       type="month-day"
       :title="t('monthDayType')"
       :min-date="minDate"
@@ -82,82 +151,3 @@
     />
   </demo-block>
 </template>
-
-<script lang="ts">
-import { reactive } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    day: '日',
-    year: '年',
-    month: '月',
-    timeType: '选择时间',
-    dateType: '选择年月日',
-    datetimeType: '选择完整时间',
-    datehourType: '选择年月日小时',
-    monthDayType: '选择月日',
-    yearMonthType: '选择年月',
-    optionFilter: '选项过滤器',
-    sortColumns: '自定义列排序',
-  },
-  'en-US': {
-    day: ' Day',
-    year: ' Year',
-    month: ' Month',
-    timeType: 'Choose Time',
-    dateType: 'Choose Date',
-    datetimeType: 'Choose DateTime',
-    datehourType: 'Choose DateHour',
-    monthDayType: 'Choose Month-Day',
-    yearMonthType: 'Choose Year-Month',
-    optionFilter: 'Option Filter',
-    sortColumns: 'Columns Order',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = reactive({
-      date: new Date(2021, 0, 17),
-      time: '12:00',
-      datetime: new Date(2020, 0, 1),
-      datehour: new Date(2020, 0, 1),
-      monthDay: new Date(2020, 0, 1),
-      yearMonth: new Date(2020, 0, 1),
-      optionFilter: '12:00',
-      sortColumnsDate: new Date(2020, 0, 1),
-    });
-
-    const filter = (type: string, values: string[]) => {
-      if (type === 'minute') {
-        return values.filter((value) => Number(value) % 5 === 0);
-      }
-      return values;
-    };
-
-    const formatter = (type: string, value: string) => {
-      if (type === 'year') {
-        return value + t('year');
-      }
-      if (type === 'month') {
-        return value + t('month');
-      }
-      if (type === 'day') {
-        return value + t('day');
-      }
-      return value;
-    };
-
-    return {
-      t,
-      value,
-      filter,
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      formatter,
-    };
-  },
-};
-</script>
diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue
index d8206066f..70aeabc5e 100644
--- a/src/dialog/demo/index.vue
+++ b/src/dialog/demo/index.vue
@@ -1,3 +1,82 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Dialog } from '..';
+import type { DialogAction } from '../Dialog';
+
+const i18n = {
+  'zh-CN': {
+    alert1: '提示弹窗',
+    alert2: '提示弹窗（无标题）',
+    confirm: '确认弹窗',
+    beforeClose: '异步关闭',
+    roundButton: '圆角按钮样式',
+    componentCall: '组件调用',
+    content: '代码是写出来给人看的，附带能在机器上运行',
+  },
+  'en-US': {
+    alert1: 'Alert',
+    alert2: 'Alert without title',
+    confirm: 'Confirm dialog',
+    beforeClose: 'Before Close',
+    roundButton: 'Round Button Style',
+    componentCall: 'Component Call',
+  },
+};
+
+const t = useTranslate(i18n);
+const show = ref(false);
+const image = 'https://img.yzcdn.cn/vant/apple-3.jpg';
+
+const onClickAlert = () => {
+  Dialog.alert({
+    title: t('title'),
+    message: t('content'),
+  });
+};
+
+const onClickAlert2 = () => {
+  Dialog.alert({
+    message: t('content'),
+  });
+};
+
+const onClickRound = () => {
+  Dialog.alert({
+    theme: 'round-button',
+    title: t('title'),
+    message: t('content'),
+  });
+};
+
+const onClickRound2 = () => {
+  Dialog.alert({
+    theme: 'round-button',
+    message: t('content'),
+  });
+};
+
+const onClickConfirm = () => {
+  Dialog.confirm({
+    title: t('title'),
+    message: t('content'),
+  });
+};
+
+const onClickBeforeClose = () => {
+  const beforeClose = (action: DialogAction) =>
+    new Promise<boolean>((resolve) => {
+      setTimeout(() => resolve(action === 'confirm'), 1000);
+    });
+
+  Dialog.confirm({
+    title: t('title'),
+    message: t('content'),
+    beforeClose,
+  });
+};
+</script>
+
 <template>
   <demo-block card :title="t('basicUsage')">
     <van-cell is-link :title="t('alert1')" @click="onClickAlert" />
@@ -27,100 +106,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Dialog } from '..';
-import type { DialogAction } from '../Dialog';
-
-const i18n = {
-  'zh-CN': {
-    alert1: '提示弹窗',
-    alert2: '提示弹窗（无标题）',
-    confirm: '确认弹窗',
-    beforeClose: '异步关闭',
-    roundButton: '圆角按钮样式',
-    componentCall: '组件调用',
-    content: '代码是写出来给人看的，附带能在机器上运行',
-  },
-  'en-US': {
-    alert1: 'Alert',
-    alert2: 'Alert without title',
-    confirm: 'Confirm dialog',
-    beforeClose: 'Before Close',
-    roundButton: 'Round Button Style',
-    componentCall: 'Component Call',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const show = ref(false);
-
-    const onClickAlert = () => {
-      Dialog.alert({
-        title: t('title'),
-        message: t('content'),
-      });
-    };
-
-    const onClickAlert2 = () => {
-      Dialog.alert({
-        message: t('content'),
-      });
-    };
-
-    const onClickRound = () => {
-      Dialog.alert({
-        theme: 'round-button',
-        title: t('title'),
-        message: t('content'),
-      });
-    };
-
-    const onClickRound2 = () => {
-      Dialog.alert({
-        theme: 'round-button',
-        message: t('content'),
-      });
-    };
-
-    const onClickConfirm = () => {
-      Dialog.confirm({
-        title: t('title'),
-        message: t('content'),
-      });
-    };
-
-    const onClickBeforeClose = () => {
-      const beforeClose = (action: DialogAction) =>
-        new Promise<boolean>((resolve) => {
-          setTimeout(() => resolve(action === 'confirm'), 1000);
-        });
-
-      Dialog.confirm({
-        title: t('title'),
-        message: t('content'),
-        beforeClose,
-      });
-    };
-
-    return {
-      t,
-      show,
-      image: 'https://img.yzcdn.cn/vant/apple-3.jpg',
-      onClickAlert,
-      onClickAlert2,
-      onClickRound,
-      onClickRound2,
-      onClickConfirm,
-      onClickBeforeClose,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index e6c06caa2..7c094aeb2 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文本',
+    dashed: '虚线',
+    withText: '展示文本',
+    contentPosition: '内容位置',
+    customStyle: '自定义样式',
+  },
+  'en-US': {
+    text: 'Text',
+    dashed: 'Dashed',
+    withText: 'With Text',
+    contentPosition: 'Content Position',
+    customStyle: 'Custom Style',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-divider />
@@ -34,34 +57,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    text: '文本',
-    dashed: '虚线',
-    withText: '展示文本',
-    contentPosition: '内容位置',
-    customStyle: '自定义样式',
-  },
-  'en-US': {
-    text: 'Text',
-    dashed: 'Dashed',
-    withText: 'With Text',
-    contentPosition: 'Content Position',
-    customStyle: 'Custom Style',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index 9b495214f..3b909f945 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -1,64 +1,5 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-dropdown-menu>
-      <van-dropdown-item v-model="value1" :options="option1" />
-      <van-dropdown-item v-model="value2" :options="option2" />
-    </van-dropdown-menu>
-  </demo-block>
-
-  <demo-block :title="t('customContent')">
-    <van-dropdown-menu>
-      <van-dropdown-item v-model="value1" :options="option1" />
-      <van-dropdown-item :title="t('itemTitle')" ref="item">
-        <van-cell center :title="t('switchTitle1')">
-          <template #right-icon>
-            <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
-          </template>
-        </van-cell>
-        <van-cell center :title="t('switchTitle2')">
-          <template #right-icon>
-            <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
-          </template>
-        </van-cell>
-        <div style="padding: 5px 16px">
-          <van-button
-            type="danger"
-            block
-            round
-            style="height: 40px"
-            @click="onConfirm"
-          >
-            {{ t('confirm') }}
-          </van-button>
-        </div>
-      </van-dropdown-item>
-    </van-dropdown-menu>
-  </demo-block>
-
-  <demo-block :title="t('customActiveColor')">
-    <van-dropdown-menu active-color="#1989fa">
-      <van-dropdown-item v-model="value1" :options="option1" />
-      <van-dropdown-item v-model="value2" :options="option2" />
-    </van-dropdown-menu>
-  </demo-block>
-
-  <demo-block :title="t('expandDirection')">
-    <van-dropdown-menu direction="up">
-      <van-dropdown-item v-model="value1" :options="option1" />
-      <van-dropdown-item v-model="value2" :options="option2" />
-    </van-dropdown-menu>
-  </demo-block>
-
-  <demo-block :title="t('disableMenu')">
-    <van-dropdown-menu>
-      <van-dropdown-item v-model="value1" disabled :options="option1" />
-      <van-dropdown-item v-model="value2" disabled :options="option2" />
-    </van-dropdown-menu>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { computed, reactive, ref, toRefs } from 'vue';
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ComponentInstance } from '../../utils';
 
@@ -103,33 +44,87 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const item = ref<ComponentInstance>();
-    const t = useTranslate(i18n);
+const item = ref<ComponentInstance>();
+const t = useTranslate(i18n);
 
-    const state = reactive({
-      switch1: true,
-      switch2: false,
-      value1: 0,
-      value2: 'a',
-    });
+const state = reactive({
+  switch1: true,
+  switch2: false,
+  value1: 0,
+  value2: 'a',
+});
 
-    const option1 = computed(() => t('option1'));
-    const option2 = computed(() => t('option2'));
+const option1 = computed(() => t('option1'));
+const option2 = computed(() => t('option2'));
 
-    const onConfirm = () => {
-      item.value?.toggle();
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      item,
-      option1,
-      option2,
-      onConfirm,
-    };
-  },
+const onConfirm = () => {
+  item.value?.toggle();
 };
 </script>
+
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-dropdown-menu>
+      <van-dropdown-item v-model="state.value1" :options="option1" />
+      <van-dropdown-item v-model="state.value2" :options="option2" />
+    </van-dropdown-menu>
+  </demo-block>
+
+  <demo-block :title="t('customContent')">
+    <van-dropdown-menu>
+      <van-dropdown-item v-model="state.value1" :options="option1" />
+      <van-dropdown-item :title="t('itemTitle')" ref="item">
+        <van-cell center :title="t('switchTitle1')">
+          <template #right-icon>
+            <van-switch
+              v-model="state.switch1"
+              size="24"
+              active-color="#ee0a24"
+            />
+          </template>
+        </van-cell>
+        <van-cell center :title="t('switchTitle2')">
+          <template #right-icon>
+            <van-switch
+              v-model="state.switch2"
+              size="24"
+              active-color="#ee0a24"
+            />
+          </template>
+        </van-cell>
+        <div style="padding: 5px 16px">
+          <van-button
+            type="danger"
+            block
+            round
+            style="height: 40px"
+            @click="onConfirm"
+          >
+            {{ t('confirm') }}
+          </van-button>
+        </div>
+      </van-dropdown-item>
+    </van-dropdown-menu>
+  </demo-block>
+
+  <demo-block :title="t('customActiveColor')">
+    <van-dropdown-menu active-color="#1989fa">
+      <van-dropdown-item v-model="state.value1" :options="option1" />
+      <van-dropdown-item v-model="state.value2" :options="option2" />
+    </van-dropdown-menu>
+  </demo-block>
+
+  <demo-block :title="t('expandDirection')">
+    <van-dropdown-menu direction="up">
+      <van-dropdown-item v-model="state.value1" :options="option1" />
+      <van-dropdown-item v-model="state.value2" :options="option2" />
+    </van-dropdown-menu>
+  </demo-block>
+
+  <demo-block :title="t('disableMenu')">
+    <van-dropdown-menu>
+      <van-dropdown-item v-model="state.value1" disabled :options="option1" />
+      <van-dropdown-item v-model="state.value2" disabled :options="option2" />
+    </van-dropdown-menu>
+  </demo-block>
+</template>
diff --git a/src/empty/demo/index.vue b/src/empty/demo/index.vue
index 564a76890..9ace22cbb 100644
--- a/src/empty/demo/index.vue
+++ b/src/empty/demo/index.vue
@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    error: '通用错误',
+    search: '搜索提示',
+    network: '网络错误',
+    imageType: '图片类型',
+    description: '描述文字',
+    customImage: '自定义图片',
+    bottomContent: '底部内容',
+  },
+  'en-US': {
+    error: 'Error',
+    search: 'Search',
+    network: 'Network',
+    imageType: 'Image Type',
+    description: 'Description',
+    customImage: 'Custom Image',
+    bottomContent: 'Bottom Content',
+  },
+};
+
+const t = useTranslate(i18n);
+const active = ref('error');
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-empty :description="t('description')" />
@@ -34,44 +63,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    error: '通用错误',
-    search: '搜索提示',
-    network: '网络错误',
-    imageType: '图片类型',
-    description: '描述文字',
-    customImage: '自定义图片',
-    bottomContent: '底部内容',
-  },
-  'en-US': {
-    error: 'Error',
-    search: 'Search',
-    network: 'Network',
-    imageType: 'Image Type',
-    description: 'Description',
-    customImage: 'Custom Image',
-    bottomContent: 'Bottom Content',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const active = ref('error');
-
-    return {
-      t,
-      active,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue
index 609befe4d..abcb40d47 100644
--- a/src/field/demo/Autosize.vue
+++ b/src/field/demo/Autosize.vue
@@ -1,19 +1,4 @@
-<template>
-  <demo-block :title="t('autosize')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value"
-        autosize
-        rows="1"
-        type="textarea"
-        :label="t('message')"
-        :placeholder="t('placeholder')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -30,12 +15,21 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = ref('');
-
-    return { t, value };
-  },
-};
+const t = useTranslate(i18n);
+const value = ref('');
 </script>
+
+<template>
+  <demo-block :title="t('autosize')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        autosize
+        rows="1"
+        type="textarea"
+        :label="t('message')"
+        :placeholder="t('placeholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
diff --git a/src/field/demo/BasicUsage.vue b/src/field/demo/BasicUsage.vue
index d83d9e7c3..6d902f7ac 100644
--- a/src/field/demo/BasicUsage.vue
+++ b/src/field/demo/BasicUsage.vue
@@ -1,16 +1,4 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value"
-        :label="t('label')"
-        :placeholder="t('placeholder')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -25,11 +13,18 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = ref('');
-    return { t, value };
-  },
-};
+const t = useTranslate(i18n);
+const value = ref('');
 </script>
+
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        :label="t('label')"
+        :placeholder="t('placeholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
diff --git a/src/field/demo/CustomType.vue b/src/field/demo/CustomType.vue
index fd04fc040..403ed49fa 100644
--- a/src/field/demo/CustomType.vue
+++ b/src/field/demo/CustomType.vue
@@ -1,41 +1,5 @@
-<template>
-  <demo-block :title="t('customType')">
-    <van-cell-group inset>
-      <van-field
-        v-model="text"
-        :label="t('text')"
-        :placeholder="t('textPlaceholder')"
-      />
-      <van-field
-        v-model="phone"
-        type="tel"
-        :label="t('phone')"
-        :placeholder="t('phonePlaceholder')"
-      />
-      <van-field
-        v-model="digit"
-        type="digit"
-        :label="t('digit')"
-        :placeholder="t('digitPlaceholder')"
-      />
-      <van-field
-        v-model="number"
-        type="number"
-        :label="t('number')"
-        :placeholder="t('numberPlaceholder')"
-      />
-      <van-field
-        v-model="password"
-        type="password"
-        :label="t('password')"
-        :placeholder="t('passwordPlaceholder')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -65,21 +29,48 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      text: '',
-      phone: '',
-      digit: '',
-      number: '',
-      password: '',
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
+const t = useTranslate(i18n);
+const state = reactive({
+  text: '',
+  phone: '',
+  digit: '',
+  number: '',
+  password: '',
+});
 </script>
+
+<template>
+  <demo-block :title="t('customType')">
+    <van-cell-group inset>
+      <van-field
+        v-model="state.text"
+        :label="t('text')"
+        :placeholder="t('textPlaceholder')"
+      />
+      <van-field
+        v-model="state.phone"
+        type="tel"
+        :label="t('phone')"
+        :placeholder="t('phonePlaceholder')"
+      />
+      <van-field
+        v-model="state.digit"
+        type="digit"
+        :label="t('digit')"
+        :placeholder="t('digitPlaceholder')"
+      />
+      <van-field
+        v-model="state.number"
+        type="number"
+        :label="t('number')"
+        :placeholder="t('numberPlaceholder')"
+      />
+      <van-field
+        v-model="state.password"
+        type="password"
+        :label="t('password')"
+        :placeholder="t('passwordPlaceholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
diff --git a/src/field/demo/Disabled.vue b/src/field/demo/Disabled.vue
index ea285c592..19669763e 100644
--- a/src/field/demo/Disabled.vue
+++ b/src/field/demo/Disabled.vue
@@ -1,21 +1,4 @@
-<template>
-  <demo-block :title="t('disabled')">
-    <van-cell-group inset>
-      <van-field
-        :model-value="t('inputReadonly')"
-        :label="t('text')"
-        readonly
-      />
-      <van-field
-        :model-value="t('inputDisabled')"
-        :label="t('text')"
-        disabled
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -32,11 +15,22 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-
-    return { t };
-  },
-};
+const t = useTranslate(i18n);
 </script>
+
+<template>
+  <demo-block :title="t('disabled')">
+    <van-cell-group inset>
+      <van-field
+        :model-value="t('inputReadonly')"
+        :label="t('text')"
+        readonly
+      />
+      <van-field
+        :model-value="t('inputDisabled')"
+        :label="t('text')"
+        disabled
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
diff --git a/src/field/demo/ErrorInfo.vue b/src/field/demo/ErrorInfo.vue
index 73b4a711c..10cbd70f6 100644
--- a/src/field/demo/ErrorInfo.vue
+++ b/src/field/demo/ErrorInfo.vue
@@ -1,26 +1,5 @@
-<template>
-  <demo-block :title="t('errorInfo')">
-    <van-cell-group inset>
-      <van-field
-        v-model="username"
-        error
-        required
-        :label="t('username')"
-        :placeholder="t('usernamePlaceholder')"
-      />
-      <van-field
-        v-model="phone"
-        required
-        :label="t('phone')"
-        :placeholder="t('phonePlaceholder')"
-        :error-message="t('phoneError')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -38,18 +17,30 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      phone: '123',
-      username: '',
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
+const t = useTranslate(i18n);
+const state = reactive({
+  phone: '123',
+  username: '',
+});
 </script>
+
+<template>
+  <demo-block :title="t('errorInfo')">
+    <van-cell-group inset>
+      <van-field
+        v-model="state.username"
+        error
+        required
+        :label="t('username')"
+        :placeholder="t('usernamePlaceholder')"
+      />
+      <van-field
+        v-model="state.phone"
+        required
+        :label="t('phone')"
+        :placeholder="t('phonePlaceholder')"
+        :error-message="t('phoneError')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
diff --git a/src/field/demo/FormatValue.vue b/src/field/demo/FormatValue.vue
index d30f72370..f0b9e687b 100644
--- a/src/field/demo/FormatValue.vue
+++ b/src/field/demo/FormatValue.vue
@@ -1,25 +1,5 @@
-<template>
-  <demo-block v-if="!isWeapp" :title="t('formatValue')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value1"
-        :label="t('text')"
-        :formatter="formatter"
-        :placeholder="t('formatOnChange')"
-      />
-      <van-field
-        v-model="value2"
-        :label="t('text')"
-        :formatter="formatter"
-        format-trigger="onBlur"
-        :placeholder="t('formatOnBlur')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -37,20 +17,30 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value1: '',
-      value2: '',
-    });
-    const formatter = (value: string) => value.replace(/\d/g, '');
-
-    return {
-      ...toRefs(state),
-      t,
-      formatter,
-    };
-  },
-};
+const t = useTranslate(i18n);
+const state = reactive({
+  value1: '',
+  value2: '',
+});
+const formatter = (value: string) => value.replace(/\d/g, '');
 </script>
+
+<template>
+  <demo-block v-if="!isWeapp" :title="t('formatValue')">
+    <van-cell-group inset>
+      <van-field
+        v-model="state.value1"
+        :label="t('text')"
+        :formatter="formatter"
+        :placeholder="t('formatOnChange')"
+      />
+      <van-field
+        v-model="state.value2"
+        :label="t('text')"
+        :formatter="formatter"
+        format-trigger="onBlur"
+        :placeholder="t('formatOnBlur')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
diff --git a/src/field/demo/InputAlign.vue b/src/field/demo/InputAlign.vue
index b38a3ec27..a1b23e708 100644
--- a/src/field/demo/InputAlign.vue
+++ b/src/field/demo/InputAlign.vue
@@ -1,17 +1,4 @@
-<template>
-  <demo-block :title="t('inputAlign')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value"
-        :label="t('text')"
-        :placeholder="t('alignPlaceHolder')"
-        input-align="right"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -28,12 +15,19 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = ref('');
-
-    return { t, value };
-  },
-};
+const t = useTranslate(i18n);
+const value = ref('');
 </script>
+
+<template>
+  <demo-block :title="t('inputAlign')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        :label="t('text')"
+        :placeholder="t('alignPlaceHolder')"
+        input-align="right"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
diff --git a/src/field/demo/InsertButton.vue b/src/field/demo/InsertButton.vue
index 5faeff34d..7b620365b 100644
--- a/src/field/demo/InsertButton.vue
+++ b/src/field/demo/InsertButton.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    sms: '短信验证码',
+    sendSMS: '发送验证码',
+    insertButton: '插入按钮',
+    smsPlaceholder: '请输入短信验证码',
+  },
+  'en-US': {
+    sms: 'SMS',
+    sendSMS: 'Send SMS',
+    insertButton: 'Insert Button',
+    smsPlaceholder: 'SMS',
+  },
+};
+
+const t = useTranslate(i18n);
+const sms = ref('');
+</script>
+
 <template>
   <demo-block :title="t('insertButton')">
     <van-cell-group inset>
@@ -17,32 +40,3 @@
     </van-cell-group>
   </demo-block>
 </template>
-
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    sms: '短信验证码',
-    sendSMS: '发送验证码',
-    insertButton: '插入按钮',
-    smsPlaceholder: '请输入短信验证码',
-  },
-  'en-US': {
-    sms: 'SMS',
-    sendSMS: 'Send SMS',
-    insertButton: 'Insert Button',
-    smsPlaceholder: 'SMS',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const sms = ref('');
-
-    return { t, sms };
-  },
-};
-</script>
diff --git a/src/field/demo/ShowIcon.vue b/src/field/demo/ShowIcon.vue
index ef3a53bd8..70fca9218 100644
--- a/src/field/demo/ShowIcon.vue
+++ b/src/field/demo/ShowIcon.vue
@@ -1,26 +1,5 @@
-<template>
-  <demo-block :title="t('showIcon')">
-    <van-cell-group inset>
-      <van-field
-        v-model="icon1"
-        :label="t('text')"
-        left-icon="smile-o"
-        right-icon="warning-o"
-        :placeholder="t('showIcon')"
-      />
-      <van-field
-        v-model="icon2"
-        clearable
-        :label="t('text')"
-        left-icon="music-o"
-        :placeholder="t('showClearIcon')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -36,18 +15,30 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      icon1: '',
-      icon2: '123',
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
+const t = useTranslate(i18n);
+const state = reactive({
+  icon1: '',
+  icon2: '123',
+});
 </script>
+
+<template>
+  <demo-block :title="t('showIcon')">
+    <van-cell-group inset>
+      <van-field
+        v-model="state.icon1"
+        :label="t('text')"
+        left-icon="smile-o"
+        right-icon="warning-o"
+        :placeholder="t('showIcon')"
+      />
+      <van-field
+        v-model="state.icon2"
+        clearable
+        :label="t('text')"
+        left-icon="music-o"
+        :placeholder="t('showClearIcon')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
diff --git a/src/field/demo/ShowWordLimit.vue b/src/field/demo/ShowWordLimit.vue
index 159b0d020..9302a587e 100644
--- a/src/field/demo/ShowWordLimit.vue
+++ b/src/field/demo/ShowWordLimit.vue
@@ -1,21 +1,4 @@
-<template>
-  <demo-block v-if="!isWeapp" :title="t('showWordLimit')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value"
-        autosize
-        show-word-limit
-        rows="2"
-        type="textarea"
-        maxlength="50"
-        :label="t('message')"
-        :placeholder="t('placeholder')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -32,12 +15,23 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = ref('');
-
-    return { t, value };
-  },
-};
+const t = useTranslate(i18n);
+const value = ref('');
 </script>
+
+<template>
+  <demo-block v-if="!isWeapp" :title="t('showWordLimit')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        autosize
+        show-word-limit
+        rows="2"
+        type="textarea"
+        maxlength="50"
+        :label="t('message')"
+        :placeholder="t('placeholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue
index 136deea84..da39081d9 100644
--- a/src/field/demo/index.vue
+++ b/src/field/demo/index.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import BasicUsage from './BasicUsage.vue';
+import CustomType from './CustomType.vue';
+import Disabled from './Disabled.vue';
+import ShowIcon from './ShowIcon.vue';
+import ErrorInfo from './ErrorInfo.vue';
+import InsertButton from './InsertButton.vue';
+import FormatValue from './FormatValue.vue';
+import Autosize from './Autosize.vue';
+import ShowWordLimit from './ShowWordLimit.vue';
+import InputAlign from './InputAlign.vue';
+</script>
+
 <template>
   <basic-usage />
   <custom-type />
@@ -10,31 +23,3 @@
   <show-word-limit />
   <input-align />
 </template>
-
-<script lang="ts">
-import BasicUsage from './BasicUsage.vue';
-import CustomType from './CustomType.vue';
-import Disabled from './Disabled.vue';
-import ShowIcon from './ShowIcon.vue';
-import ErrorInfo from './ErrorInfo.vue';
-import InsertButton from './InsertButton.vue';
-import FormatValue from './FormatValue.vue';
-import Autosize from './Autosize.vue';
-import ShowWordLimit from './ShowWordLimit.vue';
-import InputAlign from './InputAlign.vue';
-
-export default {
-  components: {
-    BasicUsage,
-    CustomType,
-    Disabled,
-    ShowIcon,
-    ErrorInfo,
-    InsertButton,
-    FormatValue,
-    Autosize,
-    ShowWordLimit,
-    InputAlign,
-  },
-};
-</script>
diff --git a/src/form/demo/BasicUsage.vue b/src/form/demo/BasicUsage.vue
index 7d69289d0..56a89978b 100644
--- a/src/form/demo/BasicUsage.vue
+++ b/src/form/demo/BasicUsage.vue
@@ -1,35 +1,5 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-form @submit="onSubmit" @failed="onFailed">
-      <van-cell-group inset>
-        <van-field
-          v-model="username"
-          name="username"
-          :label="t('username')"
-          :rules="[{ required: true, message: t('requireUsername') }]"
-          :placeholder="t('username')"
-        />
-        <van-field
-          v-model="password"
-          type="password"
-          name="password"
-          :label="t('password')"
-          :rules="[{ required: true, message: t('requirePassword') }]"
-          :placeholder="t('password')"
-        />
-      </van-cell-group>
-
-      <div style="margin: 16px 16px 0">
-        <van-button round block type="primary" native-type="submit">
-          {{ t('submit') }}
-        </van-button>
-      </div>
-    </van-form>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { FieldValidateError } from '../../field/types';
 
@@ -50,31 +20,50 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      username: '',
-      password: '',
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  username: '',
+  password: '',
+});
 
-    const onSubmit = (values: Record<string, string>) => {
-      console.log('submit', values);
-    };
+const onSubmit = (values: Record<string, string>) => {
+  console.log('submit', values);
+};
 
-    const onFailed = (errorInfo: {
-      values: Record<string, string>;
-      errors: FieldValidateError[];
-    }) => {
-      console.log('failed', errorInfo);
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onSubmit,
-      onFailed,
-    };
-  },
+const onFailed = (errorInfo: {
+  values: Record<string, string>;
+  errors: FieldValidateError[];
+}) => {
+  console.log('failed', errorInfo);
 };
 </script>
+
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-form @submit="onSubmit" @failed="onFailed">
+      <van-cell-group inset>
+        <van-field
+          v-model="state.username"
+          name="username"
+          :label="t('username')"
+          :rules="[{ required: true, message: t('requireUsername') }]"
+          :placeholder="t('username')"
+        />
+        <van-field
+          v-model="state.password"
+          type="password"
+          name="password"
+          :label="t('password')"
+          :rules="[{ required: true, message: t('requirePassword') }]"
+          :placeholder="t('password')"
+        />
+      </van-cell-group>
+
+      <div style="margin: 16px 16px 0">
+        <van-button round block type="primary" native-type="submit">
+          {{ t('submit') }}
+        </van-button>
+      </div>
+    </van-form>
+  </demo-block>
+</template>
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue
index 57ad9ce97..1bf5240b9 100644
--- a/src/form/demo/FieldType.vue
+++ b/src/form/demo/FieldType.vue
@@ -1,82 +1,5 @@
-<template>
-  <demo-block :title="t('fieldType')">
-    <van-form @submit="onSubmit">
-      <van-cell-group inset>
-        <van-field name="switch" :label="t('switch')">
-          <template #input>
-            <van-switch v-model="switchChecked" size="20" />
-          </template>
-        </van-field>
-
-        <van-field name="checkbox" :label="t('checkbox')">
-          <template #input>
-            <van-checkbox v-model="checkbox" shape="square" />
-          </template>
-        </van-field>
-
-        <van-field name="checkboxGroup" :label="t('checkboxGroup')">
-          <template #input>
-            <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
-              <van-checkbox name="1" shape="square">
-                {{ t('checkbox') }} 1
-              </van-checkbox>
-              <van-checkbox name="2" shape="square">
-                {{ t('checkbox') }} 2
-              </van-checkbox>
-            </van-checkbox-group>
-          </template>
-        </van-field>
-
-        <van-field name="radio" :label="t('radio')">
-          <template #input>
-            <van-radio-group v-model="radio" direction="horizontal">
-              <van-radio name="1">{{ t('radio') }} 1</van-radio>
-              <van-radio name="2">{{ t('radio') }} 2</van-radio>
-            </van-radio-group>
-          </template>
-        </van-field>
-
-        <van-field name="stepper" :label="t('stepper')">
-          <template #input>
-            <van-stepper v-model="stepper" />
-          </template>
-        </van-field>
-
-        <van-field name="rate" :label="t('rate')">
-          <template #input>
-            <van-rate v-model="rate" />
-          </template>
-        </van-field>
-
-        <van-field name="slider" :label="t('slider')">
-          <template #input>
-            <van-slider v-model="slider" />
-          </template>
-        </van-field>
-
-        <van-field name="uploader" :label="t('uploader')">
-          <template #input>
-            <van-uploader v-model="uploader" max-count="2" />
-          </template>
-        </van-field>
-
-        <field-type-picker />
-        <field-type-datetime-picker />
-        <field-type-area />
-        <field-type-calendar />
-      </van-cell-group>
-
-      <div style="margin: 16px 16px 0">
-        <van-button round block type="primary" native-type="submit">
-          {{ t('submit') }}
-        </van-button>
-      </div>
-    </van-form>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import FieldTypeArea from './FieldTypeArea.vue';
 import FieldTypePicker from './FieldTypePicker.vue';
@@ -114,36 +37,99 @@ const i18n = {
   },
 };
 
-export default {
-  components: {
-    FieldTypeArea,
-    FieldTypePicker,
-    FieldTypeCalendar,
-    FieldTypeDatetimePicker,
-  },
+const t = useTranslate(i18n);
+const state = reactive({
+  rate: 3,
+  radio: '1',
+  slider: 50,
+  stepper: 1,
+  uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
+  checkbox: false,
+  checkboxGroup: [],
+  switchChecked: false,
+});
 
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      rate: 3,
-      radio: '1',
-      slider: 50,
-      stepper: 1,
-      uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
-      checkbox: false,
-      checkboxGroup: [],
-      switchChecked: false,
-    });
-
-    const onSubmit = (values: Record<string, string>) => {
-      console.log(values);
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onSubmit,
-    };
-  },
+const onSubmit = (values: Record<string, string>) => {
+  console.log(values);
 };
 </script>
+
+<template>
+  <demo-block :title="t('fieldType')">
+    <van-form @submit="onSubmit">
+      <van-cell-group inset>
+        <van-field name="switch" :label="t('switch')">
+          <template #input>
+            <van-switch v-model="state.switchChecked" size="20" />
+          </template>
+        </van-field>
+
+        <van-field name="checkbox" :label="t('checkbox')">
+          <template #input>
+            <van-checkbox v-model="state.checkbox" shape="square" />
+          </template>
+        </van-field>
+
+        <van-field name="checkboxGroup" :label="t('checkboxGroup')">
+          <template #input>
+            <van-checkbox-group
+              v-model="state.checkboxGroup"
+              direction="horizontal"
+            >
+              <van-checkbox name="1" shape="square">
+                {{ t('checkbox') }} 1
+              </van-checkbox>
+              <van-checkbox name="2" shape="square">
+                {{ t('checkbox') }} 2
+              </van-checkbox>
+            </van-checkbox-group>
+          </template>
+        </van-field>
+
+        <van-field name="radio" :label="t('radio')">
+          <template #input>
+            <van-radio-group v-model="state.radio" direction="horizontal">
+              <van-radio name="1">{{ t('radio') }} 1</van-radio>
+              <van-radio name="2">{{ t('radio') }} 2</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+
+        <van-field name="stepper" :label="t('stepper')">
+          <template #input>
+            <van-stepper v-model="state.stepper" />
+          </template>
+        </van-field>
+
+        <van-field name="rate" :label="t('rate')">
+          <template #input>
+            <van-rate v-model="state.rate" />
+          </template>
+        </van-field>
+
+        <van-field name="slider" :label="t('slider')">
+          <template #input>
+            <van-slider v-model="state.slider" />
+          </template>
+        </van-field>
+
+        <van-field name="uploader" :label="t('uploader')">
+          <template #input>
+            <van-uploader v-model="state.uploader" max-count="2" />
+          </template>
+        </van-field>
+
+        <field-type-picker />
+        <field-type-datetime-picker />
+        <field-type-area />
+        <field-type-calendar />
+      </van-cell-group>
+
+      <div style="margin: 16px 16px 0">
+        <van-button round block type="primary" native-type="submit">
+          {{ t('submit') }}
+        </van-button>
+      </div>
+    </van-form>
+  </demo-block>
+</template>
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index 41c3f4347..42fa9b6ac 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -1,24 +1,5 @@
-<template>
-  <van-field
-    v-model="value"
-    is-link
-    readonly
-    name="area"
-    :label="t('picker')"
-    :placeholder="t('placeholder')"
-    @click="showArea = true"
-  />
-  <van-popup v-model:show="showArea" round position="bottom" teleport="body">
-    <van-area
-      :area-list="t('areaList')"
-      @confirm="onConfirm"
-      @cancel="onCancel"
-    />
-  </van-popup>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { areaList } from '@vant/area-data';
 import { useTranslate } from '@demo/use-translate';
 import { AreaColumnOption } from '../../area';
@@ -37,32 +18,45 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value: '',
-      showArea: false,
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  value: '',
+  showArea: false,
+});
 
-    const onConfirm = (values: AreaColumnOption[]) => {
-      state.value = values
-        .filter((item) => !!item)
-        .map((item) => item.name)
-        .join('/');
-      state.showArea = false;
-    };
+const onConfirm = (values: AreaColumnOption[]) => {
+  state.value = values
+    .filter((item) => !!item)
+    .map((item) => item.name)
+    .join('/');
+  state.showArea = false;
+};
 
-    const onCancel = () => {
-      state.showArea = false;
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onCancel,
-      onConfirm,
-    };
-  },
+const onCancel = () => {
+  state.showArea = false;
 };
 </script>
+
+<template>
+  <van-field
+    v-model="state.value"
+    is-link
+    readonly
+    name="area"
+    :label="t('picker')"
+    :placeholder="t('placeholder')"
+    @click="state.showArea = true"
+  />
+  <van-popup
+    v-model:show="state.showArea"
+    round
+    position="bottom"
+    teleport="body"
+  >
+    <van-area
+      :area-list="t('areaList')"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+    />
+  </van-popup>
+</template>
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index db5745056..b8a00e9d9 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -1,23 +1,5 @@
-<template>
-  <van-field
-    v-model="value"
-    is-link
-    readonly
-    name="calendar"
-    :label="t('calendar')"
-    :placeholder="t('placeholder')"
-    @click="showCalendar = true"
-  />
-  <van-calendar
-    v-model:show="showCalendar"
-    round
-    teleport="body"
-    @confirm="onConfirm"
-  />
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -31,27 +13,34 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value: '',
-      showCalendar: false,
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  value: '',
+  showCalendar: false,
+});
 
-    const formatDate = (date: Date) =>
-      `${date.getMonth() + 1}/${date.getDate()}`;
+const formatDate = (date: Date) => `${date.getMonth() + 1}/${date.getDate()}`;
 
-    const onConfirm = (date: Date) => {
-      state.value = formatDate(date);
-      state.showCalendar = false;
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onConfirm,
-    };
-  },
+const onConfirm = (date: Date) => {
+  state.value = formatDate(date);
+  state.showCalendar = false;
 };
 </script>
+
+<template>
+  <van-field
+    v-model="state.value"
+    is-link
+    readonly
+    name="calendar"
+    :label="t('calendar')"
+    :placeholder="t('placeholder')"
+    @click="state.showCalendar = true"
+  />
+  <van-calendar
+    v-model:show="state.showCalendar"
+    round
+    teleport="body"
+    @confirm="onConfirm"
+  />
+</template>
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index 65d8bf113..f68eb342f 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -1,20 +1,5 @@
-<template>
-  <van-field
-    v-model="value"
-    is-link
-    readonly
-    name="datetimePicker"
-    :label="t('label')"
-    :placeholder="t('placeholder')"
-    @click="showPicker = true"
-  />
-  <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
-    <van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
-  </van-popup>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -28,29 +13,38 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value: '',
-      showPicker: false,
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  value: '',
+  showPicker: false,
+});
 
-    const onConfirm = (time: string) => {
-      state.value = time;
-      state.showPicker = false;
-    };
+const onConfirm = (time: string) => {
+  state.value = time;
+  state.showPicker = false;
+};
 
-    const onCancel = () => {
-      state.showPicker = false;
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onCancel,
-      onConfirm,
-    };
-  },
+const onCancel = () => {
+  state.showPicker = false;
 };
 </script>
+
+<template>
+  <van-field
+    v-model="state.value"
+    is-link
+    readonly
+    name="datetimePicker"
+    :label="t('label')"
+    :placeholder="t('placeholder')"
+    @click="state.showPicker = true"
+  />
+  <van-popup
+    v-model:show="state.showPicker"
+    round
+    position="bottom"
+    teleport="body"
+  >
+    <van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
+  </van-popup>
+</template>
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index d582d97ea..d694d800f 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -1,24 +1,5 @@
-<template>
-  <van-field
-    v-model="value"
-    is-link
-    readonly
-    name="picker"
-    :label="t('picker')"
-    :placeholder="t('placeholder')"
-    @click="showPicker = true"
-  />
-  <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
-    <van-picker
-      :columns="t('textColumns')"
-      @confirm="onConfirm"
-      @cancel="onCancel"
-    />
-  </van-popup>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -34,29 +15,42 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value: '',
-      showPicker: false,
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  value: '',
+  showPicker: false,
+});
 
-    const onConfirm = (value: string) => {
-      state.value = value;
-      state.showPicker = false;
-    };
+const onConfirm = (value: string) => {
+  state.value = value;
+  state.showPicker = false;
+};
 
-    const onCancel = () => {
-      state.showPicker = false;
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onCancel,
-      onConfirm,
-    };
-  },
+const onCancel = () => {
+  state.showPicker = false;
 };
 </script>
+
+<template>
+  <van-field
+    v-model="state.value"
+    is-link
+    readonly
+    name="picker"
+    :label="t('picker')"
+    :placeholder="t('placeholder')"
+    @click="state.showPicker = true"
+  />
+  <van-popup
+    v-model:show="state.showPicker"
+    round
+    position="bottom"
+    teleport="body"
+  >
+    <van-picker
+      :columns="t('textColumns')"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+    />
+  </van-popup>
+</template>
diff --git a/src/form/demo/ValidateRules.vue b/src/form/demo/ValidateRules.vue
index 7a075d0e6..0a1b5b466 100644
--- a/src/form/demo/ValidateRules.vue
+++ b/src/form/demo/ValidateRules.vue
@@ -1,47 +1,5 @@
-<template>
-  <demo-block :title="t('title')">
-    <van-form @sumbit="onSubmit" @failed="onFailed">
-      <van-cell-group inset>
-        <van-field
-          v-model="value1"
-          name="pattern"
-          :label="t('label')"
-          :rules="[{ pattern, message: t('message') }]"
-          :placeholder="t('pattern')"
-        />
-        <van-field
-          v-model="value2"
-          name="validator"
-          :label="t('label')"
-          :rules="[{ validator, message: t('message') }]"
-          :placeholder="t('validator')"
-        />
-        <van-field
-          v-model="value3"
-          name="validatorMessage"
-          :label="t('label')"
-          :rules="[{ validator: validatorMessage }]"
-          :placeholder="t('validatorMessage')"
-        />
-        <van-field
-          v-model="value4"
-          name="asyncValidator"
-          :label="t('label')"
-          :rules="[{ validator: asyncValidator, message: t('message') }]"
-          :placeholder="t('asyncValidator')"
-        />
-      </van-cell-group>
-      <div style="margin: 16px 16px 0">
-        <van-button round block type="primary" native-type="submit">
-          {{ t('submit') }}
-        </van-button>
-      </div>
-    </van-form>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { FieldValidateError } from '../../field/types';
 import { Toast } from '../../toast';
@@ -73,51 +31,79 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value1: '',
-      value2: '',
-      value3: 'abc',
-      value4: '',
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  value1: '',
+  value2: '',
+  value3: 'abc',
+  value4: '',
+});
+const pattern = /\d{6}/;
 
-    const validator = (val: string) => /1\d{10}/.test(val);
+const validator = (val: string) => /1\d{10}/.test(val);
 
-    const validatorMessage = (val: string) => t('invalid', val);
+const validatorMessage = (val: string) => t('invalid', val);
 
-    const asyncValidator = (val: string) =>
-      new Promise((resolve) => {
-        Toast.loading(t('validating'));
+const asyncValidator = (val: string) =>
+  new Promise((resolve) => {
+    Toast.loading(t('validating'));
 
-        setTimeout(() => {
-          Toast.clear();
-          resolve(val === '1234');
-        }, 1000);
-      });
+    setTimeout(() => {
+      Toast.clear();
+      resolve(val === '1234');
+    }, 1000);
+  });
 
-    const onSubmit = (values: Record<string, string>) => {
-      console.log('submit', values);
-    };
+const onSubmit = (values: Record<string, string>) => {
+  console.log('submit', values);
+};
 
-    const onFailed = (errorInfo: {
-      values: Record<string, string>;
-      errors: FieldValidateError[];
-    }) => {
-      console.log('failed', errorInfo);
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      pattern: /\d{6}/,
-      onSubmit,
-      onFailed,
-      validator,
-      asyncValidator,
-      validatorMessage,
-    };
-  },
+const onFailed = (errorInfo: {
+  values: Record<string, string>;
+  errors: FieldValidateError[];
+}) => {
+  console.log('failed', errorInfo);
 };
 </script>
+
+<template>
+  <demo-block :title="t('title')">
+    <van-form @sumbit="onSubmit" @failed="onFailed">
+      <van-cell-group inset>
+        <van-field
+          v-model="state.value1"
+          name="pattern"
+          :label="t('label')"
+          :rules="[{ pattern, message: t('message') }]"
+          :placeholder="t('pattern')"
+        />
+        <van-field
+          v-model="state.value2"
+          name="validator"
+          :label="t('label')"
+          :rules="[{ validator, message: t('message') }]"
+          :placeholder="t('validator')"
+        />
+        <van-field
+          v-model="state.value3"
+          name="validatorMessage"
+          :label="t('label')"
+          :rules="[{ validator: validatorMessage }]"
+          :placeholder="t('validatorMessage')"
+        />
+        <van-field
+          v-model="state.value4"
+          name="asyncValidator"
+          :label="t('label')"
+          :rules="[{ validator: asyncValidator, message: t('message') }]"
+          :placeholder="t('asyncValidator')"
+        />
+      </van-cell-group>
+      <div style="margin: 16px 16px 0">
+        <van-button round block type="primary" native-type="submit">
+          {{ t('submit') }}
+        </van-button>
+      </div>
+    </van-form>
+  </demo-block>
+</template>
diff --git a/src/form/demo/index.vue b/src/form/demo/index.vue
index 3e5ee9ed6..b2cc5fcb8 100644
--- a/src/form/demo/index.vue
+++ b/src/form/demo/index.vue
@@ -1,19 +1,11 @@
+<script setup lang="ts">
+import BasicUsage from './BasicUsage.vue';
+import ValidateRules from './ValidateRules.vue';
+import FieldType from './FieldType.vue';
+</script>
+
 <template>
   <basic-usage />
   <validate-rules />
   <field-type />
 </template>
-
-<script lang="ts">
-import BasicUsage from './BasicUsage.vue';
-import ValidateRules from './ValidateRules.vue';
-import FieldType from './FieldType.vue';
-
-export default {
-  components: {
-    BasicUsage,
-    FieldType,
-    ValidateRules,
-  },
-};
-</script>
diff --git a/src/grid/demo/index.vue b/src/grid/demo/index.vue
index 8882e827a..b89fb66d0 100644
--- a/src/grid/demo/index.vue
+++ b/src/grid/demo/index.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文字',
+    route: '页面导航',
+    gutter: '格子间距',
+    square: '正方形格子',
+    columnNum: '自定义列数',
+    customContent: '自定义内容',
+    urlRoute: 'URL 跳转',
+    vueRoute: '路由跳转',
+    showBadge: '徽标提示',
+    horizontal: '内容横排',
+  },
+  'en-US': {
+    text: 'Text',
+    route: 'Route',
+    gutter: 'Gutter',
+    square: 'Square',
+    columnNum: 'Column Num',
+    customContent: 'Custom Content',
+    urlRoute: 'URL',
+    vueRoute: 'Vue Router',
+    showBadge: 'Show Badge',
+    horizontal: 'Horizontal',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-grid>
@@ -63,45 +96,3 @@
     </van-grid>
   </demo-block>
 </template>
-
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    text: '文字',
-    route: '页面导航',
-    gutter: '格子间距',
-    square: '正方形格子',
-    columnNum: '自定义列数',
-    customContent: '自定义内容',
-    urlRoute: 'URL 跳转',
-    vueRoute: '路由跳转',
-    showBadge: '徽标提示',
-    horizontal: '内容横排',
-  },
-  'en-US': {
-    text: 'Text',
-    route: 'Route',
-    gutter: 'Gutter',
-    square: 'Square',
-    columnNum: 'Column Num',
-    customContent: 'Custom Content',
-    urlRoute: 'URL',
-    vueRoute: 'Vue Router',
-    showBadge: 'Show Badge',
-    horizontal: 'Horizontal',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
-<style lang="less">
-@import '../../style/var';
-</style>
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 1a7990fb2..56a911d02 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -1,3 +1,92 @@
+<script setup lang="ts">
+import icons from '@vant/icons';
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Notify } from '../../notify';
+
+// from https://30secondsofcode.org
+function copyToClipboard(str: string) {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+
+  const selection = document.getSelection();
+
+  if (!selection) {
+    return;
+  }
+
+  const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
+
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+
+  if (selected) {
+    selection.removeAllRanges();
+    selection.addRange(selected);
+  }
+}
+
+const i18n = {
+  'zh-CN': {
+    title: '图标列表',
+    badge: '徽标提示',
+    basic: '基础图标',
+    copied: '复制成功',
+    outline: '线框风格',
+    filled: '实底风格',
+    demo: '用法示例',
+    color: '图标颜色',
+    size: '图标大小',
+  },
+  'en-US': {
+    title: 'Icon List',
+    badge: 'Show Badge',
+    basic: 'Basic',
+    copied: 'Copied',
+    outline: 'Outline',
+    filled: 'Filled',
+    demo: 'Demo',
+    color: 'Icon Color',
+    size: 'Icon Size',
+  },
+};
+
+const t = useTranslate(i18n);
+const tab = ref(0);
+const demoIcon = 'chat-o';
+const demoImage = 'https://b.yzcdn.cn/vant/icon-demo-1126.png';
+
+const copy = (icon: string, option: Record<string, unknown> = {}) => {
+  let tag = `<van-icon name="${icon}"`;
+  if ('dot' in option) {
+    tag = `${tag} ${option.dot ? 'dot' : ''}`;
+  }
+  if ('badge' in option) {
+    tag = `${tag} badge="${option.badge}"`;
+  }
+  if ('color' in option) {
+    tag = `${tag} color="${option.color}"`;
+  }
+  if ('size' in option) {
+    tag = `${tag} size="${option.size}"`;
+  }
+  tag = `${tag} />`;
+  copyToClipboard(tag);
+
+  Notify({
+    type: 'success',
+    duration: 1500,
+    className: 'demo-icon-notify',
+    message: `${t('copied')}：${tag}`,
+  });
+};
+</script>
+
 <template>
   <van-tabs v-model:active="tab" sticky>
     <van-tab :title="t('demo')">
@@ -93,106 +182,6 @@
   </van-tabs>
 </template>
 
-<script lang="ts">
-import icons from '@vant/icons';
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Notify } from '../../notify';
-
-// from https://30secondsofcode.org
-function copyToClipboard(str: string) {
-  const el = document.createElement('textarea');
-  el.value = str;
-  el.setAttribute('readonly', '');
-  el.style.position = 'absolute';
-  el.style.left = '-9999px';
-  document.body.appendChild(el);
-
-  const selection = document.getSelection();
-
-  if (!selection) {
-    return;
-  }
-
-  const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
-
-  el.select();
-  document.execCommand('copy');
-  document.body.removeChild(el);
-
-  if (selected) {
-    selection.removeAllRanges();
-    selection.addRange(selected);
-  }
-}
-
-const i18n = {
-  'zh-CN': {
-    title: '图标列表',
-    badge: '徽标提示',
-    basic: '基础图标',
-    copied: '复制成功',
-    outline: '线框风格',
-    filled: '实底风格',
-    demo: '用法示例',
-    color: '图标颜色',
-    size: '图标大小',
-  },
-  'en-US': {
-    title: 'Icon List',
-    badge: 'Show Badge',
-    basic: 'Basic',
-    copied: 'Copied',
-    outline: 'Outline',
-    filled: 'Filled',
-    demo: 'Demo',
-    color: 'Icon Color',
-    size: 'Icon Size',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const tab = ref(0);
-
-    const copy = (icon: string, option: Record<string, unknown> = {}) => {
-      let tag = `<van-icon name="${icon}"`;
-      if ('dot' in option) {
-        tag = `${tag} ${option.dot ? 'dot' : ''}`;
-      }
-      if ('badge' in option) {
-        tag = `${tag} badge="${option.badge}"`;
-      }
-      if ('color' in option) {
-        tag = `${tag} color="${option.color}"`;
-      }
-      if ('size' in option) {
-        tag = `${tag} size="${option.size}"`;
-      }
-      tag = `${tag} />`;
-      copyToClipboard(tag);
-
-      Notify({
-        type: 'success',
-        duration: 1500,
-        className: 'demo-icon-notify',
-        message: `${t('copied')}：${tag}`,
-      });
-    };
-
-    return {
-      t,
-      tab,
-      copy,
-      icons,
-      demoIcon: 'chat-o',
-      demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue
index 355e0f5d4..e311ac46c 100644
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@@ -1,40 +1,5 @@
-<template>
-  <demo-block card :title="t('basicUsage')">
-    <van-cell is-link @click="showImagePreview()">
-      {{ t('showImages') }}
-    </van-cell>
-  </demo-block>
-
-  <demo-block card :title="t('customConfig')">
-    <van-cell is-link @click="showImagePreview({ startPosition: 1 })">
-      {{ t('startPosition') }}
-    </van-cell>
-    <van-cell is-link @click="showImagePreview({ closeable: true })">
-      {{ t('showClose') }}
-    </van-cell>
-    <van-cell is-link @click="showImagePreview({ onClose })">
-      {{ t('closeEvent') }}
-    </van-cell>
-  </demo-block>
-
-  <demo-block card :title="t('beforeClose')">
-    <van-cell is-link @click="showImagePreview({ beforeClose })">
-      {{ t('beforeClose') }}
-    </van-cell>
-  </demo-block>
-
-  <demo-block card :title="t('componentCall')">
-    <van-cell is-link @click="showComponentCall">
-      {{ t('componentCall') }}
-    </van-cell>
-    <van-image-preview v-model:show="show" :images="images" @change="onChange">
-      <template #index>{{ t('index', index) }}</template>
-    </van-image-preview>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ImagePreview, ImagePreviewOptions } from '..';
 import { Toast } from '../../toast';
@@ -71,54 +36,78 @@ const images = [
   'https://img.yzcdn.cn/vant/apple-4.jpg',
 ];
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      show: false,
-      index: 0,
-    });
+const t = useTranslate(i18n);
+const state = reactive({
+  show: false,
+  index: 0,
+});
 
-    const onClose = () => Toast(t('closed'));
+const onClose = () => Toast(t('closed'));
 
-    const beforeClose = () =>
-      new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(true);
-        }, 1000);
-      });
+const beforeClose = () =>
+  new Promise<boolean>((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, 1000);
+  });
 
-    const showComponentCall = () => {
-      state.show = true;
-    };
+const showComponentCall = () => {
+  state.show = true;
+};
 
-    const onChange = (index: number) => {
-      state.index = index;
-    };
+const onChange = (index: number) => {
+  state.index = index;
+};
 
-    const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
-      const instance = ImagePreview({
-        images,
-        ...options,
-      });
+const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
+  const instance = ImagePreview({
+    images,
+    ...options,
+  });
 
-      if (options.beforeClose) {
-        setTimeout(() => {
-          instance?.close();
-        }, 2000);
-      }
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      images,
-      onClose,
-      onChange,
-      beforeClose,
-      showImagePreview,
-      showComponentCall,
-    };
-  },
+  if (options.beforeClose) {
+    setTimeout(() => {
+      instance?.close();
+    }, 2000);
+  }
 };
 </script>
+
+<template>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link @click="showImagePreview()">
+      {{ t('showImages') }}
+    </van-cell>
+  </demo-block>
+
+  <demo-block card :title="t('customConfig')">
+    <van-cell is-link @click="showImagePreview({ startPosition: 1 })">
+      {{ t('startPosition') }}
+    </van-cell>
+    <van-cell is-link @click="showImagePreview({ closeable: true })">
+      {{ t('showClose') }}
+    </van-cell>
+    <van-cell is-link @click="showImagePreview({ onClose })">
+      {{ t('closeEvent') }}
+    </van-cell>
+  </demo-block>
+
+  <demo-block card :title="t('beforeClose')">
+    <van-cell is-link @click="showImagePreview({ beforeClose })">
+      {{ t('beforeClose') }}
+    </van-cell>
+  </demo-block>
+
+  <demo-block card :title="t('componentCall')">
+    <van-cell is-link @click="showComponentCall">
+      {{ t('componentCall') }}
+    </van-cell>
+    <van-image-preview
+      v-model:show="state.show"
+      :images="images"
+      @change="onChange"
+    >
+      <template #index>{{ t('index', state.index) }}</template>
+    </van-image-preview>
+  </demo-block>
+</template>
diff --git a/src/image/demo/index.vue b/src/image/demo/index.vue
index 669d392c4..da63f4f07 100644
--- a/src/image/demo/index.vue
+++ b/src/image/demo/index.vue
@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    fitMode: '填充模式',
+    round: '圆形图片',
+    loading: '加载中提示',
+    error: '加载失败提示',
+    defaultTip: '默认提示',
+    customTip: '自定义提示',
+    loadFail: '加载失败',
+  },
+  'en-US': {
+    fitMode: 'Fit Mode',
+    round: 'Round',
+    loading: 'Loading',
+    error: 'Error',
+    defaultTip: 'Default Tip',
+    customTip: 'Custom Tip',
+    loadFail: 'Load failed',
+  },
+};
+
+const t = useTranslate(i18n);
+const image = 'https://img.yzcdn.cn/vant/cat.jpeg';
+const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-row>
@@ -58,43 +87,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    fitMode: '填充模式',
-    round: '圆形图片',
-    loading: '加载中提示',
-    error: '加载失败提示',
-    defaultTip: '默认提示',
-    customTip: '自定义提示',
-    loadFail: '加载失败',
-  },
-  'en-US': {
-    fitMode: 'Fit Mode',
-    round: 'Round',
-    loading: 'Loading',
-    error: 'Error',
-    defaultTip: 'Default Tip',
-    customTip: 'Custom Tip',
-    loadFail: 'Load failed',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-
-    return {
-      t,
-      image: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      fits: ['contain', 'cover', 'fill', 'none', 'scale-down'],
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/index-bar/demo/index.vue b/src/index-bar/demo/index.vue
index b51e0cce7..1ee44a379 100644
--- a/src/index-bar/demo/index.vue
+++ b/src/index-bar/demo/index.vue
@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文本',
+    customIndexList: '自定义索引列表',
+  },
+  'en-US': {
+    text: 'Text',
+    customIndexList: 'Custom Index List',
+  },
+};
+
+const t = useTranslate(i18n);
+const activeTab = ref(0);
+const indexList: string[] = [];
+const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10];
+const charCodeOfA = 'A'.charCodeAt(0);
+
+for (let i = 0; i < 26; i++) {
+  indexList.push(String.fromCharCode(charCodeOfA + i));
+}
+</script>
+
 <template>
   <van-tabs v-model:active="activeTab">
     <van-tab :title="t('basicUsage')">
@@ -25,39 +51,3 @@
     </van-tab>
   </van-tabs>
 </template>
-
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    text: '文本',
-    customIndexList: '自定义索引列表',
-  },
-  'en-US': {
-    text: 'Text',
-    customIndexList: 'Custom Index List',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const activeTab = ref(0);
-    const indexList = [];
-    const charCodeOfA = 'A'.charCodeAt(0);
-
-    for (let i = 0; i < 26; i++) {
-      indexList.push(String.fromCharCode(charCodeOfA + i));
-    }
-
-    return {
-      t,
-      activeTab,
-      indexList,
-      customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10],
-    };
-  },
-};
-</script>
diff --git a/src/lazyload/demo/index.vue b/src/lazyload/demo/index.vue
index 76812eeed..49d307ac3 100644
--- a/src/lazyload/demo/index.vue
+++ b/src/lazyload/demo/index.vue
@@ -1,3 +1,35 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    title2: '背景图懒加载',
+    title3: '懒加载模块',
+  },
+  'en-US': {
+    title2: 'Lazyload Background Image',
+    title3: 'Lazyload Component',
+  },
+};
+
+const t = useTranslate(i18n);
+
+const imageList = [
+  'https://img.yzcdn.cn/vant/apple-1.jpg',
+  'https://img.yzcdn.cn/vant/apple-2.jpg',
+  'https://img.yzcdn.cn/vant/apple-3.jpg',
+  'https://img.yzcdn.cn/vant/apple-4.jpg',
+];
+const backgroundImageList = [
+  'https://img.yzcdn.cn/vant/apple-5.jpg',
+  'https://img.yzcdn.cn/vant/apple-6.jpg',
+];
+const componentImageList = [
+  'https://img.yzcdn.cn/vant/apple-8.jpg',
+  'https://img.yzcdn.cn/vant/apple-7.jpg',
+];
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <img v-for="img in imageList" :key="img" v-lazy="img" />
@@ -18,45 +50,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    title2: '背景图懒加载',
-    title3: '懒加载模块',
-  },
-  'en-US': {
-    title2: 'Lazyload Background Image',
-    title3: 'Lazyload Component',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-
-    return {
-      t,
-      imageList: [
-        'https://img.yzcdn.cn/vant/apple-1.jpg',
-        'https://img.yzcdn.cn/vant/apple-2.jpg',
-        'https://img.yzcdn.cn/vant/apple-3.jpg',
-        'https://img.yzcdn.cn/vant/apple-4.jpg',
-      ],
-      backgroundImageList: [
-        'https://img.yzcdn.cn/vant/apple-5.jpg',
-        'https://img.yzcdn.cn/vant/apple-6.jpg',
-      ],
-      componentImageList: [
-        'https://img.yzcdn.cn/vant/apple-8.jpg',
-        'https://img.yzcdn.cn/vant/apple-7.jpg',
-      ],
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/list/demo/index.vue b/src/list/demo/index.vue
index a8721cc2c..fe324daa6 100644
--- a/src/list/demo/index.vue
+++ b/src/list/demo/index.vue
@@ -1,3 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    errorInfo: '错误提示',
+    errorText: '请求失败，点击重新加载',
+    pullRefresh: '下拉刷新',
+    finishedText: '没有更多了',
+  },
+  'en-US': {
+    errorInfo: 'Error Info',
+    errorText: 'Request failed. Click to reload',
+    pullRefresh: 'PullRefresh',
+    finishedText: 'Finished',
+  },
+};
+
+const t = useTranslate(i18n);
+const list = ref([
+  {
+    items: [] as string[],
+    refreshing: false,
+    loading: false,
+    error: false,
+    finished: false,
+  },
+  {
+    items: [] as string[],
+    refreshing: false,
+    loading: false,
+    error: false,
+    finished: false,
+  },
+  {
+    items: [] as string[],
+    refreshing: false,
+    loading: false,
+    error: false,
+    finished: false,
+  },
+]);
+
+const onLoad = (index: number) => {
+  const currentList = list.value[index];
+  currentList.loading = true;
+
+  setTimeout(() => {
+    if (currentList.refreshing) {
+      currentList.items = [];
+      currentList.refreshing = false;
+    }
+
+    for (let i = 0; i < 10; i++) {
+      const text = currentList.items.length + 1;
+      currentList.items.push(text < 10 ? '0' + text : String(text));
+    }
+
+    currentList.loading = false;
+    currentList.refreshing = false;
+
+    // show error info in second demo
+    if (index === 1 && currentList.items.length === 10 && !currentList.error) {
+      currentList.error = true;
+    } else {
+      currentList.error = false;
+    }
+
+    if (currentList.items.length >= 40) {
+      currentList.finished = true;
+    }
+  }, 1000);
+};
+
+const onRefresh = (index: number) => {
+  list.value[index].finished = false;
+  onLoad(index);
+};
+</script>
+
 <template>
   <van-tabs>
     <van-tab :title="t('basicUsage')">
@@ -38,100 +119,6 @@
   </van-tabs>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    errorInfo: '错误提示',
-    errorText: '请求失败，点击重新加载',
-    pullRefresh: '下拉刷新',
-    finishedText: '没有更多了',
-  },
-  'en-US': {
-    errorInfo: 'Error Info',
-    errorText: 'Request failed. Click to reload',
-    pullRefresh: 'PullRefresh',
-    finishedText: 'Finished',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      list: [
-        {
-          items: [] as string[],
-          refreshing: false,
-          loading: false,
-          error: false,
-          finished: false,
-        },
-        {
-          items: [] as string[],
-          refreshing: false,
-          loading: false,
-          error: false,
-          finished: false,
-        },
-        {
-          items: [] as string[],
-          refreshing: false,
-          loading: false,
-          error: false,
-          finished: false,
-        },
-      ],
-    });
-
-    const onLoad = (index: number) => {
-      const list = state.list[index];
-      list.loading = true;
-
-      setTimeout(() => {
-        if (list.refreshing) {
-          list.items = [];
-          list.refreshing = false;
-        }
-
-        for (let i = 0; i < 10; i++) {
-          const text = list.items.length + 1;
-          list.items.push(text < 10 ? '0' + text : String(text));
-        }
-
-        list.loading = false;
-        list.refreshing = false;
-
-        // show error info in second demo
-        if (index === 1 && list.items.length === 10 && !list.error) {
-          list.error = true;
-        } else {
-          list.error = false;
-        }
-
-        if (list.items.length >= 40) {
-          list.finished = true;
-        }
-      }, 1000);
-    };
-
-    const onRefresh = (index: number) => {
-      state.list[index].finished = false;
-      onLoad(index);
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onLoad,
-      onRefresh,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/loading/demo/index.vue b/src/loading/demo/index.vue
index 5aed2e118..34d19ea41 100644
--- a/src/loading/demo/index.vue
+++ b/src/loading/demo/index.vue
@@ -1,3 +1,28 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    type: '加载类型',
+    text: '加载文案',
+    size: '自定义大小',
+    color: '自定义颜色',
+    vertical: '垂直排列',
+    textColor: '自定义文本颜色',
+  },
+  'en-US': {
+    type: 'Type',
+    text: 'Text',
+    size: 'Size',
+    color: 'Color',
+    vertical: 'Vertical',
+    textColor: 'Text Color',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('type')">
     <van-loading />
@@ -36,36 +61,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    type: '加载类型',
-    text: '加载文案',
-    size: '自定义大小',
-    color: '自定义颜色',
-    vertical: '垂直排列',
-    textColor: '自定义文本颜色',
-  },
-  'en-US': {
-    type: 'Type',
-    text: 'Text',
-    size: 'Size',
-    color: 'Color',
-    vertical: 'Vertical',
-    textColor: 'Text Color',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/nav-bar/demo/index.vue b/src/nav-bar/demo/index.vue
index 089fd0c9f..7831c696f 100644
--- a/src/nav-bar/demo/index.vue
+++ b/src/nav-bar/demo/index.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    useSlot: '使用插槽',
+  },
+  'en-US': {
+    useSlot: 'Use Slot',
+  },
+};
+
+const t = useTranslate(i18n);
+const onClickLeft = () => Toast(t('back'));
+const onClickRight = () => Toast(t('button'));
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-nav-bar
@@ -18,31 +36,3 @@
     </van-nav-bar>
   </demo-block>
 </template>
-
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    useSlot: '使用插槽',
-  },
-  'en-US': {
-    useSlot: 'Use Slot',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const onClickLeft = () => Toast(t('back'));
-    const onClickRight = () => Toast(t('button'));
-
-    return {
-      t,
-      onClickLeft,
-      onClickRight,
-    };
-  },
-};
-</script>
diff --git a/src/notice-bar/demo/index.vue b/src/notice-bar/demo/index.vue
index a25782004..ba3ced868 100644
--- a/src/notice-bar/demo/index.vue
+++ b/src/notice-bar/demo/index.vue
@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
+    mode: '通知栏模式',
+    content: '内容',
+    wrapable: '多行展示',
+    shortText: '技术是开发它的人的共同灵魂。',
+    scrollable: '滚动播放',
+    customStyle: '自定义样式',
+    verticalScroll: '垂直滚动',
+  },
+  'en-US': {
+    text: 'Technology is the common soul of the people who developed it.',
+    mode: 'Mode',
+    content: 'Content',
+    wrapable: 'Wrapable',
+    shortText: 'Some short text.',
+    customStyle: 'Custom Style',
+    scrollable: 'Scrollable',
+    verticalScroll: 'Vertical Scroll',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
@@ -42,40 +71,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
-    mode: '通知栏模式',
-    content: '内容',
-    wrapable: '多行展示',
-    shortText: '技术是开发它的人的共同灵魂。',
-    scrollable: '滚动播放',
-    customStyle: '自定义样式',
-    verticalScroll: '垂直滚动',
-  },
-  'en-US': {
-    text: 'Technology is the common soul of the people who developed it.',
-    mode: 'Mode',
-    content: 'Content',
-    wrapable: 'Wrapable',
-    shortText: 'Some short text.',
-    customStyle: 'Custom Style',
-    scrollable: 'Scrollable',
-    verticalScroll: 'Vertical Scroll',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/notify/demo/index.vue b/src/notify/demo/index.vue
index a987c959c..25020bce0 100644
--- a/src/notify/demo/index.vue
+++ b/src/notify/demo/index.vue
@@ -1,35 +1,4 @@
-<template>
-  <demo-block card :title="t('basicUsage')">
-    <van-cell is-link :title="t('basicUsage')" @click="showNotify" />
-  </demo-block>
-
-  <demo-block card :title="t('notifyType')">
-    <van-cell is-link :title="t('primary')" @click="showType('primary')" />
-    <van-cell is-link :title="t('success')" @click="showType('success')" />
-    <van-cell is-link :title="t('danger')" @click="showType('danger')" />
-    <van-cell is-link :title="t('warning')" @click="showType('warning')" />
-  </demo-block>
-
-  <demo-block card :title="t('customNotify')">
-    <van-cell is-link :title="t('customColor')" @click="showCustomColor" />
-    <van-cell
-      is-link
-      :title="t('customDuration')"
-      @click="showCustomDuration"
-    />
-  </demo-block>
-
-  <demo-block card :title="t('componentCall')">
-    <van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
-
-    <van-notify v-model:show="show" type="success">
-      <van-icon name="bell" style="margin-right: 4px" />
-      <span>{{ t('content') }}</span>
-    </van-notify>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Notify } from '..';
@@ -62,53 +31,70 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const show = ref(false);
+const t = useTranslate(i18n);
+const show = ref(false);
 
-    const showNotify = () => {
-      Notify(t('content'));
-    };
+const showNotify = () => {
+  Notify(t('content'));
+};
 
-    const showCustomColor = () => {
-      Notify({
-        color: '#ad0000',
-        message: t('customColor'),
-        background: '#ffe1e1',
-      });
-    };
+const showCustomColor = () => {
+  Notify({
+    color: '#ad0000',
+    message: t('customColor'),
+    background: '#ffe1e1',
+  });
+};
 
-    const showCustomDuration = () => {
-      Notify({
-        message: t('customDuration'),
-        duration: 1000,
-      });
-    };
+const showCustomDuration = () => {
+  Notify({
+    message: t('customDuration'),
+    duration: 1000,
+  });
+};
 
-    const showType = (type: NotifyType) => {
-      Notify({
-        message: t('content'),
-        type,
-      });
-    };
+const showType = (type: NotifyType) => {
+  Notify({
+    message: t('content'),
+    type,
+  });
+};
 
-    const showComponentCall = () => {
-      show.value = true;
-      setTimeout(() => {
-        show.value = false;
-      }, 2000);
-    };
-
-    return {
-      t,
-      show,
-      showType,
-      showNotify,
-      showCustomColor,
-      showComponentCall,
-      showCustomDuration,
-    };
-  },
+const showComponentCall = () => {
+  show.value = true;
+  setTimeout(() => {
+    show.value = false;
+  }, 2000);
 };
 </script>
+
+<template>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link :title="t('basicUsage')" @click="showNotify" />
+  </demo-block>
+
+  <demo-block card :title="t('notifyType')">
+    <van-cell is-link :title="t('primary')" @click="showType('primary')" />
+    <van-cell is-link :title="t('success')" @click="showType('success')" />
+    <van-cell is-link :title="t('danger')" @click="showType('danger')" />
+    <van-cell is-link :title="t('warning')" @click="showType('warning')" />
+  </demo-block>
+
+  <demo-block card :title="t('customNotify')">
+    <van-cell is-link :title="t('customColor')" @click="showCustomColor" />
+    <van-cell
+      is-link
+      :title="t('customDuration')"
+      @click="showCustomDuration"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('componentCall')">
+    <van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
+
+    <van-notify v-model:show="show" type="success">
+      <van-icon name="bell" style="margin-right: 4px" />
+      <span>{{ t('content') }}</span>
+    </van-notify>
+  </demo-block>
+</template>
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index c75b4a93a..3ce78f629 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -1,3 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    close: '完成',
+    input: '输入',
+    title: '键盘标题',
+    button1: '弹出默认键盘',
+    button2: '弹出带右侧栏的键盘',
+    button3: '弹出身份证号键盘',
+    button4: '弹出带标题的键盘',
+    button5: '弹出配置多个按键的键盘',
+    button6: '弹出配置随机数字的键盘',
+    bindValue: '双向绑定',
+    clickToInput: '点此输入',
+    extraKey: '左下角按键内容',
+    multiExtraKey: '配置多个按键',
+    randomKeyOrder: '随机数字键盘',
+  },
+  'en-US': {
+    close: 'Close',
+    input: 'Input',
+    title: 'Keyboard Title',
+    button1: 'Show Default Keyboard',
+    button2: 'Show Keyboard With Sidebar',
+    button3: 'Show IdNumber Keyboard',
+    button4: 'Show Keyboard With Title',
+    button5: 'Show Keyboard With Multiple ExtraKey',
+    button6: 'Show Keyboard With Random Key Order',
+    bindValue: 'Bind Value',
+    clickToInput: 'Click To Input',
+    extraKey: 'IdNumber Keyboard',
+    multiExtraKey: 'Multiple ExtraKey',
+    randomKeyOrder: 'Random Key Order',
+  },
+};
+
+const t = useTranslate(i18n);
+const value = ref('');
+const keyboard = ref('default');
+
+const onInput = (value: string) => Toast(`${t('input')}: ${value}`);
+const onDelete = () => Toast(t('delete'));
+const isTest = process.env.NODE_ENV === 'test';
+</script>
+
 <template>
   <demo-block card>
     <van-cell
@@ -103,68 +152,6 @@
   />
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    close: '完成',
-    input: '输入',
-    title: '键盘标题',
-    button1: '弹出默认键盘',
-    button2: '弹出带右侧栏的键盘',
-    button3: '弹出身份证号键盘',
-    button4: '弹出带标题的键盘',
-    button5: '弹出配置多个按键的键盘',
-    button6: '弹出配置随机数字的键盘',
-    bindValue: '双向绑定',
-    clickToInput: '点此输入',
-    extraKey: '左下角按键内容',
-    multiExtraKey: '配置多个按键',
-    randomKeyOrder: '随机数字键盘',
-  },
-  'en-US': {
-    close: 'Close',
-    input: 'Input',
-    title: 'Keyboard Title',
-    button1: 'Show Default Keyboard',
-    button2: 'Show Keyboard With Sidebar',
-    button3: 'Show IdNumber Keyboard',
-    button4: 'Show Keyboard With Title',
-    button5: 'Show Keyboard With Multiple ExtraKey',
-    button6: 'Show Keyboard With Random Key Order',
-    bindValue: 'Bind Value',
-    clickToInput: 'Click To Input',
-    extraKey: 'IdNumber Keyboard',
-    multiExtraKey: 'Multiple ExtraKey',
-    randomKeyOrder: 'Random Key Order',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value: '',
-      keyboard: 'default',
-    });
-
-    const onInput = (value: string) => Toast(`${t('input')}: ${value}`);
-    const onDelete = () => Toast(t('delete'));
-
-    return {
-      ...toRefs(state),
-      t,
-      isTest: process.env.NODE_ENV === 'test',
-      onInput,
-      onDelete,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index 4c55ab286..0457472fe 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    showOverlay: '显示遮罩层',
+    embeddedContent: '嵌入内容',
+  },
+  'en-US': {
+    showOverlay: 'Show Overlay',
+    embeddedContent: 'Embedded Content',
+  },
+};
+
+const t = useTranslate(i18n);
+const show = ref(false);
+const showEmbedded = ref(false);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-button
@@ -24,37 +44,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    showOverlay: '显示遮罩层',
-    embeddedContent: '嵌入内容',
-  },
-  'en-US': {
-    showOverlay: 'Show Overlay',
-    embeddedContent: 'Embedded Content',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      show: false,
-      showEmbedded: false,
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index 5d9c1e098..e751a7021 100644
--- a/src/pagination/demo/index.vue
+++ b/src/pagination/demo/index.vue
@@ -1,3 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    title2: '简单模式',
+    title3: '显示省略号',
+    title4: '自定义按钮',
+    prevText: '上一页',
+    nextText: '下一页',
+  },
+  'en-US': {
+    title2: 'Simple Mode',
+    title3: 'Show ellipses',
+    title4: 'Custom Button',
+    prevText: 'Prev',
+    nextText: 'Next',
+  },
+};
+
+const t = useTranslate(i18n);
+const currentPage1 = ref(1);
+const currentPage2 = ref(1);
+const currentPage3 = ref(1);
+const currentPage4 = ref(1);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-pagination
@@ -48,45 +76,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    title2: '简单模式',
-    title3: '显示省略号',
-    title4: '自定义按钮',
-    prevText: '上一页',
-    nextText: '下一页',
-  },
-  'en-US': {
-    title2: 'Simple Mode',
-    title3: 'Show ellipses',
-    title4: 'Custom Button',
-    prevText: 'Prev',
-    nextText: 'Next',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      currentPage1: 1,
-      currentPage2: 1,
-      currentPage3: 1,
-      currentPage4: 1,
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/password-input/demo/index.vue b/src/password-input/demo/index.vue
index 113e772df..0478c7f0c 100644
--- a/src/password-input/demo/index.vue
+++ b/src/password-input/demo/index.vue
@@ -1,59 +1,5 @@
-<template>
-  <demo-block ref="basicUsage" :title="t('basicUsage')">
-    <van-password-input
-      :value="value.basicUsage"
-      :focused="current === 'basicUsage'"
-      @focus="current = 'basicUsage'"
-    />
-  </demo-block>
-
-  <demo-block ref="customLength" :title="t('customLength')">
-    <van-password-input
-      :value="value.customLength"
-      :length="4"
-      :focused="current === 'customLength'"
-      @focus="current = 'customLength'"
-    />
-  </demo-block>
-
-  <demo-block ref="addGutter" :title="t('addGutter')">
-    <van-password-input
-      :value="value.addGutter"
-      :gutter="10"
-      :focused="current === 'addGutter'"
-      @focus="current = 'addGutter'"
-    />
-  </demo-block>
-
-  <demo-block ref="removeMask" :title="t('removeMask')">
-    <van-password-input
-      :mask="false"
-      :value="value.removeMask"
-      :focused="current === 'removeMask'"
-      @focus="current = 'removeMask'"
-    />
-  </demo-block>
-
-  <demo-block ref="showInfo" :title="t('showInfo')">
-    <van-password-input
-      :info="t('info')"
-      :value="value.showInfo"
-      :error-info="errorInfo"
-      :focused="current === 'showInfo'"
-      @focus="current = 'showInfo'"
-    />
-  </demo-block>
-
-  <van-number-keyboard
-    :show="!!current"
-    @blur="current = ''"
-    @input="onInput"
-    @delete="onDelete"
-  />
-</template>
-
-<script lang="ts">
-import { reactive, ref, toRefs, watch } from 'vue';
+<script setup lang="ts">
+import { ref, watch } from 'vue';
 import { ComponentInstance } from '../../utils';
 import { useTranslate } from '@demo/use-translate';
 
@@ -76,82 +22,133 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const initialValue = {
-      showInfo: '123',
-      addGutter: '123',
-      basicUsage: '123',
-      removeMask: '123',
-      customLength: '123',
-    };
-
-    const refMap = {
-      showInfo: ref<ComponentInstance>(),
-      addGutter: ref<ComponentInstance>(),
-      basicUsage: ref<ComponentInstance>(),
-      removeMask: ref<ComponentInstance>(),
-      customLength: ref<ComponentInstance>(),
-    };
-
-    type ValueKeys = keyof typeof initialValue;
-
-    const state = reactive({
-      value: initialValue,
-      current: 'basicUsage' as ValueKeys,
-      errorInfo: '',
-    });
-
-    const onInput = (key: ValueKeys) => {
-      const { value, current } = state;
-      const maxlegnth = current === 'customLength' ? 4 : 6;
-      const newValue = (value[current] + key).slice(0, maxlegnth);
-
-      value[current] = newValue;
-
-      if (
-        current === 'showInfo' &&
-        newValue.length === 6 &&
-        newValue !== '123456'
-      ) {
-        state.errorInfo = t('errorInfo');
-      }
-    };
-
-    const onDelete = () => {
-      const { value, current } = state;
-      value[current] = value[current].slice(0, value[current].length - 1);
-
-      if (current === 'showInfo') {
-        state.errorInfo = '';
-      }
-    };
-
-    watch(
-      () => state.current,
-      (value) => {
-        if (value) {
-          const vm = refMap[value].value;
-          if (vm) {
-            const { top } = vm.$el.getBoundingClientRect();
-            window.scrollTo(0, window.pageYOffset + top);
-          }
-        }
-      }
-    );
-
-    return {
-      ...toRefs(state),
-      ...refMap,
-      t,
-      onInput,
-      onDelete,
-    };
-  },
+const t = useTranslate(i18n);
+const initialValue = {
+  showInfo: '123',
+  addGutter: '123',
+  basicUsage: '123',
+  removeMask: '123',
+  customLength: '123',
 };
+
+type ValueKeys = keyof typeof initialValue;
+
+const values = ref(initialValue);
+const current = ref<ValueKeys | null>('basicUsage');
+const errorInfo = ref('');
+const showInfo = ref<ComponentInstance>();
+const addGutter = ref<ComponentInstance>();
+const basicUsage = ref<ComponentInstance>();
+const removeMask = ref<ComponentInstance>();
+const customLength = ref<ComponentInstance>();
+
+const refMap = {
+  showInfo,
+  addGutter,
+  basicUsage,
+  removeMask,
+  customLength,
+};
+
+const onInput = (key: ValueKeys) => {
+  if (!current.value) {
+    return;
+  }
+
+  const maxlegnth = current.value === 'customLength' ? 4 : 6;
+  const newValue = (values.value[current.value] + key).slice(0, maxlegnth);
+
+  values.value[current.value] = newValue;
+
+  if (
+    current.value === 'showInfo' &&
+    newValue.length === 6 &&
+    newValue !== '123456'
+  ) {
+    errorInfo.value = t('errorInfo');
+  }
+};
+
+const onDelete = () => {
+  if (!current.value) {
+    return;
+  }
+
+  values.value[current.value] = values.value[current.value].slice(
+    0,
+    values.value[current.value].length - 1
+  );
+
+  if (current.value === 'showInfo') {
+    errorInfo.value = '';
+  }
+};
+
+watch(current, (value) => {
+  if (value) {
+    const vm = refMap[value].value;
+    if (vm) {
+      const { top } = vm.$el.getBoundingClientRect();
+      window.scrollTo(0, window.pageYOffset + top);
+    }
+  }
+});
 </script>
 
+<template>
+  <demo-block ref="basicUsage" :title="t('basicUsage')">
+    <van-password-input
+      :value="values.basicUsage"
+      :focused="current === 'basicUsage'"
+      @focus="current = 'basicUsage'"
+    />
+  </demo-block>
+
+  <demo-block ref="customLength" :title="t('customLength')">
+    <van-password-input
+      :value="values.customLength"
+      :length="4"
+      :focused="current === 'customLength'"
+      @focus="current = 'customLength'"
+    />
+  </demo-block>
+
+  <demo-block ref="addGutter" :title="t('addGutter')">
+    <van-password-input
+      :value="values.addGutter"
+      :gutter="10"
+      :focused="current === 'addGutter'"
+      @focus="current = 'addGutter'"
+    />
+  </demo-block>
+
+  <demo-block ref="removeMask" :title="t('removeMask')">
+    <van-password-input
+      :mask="false"
+      :value="values.removeMask"
+      :focused="current === 'removeMask'"
+      @focus="current = 'removeMask'"
+    />
+  </demo-block>
+
+  <demo-block ref="showInfo" :title="t('showInfo')">
+    <van-password-input
+      :info="t('info')"
+      :value="values.showInfo"
+      :error-info="errorInfo"
+      :focused="current === 'showInfo'"
+      @focus="current = 'showInfo'"
+    />
+  </demo-block>
+
+  <van-number-keyboard
+    :show="!!current"
+    @blur="current = null"
+    @input="onInput"
+    @delete="onDelete"
+  />
+</template>
+
 <style lang="less">
 .demo-password-input {
   min-height: 150vh;
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index dce797cea..3f0bf8eaf 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -1,3 +1,127 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    city: '城市',
+    cascade: '级联选择',
+    withPopup: '搭配弹出层使用',
+    chooseCity: '选择城市',
+    showToolbar: '展示顶部栏',
+    dateColumns: dateColumns['zh-CN'],
+    defaultIndex: '默认选中项',
+    disableOption: '禁用选项',
+    cascadeColumns: cascadeColumns['zh-CN'],
+    multipleColumns: '多列选择',
+    setColumnValues: '动态设置选项',
+    customChildrenKey: '自定义 Columns 结构',
+    customChildrenColumns: cascadeColumnsCustomKey['zh-CN'],
+    textColumns: [
+      '杭州',
+      '宁波',
+      '温州',
+      '绍兴',
+      '湖州',
+      '嘉兴',
+      '金华',
+      '衢州',
+    ],
+    disabledColumns: [
+      { text: '杭州', disabled: true },
+      { text: '宁波' },
+      { text: '温州' },
+    ],
+    column3: {
+      浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+      福建: ['福州', '厦门', '莆田', '三明', '泉州'],
+    },
+    toastContent: (value: string, index: number) =>
+      `当前值：${value}, 当前索引：${index}`,
+  },
+  'en-US': {
+    city: 'City',
+    cascade: 'Cascade',
+    withPopup: 'With Popup',
+    chooseCity: 'Choose City',
+    showToolbar: 'Show Toolbar',
+    dateColumns: dateColumns['en-US'],
+    defaultIndex: 'Default Index',
+    disableOption: 'Disable Option',
+    cascadeColumns: cascadeColumns['en-US'],
+    multipleColumns: 'Multiple Columns',
+    setColumnValues: 'Set Column Values',
+    customChildrenKey: 'Custom Columns Fields',
+    customChildrenColumns: cascadeColumnsCustomKey['en-US'],
+    textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+    disabledColumns: [
+      { text: 'Delaware', disabled: true },
+      { text: 'Florida' },
+      { text: 'Georqia' },
+    ],
+    column3: {
+      Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+      Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
+    },
+    toastContent: (value: string, index: number) =>
+      `Value: ${value}, Index：${index}`,
+  },
+};
+
+const t = useTranslate(i18n);
+const picker = ref();
+const showPicker = ref(false);
+const fieldValue = ref('');
+const customFieldName = ref({
+  text: 'cityName',
+  children: 'cities',
+});
+
+const columns = computed(() => {
+  const column = t('column3');
+  return [
+    {
+      values: Object.keys(column),
+      className: 'column1',
+    },
+    {
+      values: column[Object.keys(column)[0]],
+      className: 'column2',
+      defaultIndex: 2,
+    },
+  ];
+});
+
+const onChange1 = (value: string, index: number) => {
+  Toast(t('toastContent', value, index));
+};
+
+const onChange2 = (values: string[]) => {
+  picker.value.setColumnValues(1, t('column3')[values[0]]);
+};
+
+const onConfirm = (value: string, index: number) => {
+  Toast(t('toastContent', value, index));
+};
+
+const onCancel = () => Toast(t('cancel'));
+
+const onCancel2 = () => {
+  showPicker.value = false;
+};
+
+const onClickField = () => {
+  showPicker.value = true;
+};
+
+const onConfirm2 = (value: string) => {
+  showPicker.value = false;
+  fieldValue.value = value;
+};
+</script>
+
 <template>
   <demo-block card :title="t('basicUsage')">
     <van-picker
@@ -72,147 +196,3 @@
     />
   </demo-block>
 </template>
-
-<script lang="ts">
-import { ref, computed, reactive, toRefs } from 'vue';
-import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    city: '城市',
-    cascade: '级联选择',
-    withPopup: '搭配弹出层使用',
-    chooseCity: '选择城市',
-    showToolbar: '展示顶部栏',
-    dateColumns: dateColumns['zh-CN'],
-    defaultIndex: '默认选中项',
-    disableOption: '禁用选项',
-    cascadeColumns: cascadeColumns['zh-CN'],
-    multipleColumns: '多列选择',
-    setColumnValues: '动态设置选项',
-    customChildrenKey: '自定义 Columns 结构',
-    customChildrenColumns: cascadeColumnsCustomKey['zh-CN'],
-    textColumns: [
-      '杭州',
-      '宁波',
-      '温州',
-      '绍兴',
-      '湖州',
-      '嘉兴',
-      '金华',
-      '衢州',
-    ],
-    disabledColumns: [
-      { text: '杭州', disabled: true },
-      { text: '宁波' },
-      { text: '温州' },
-    ],
-    column3: {
-      浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-      福建: ['福州', '厦门', '莆田', '三明', '泉州'],
-    },
-    toastContent: (value: string, index: number) =>
-      `当前值：${value}, 当前索引：${index}`,
-  },
-  'en-US': {
-    city: 'City',
-    cascade: 'Cascade',
-    withPopup: 'With Popup',
-    chooseCity: 'Choose City',
-    showToolbar: 'Show Toolbar',
-    dateColumns: dateColumns['en-US'],
-    defaultIndex: 'Default Index',
-    disableOption: 'Disable Option',
-    cascadeColumns: cascadeColumns['en-US'],
-    multipleColumns: 'Multiple Columns',
-    setColumnValues: 'Set Column Values',
-    customChildrenKey: 'Custom Columns Fields',
-    customChildrenColumns: cascadeColumnsCustomKey['en-US'],
-    textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
-    disabledColumns: [
-      { text: 'Delaware', disabled: true },
-      { text: 'Florida' },
-      { text: 'Georqia' },
-    ],
-    column3: {
-      Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
-      Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
-    },
-    toastContent: (value: string, index: number) =>
-      `Value: ${value}, Index：${index}`,
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const picker = ref();
-    const state = reactive({
-      showPicker: false,
-      fieldValue: '',
-      customFieldName: {
-        text: 'cityName',
-        children: 'cities',
-      },
-    });
-
-    const columns = computed(() => {
-      const column = t('column3');
-      return [
-        {
-          values: Object.keys(column),
-          className: 'column1',
-        },
-        {
-          values: column[Object.keys(column)[0]],
-          className: 'column2',
-          defaultIndex: 2,
-        },
-      ];
-    });
-
-    const onChange1 = (value: string, index: number) => {
-      Toast(t('toastContent', value, index));
-    };
-
-    const onChange2 = (values: string[]) => {
-      picker.value.setColumnValues(1, t('column3')[values[0]]);
-    };
-
-    const onConfirm = (value: string, index: number) => {
-      Toast(t('toastContent', value, index));
-    };
-
-    const onCancel = () => Toast(t('cancel'));
-
-    const onCancel2 = () => {
-      state.showPicker = false;
-    };
-
-    const onClickField = () => {
-      state.showPicker = true;
-    };
-
-    const onConfirm2 = (value: string) => {
-      state.showPicker = false;
-      state.fieldValue = value;
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      picker,
-      columns,
-      onCancel,
-      onCancel2,
-      onChange1,
-      onChange2,
-      onConfirm,
-      onConfirm2,
-      onClickField,
-    };
-  },
-};
-</script>
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index f809b9411..20447fff9 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -1,3 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+    shortActions: [{ text: '选项一' }, { text: '选项二' }],
+    actionsWithIcon: [
+      { text: '选项一', icon: 'add-o' },
+      { text: '选项二', icon: 'music-o' },
+      { text: '选项三', icon: 'more-o' },
+    ],
+    actionsDisabled: [
+      { text: '选项一', disabled: true },
+      { text: '选项二', disabled: true },
+      { text: '选项三' },
+    ],
+    showIcon: '展示图标',
+    placement: '弹出位置',
+    darkTheme: '深色风格',
+    lightTheme: '浅色风格',
+    showPopover: '点击弹出气泡',
+    actionOptions: '选项配置',
+    customContent: '自定义内容',
+    disableAction: '禁用选项',
+    choosePlacement: '选择弹出位置',
+  },
+  'en-US': {
+    actions: [{ text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }],
+    shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
+    actionsWithIcon: [
+      { text: 'Option 1', icon: 'add-o' },
+      { text: 'Option 2', icon: 'music-o' },
+      { text: 'Option 3', icon: 'more-o' },
+    ],
+    actionsDisabled: [
+      { text: 'Option 1', disabled: true },
+      { text: 'Option 2', disabled: true },
+      { text: 'Option 3' },
+    ],
+    showIcon: 'Show Icon',
+    placement: 'Placement',
+    darkTheme: 'Dark Theme',
+    lightTheme: 'Light Theme',
+    showPopover: 'Show Popover',
+    actionOptions: 'Action Options',
+    customContent: 'Custom Content',
+    disableAction: 'Disable Action',
+    choosePlacement: 'Placement',
+  },
+};
+
+const placements = [
+  'top',
+  'top-start',
+  'top-end',
+  'left',
+  'left-start',
+  'left-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+];
+
+const t = useTranslate(i18n);
+const show = ref({
+  showIcon: false,
+  placement: false,
+  darkTheme: false,
+  lightTheme: false,
+  customContent: false,
+  disableAction: false,
+});
+const showPicker = ref(false);
+const currentPlacement = ref('top');
+
+const onPickerChange = (value: string) => {
+  setTimeout(() => {
+    show.value.placement = true;
+    currentPlacement.value = value;
+  });
+};
+
+const onSelect = (action: { text: string }) => Toast(action.text);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-popover
@@ -119,111 +210,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
-    shortActions: [{ text: '选项一' }, { text: '选项二' }],
-    actionsWithIcon: [
-      { text: '选项一', icon: 'add-o' },
-      { text: '选项二', icon: 'music-o' },
-      { text: '选项三', icon: 'more-o' },
-    ],
-    actionsDisabled: [
-      { text: '选项一', disabled: true },
-      { text: '选项二', disabled: true },
-      { text: '选项三' },
-    ],
-    showIcon: '展示图标',
-    placement: '弹出位置',
-    darkTheme: '深色风格',
-    lightTheme: '浅色风格',
-    showPopover: '点击弹出气泡',
-    actionOptions: '选项配置',
-    customContent: '自定义内容',
-    disableAction: '禁用选项',
-    choosePlacement: '选择弹出位置',
-  },
-  'en-US': {
-    actions: [{ text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }],
-    shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
-    actionsWithIcon: [
-      { text: 'Option 1', icon: 'add-o' },
-      { text: 'Option 2', icon: 'music-o' },
-      { text: 'Option 3', icon: 'more-o' },
-    ],
-    actionsDisabled: [
-      { text: 'Option 1', disabled: true },
-      { text: 'Option 2', disabled: true },
-      { text: 'Option 3' },
-    ],
-    showIcon: 'Show Icon',
-    placement: 'Placement',
-    darkTheme: 'Dark Theme',
-    lightTheme: 'Light Theme',
-    showPopover: 'Show Popover',
-    actionOptions: 'Action Options',
-    customContent: 'Custom Content',
-    disableAction: 'Disable Action',
-    choosePlacement: 'Placement',
-  },
-};
-
-const placements = [
-  'top',
-  'top-start',
-  'top-end',
-  'left',
-  'left-start',
-  'left-end',
-  'right',
-  'right-start',
-  'right-end',
-  'bottom',
-  'bottom-start',
-  'bottom-end',
-];
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      show: {
-        showIcon: false,
-        placement: false,
-        darkTheme: false,
-        lightTheme: false,
-        customContent: false,
-        disableAction: false,
-      },
-      showPicker: false,
-      currentPlacement: 'top',
-    });
-
-    const onPickerChange = (value: string) => {
-      setTimeout(() => {
-        state.show.placement = true;
-        state.currentPlacement = value;
-      });
-    };
-
-    const onSelect = (action: { text: string }) => Toast(action.text);
-
-    return {
-      ...toRefs(state),
-      t,
-      onSelect,
-      placements,
-      onPickerChange,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
index edae7ec1f..d8ac4bebb 100644
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -1,3 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    position: '弹出位置',
+    buttonBasic: '展示弹出层',
+    buttonTop: '顶部弹出',
+    buttonBottom: '底部弹出',
+    buttonLeft: '左侧弹出',
+    buttonRight: '右侧弹出',
+    teleport: '指定挂载节点',
+    roundCorner: '圆角弹窗',
+    closeIcon: '关闭图标',
+    customCloseIcon: '自定义图标',
+    customIconPosition: '图标位置',
+  },
+  'en-US': {
+    position: 'Position',
+    buttonBasic: 'Show Popup',
+    buttonTop: 'From Top',
+    buttonBottom: 'From Bottom',
+    buttonLeft: 'From Left',
+    buttonRight: 'From Right',
+    teleport: 'Get Container',
+    roundCorner: 'Round Corner',
+    closeIcon: 'Close Icon',
+    customCloseIcon: 'Custom Icon',
+    customIconPosition: 'Icon Position',
+  },
+};
+
+const t = useTranslate(i18n);
+const showBasic = ref(false);
+const showTop = ref(false);
+const showBottom = ref(false);
+const showLeft = ref(false);
+const showRight = ref(false);
+const showCloseIcon = ref(false);
+const showRoundCorner = ref(false);
+const showGetContainer = ref(false);
+const showCustomCloseIcon = ref(false);
+const showCustomIconPosition = ref(false);
+</script>
+
 <template>
   <demo-block card :title="t('basicUsage')">
     <van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
@@ -93,63 +139,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    position: '弹出位置',
-    buttonBasic: '展示弹出层',
-    buttonTop: '顶部弹出',
-    buttonBottom: '底部弹出',
-    buttonLeft: '左侧弹出',
-    buttonRight: '右侧弹出',
-    teleport: '指定挂载节点',
-    roundCorner: '圆角弹窗',
-    closeIcon: '关闭图标',
-    customCloseIcon: '自定义图标',
-    customIconPosition: '图标位置',
-  },
-  'en-US': {
-    position: 'Position',
-    buttonBasic: 'Show Popup',
-    buttonTop: 'From Top',
-    buttonBottom: 'From Bottom',
-    buttonLeft: 'From Left',
-    buttonRight: 'From Right',
-    teleport: 'Get Container',
-    roundCorner: 'Round Corner',
-    closeIcon: 'Close Icon',
-    customCloseIcon: 'Custom Icon',
-    customIconPosition: 'Icon Position',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      showBasic: false,
-      showTop: false,
-      showBottom: false,
-      showLeft: false,
-      showRight: false,
-      showCloseIcon: false,
-      showRoundCorner: false,
-      showGetContainer: false,
-      showCustomCloseIcon: false,
-      showCustomIconPosition: false,
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/progress/demo/index.vue b/src/progress/demo/index.vue
index 0986dd226..b129cb19d 100644
--- a/src/progress/demo/index.vue
+++ b/src/progress/demo/index.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    title2: '置灰',
+    title3: '样式定制',
+    strokeWidth: '线条粗细',
+  },
+  'en-US': {
+    title2: 'Inactive',
+    title3: 'Custom Style',
+    strokeWidth: 'Stroke Width',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-progress :percentage="50" />
@@ -23,30 +42,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    title2: '置灰',
-    title3: '样式定制',
-    strokeWidth: '线条粗细',
-  },
-  'en-US': {
-    title2: 'Inactive',
-    title3: 'Custom Style',
-    strokeWidth: 'Stroke Width',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue
index acb99af75..8636b6a9a 100644
--- a/src/pull-refresh/demo/index.vue
+++ b/src/pull-refresh/demo/index.vue
@@ -1,3 +1,58 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    try: '下拉试试',
+    text: '刷新次数',
+    success: '刷新成功',
+    successTip: '成功提示',
+    customTips: '自定义提示',
+  },
+  'en-US': {
+    try: 'Try it down',
+    text: 'Refresh Count',
+    success: 'Refresh success',
+    successTip: 'Success Tip',
+    customTips: 'Custom Tips',
+  },
+};
+
+const t = useTranslate(i18n);
+const count = ref(0);
+const loading = ref(false);
+
+const tips = computed(() => {
+  if (count.value) {
+    return `${t('text')}: ${count.value}`;
+  }
+  return t('try');
+});
+
+const onRefresh = (showToast: boolean) => {
+  setTimeout(() => {
+    if (showToast) {
+      Toast(t('success'));
+    }
+    loading.value = false;
+    count.value++;
+  }, 1000);
+};
+
+const preloadImage = () => {
+  // preload doge image
+  const doge = new Image();
+  const dogeFire = new Image();
+
+  doge.src = 'https://b.yzcdn.cn/vant/doge.png';
+  dogeFire.src = 'https://b.yzcdn.cn/vant/doge-fire.jpg';
+};
+
+onMounted(preloadImage);
+</script>
+
 <template>
   <van-tabs>
     <van-tab :title="t('basicUsage')">
@@ -41,74 +96,6 @@
   </van-tabs>
 </template>
 
-<script lang="ts">
-import { computed, onMounted, reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    try: '下拉试试',
-    text: '刷新次数',
-    success: '刷新成功',
-    successTip: '成功提示',
-    customTips: '自定义提示',
-  },
-  'en-US': {
-    try: 'Try it down',
-    text: 'Refresh Count',
-    success: 'Refresh success',
-    successTip: 'Success Tip',
-    customTips: 'Custom Tips',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      count: 0,
-      loading: false,
-    });
-
-    const tips = computed(() => {
-      if (state.count) {
-        return `${t('text')}: ${state.count}`;
-      }
-      return t('try');
-    });
-
-    const onRefresh = (showToast: boolean) => {
-      setTimeout(() => {
-        if (showToast) {
-          Toast(t('success'));
-        }
-        state.loading = false;
-        state.count++;
-      }, 1000);
-    };
-
-    const preloadImage = () => {
-      // preload doge image
-      const doge = new Image();
-      const dogeFire = new Image();
-
-      doge.src = 'https://b.yzcdn.cn/vant/doge.png';
-      dogeFire.src = 'https://b.yzcdn.cn/vant/doge-fire.jpg';
-    };
-
-    onMounted(preloadImage);
-
-    return {
-      ...toRefs(state),
-      t,
-      tips,
-      onRefresh,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index f12392d21..c9c479c9b 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -1,3 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    radio: '单选框',
+    text1: '未选中禁用',
+    text2: '选中且禁用',
+    withCell: '与 Cell 组件一起使用',
+    horizontal: '水平排列',
+    customIcon: '自定义图标',
+    customColor: '自定义颜色',
+    customShape: '自定义形状',
+    customIconSize: '自定义大小',
+    disableLabel: '禁用文本点击',
+  },
+  'en-US': {
+    radio: 'Radio',
+    text1: 'Disabled',
+    text2: 'Disabled and checked',
+    withCell: 'Inside a Cell',
+    horizontal: 'Hrizontal',
+    customIcon: 'Custom Icon',
+    customColor: 'Custom Color',
+    customShape: 'Custom Shape',
+    customIconSize: 'Custom Icon Size',
+    disableLabel: 'Disable label click',
+  },
+};
+
+const t = useTranslate(i18n);
+const radio1 = ref('1');
+const radio2 = ref('2');
+const radio3 = ref('1');
+const radio4 = ref('1');
+const radio5 = ref('1');
+const radioLabel = ref('1');
+const radioShape = ref('1');
+const radioIconSize = ref('1');
+const radioHorizontal = ref('1');
+const activeIcon = 'https://img.yzcdn.cn/vant/user-active.png';
+const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-radio-group v-model="radio1" class="demo-radio-group">
@@ -91,62 +136,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    radio: '单选框',
-    text1: '未选中禁用',
-    text2: '选中且禁用',
-    withCell: '与 Cell 组件一起使用',
-    horizontal: '水平排列',
-    customIcon: '自定义图标',
-    customColor: '自定义颜色',
-    customShape: '自定义形状',
-    customIconSize: '自定义大小',
-    disableLabel: '禁用文本点击',
-  },
-  'en-US': {
-    radio: 'Radio',
-    text1: 'Disabled',
-    text2: 'Disabled and checked',
-    withCell: 'Inside a Cell',
-    horizontal: 'Hrizontal',
-    customIcon: 'Custom Icon',
-    customColor: 'Custom Color',
-    customShape: 'Custom Shape',
-    customIconSize: 'Custom Icon Size',
-    disableLabel: 'Disable label click',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      radio1: '1',
-      radio2: '2',
-      radio3: '1',
-      radio4: '1',
-      radio5: '1',
-      radioLabel: '1',
-      radioShape: '1',
-      radioIconSize: '1',
-      radioHorizontal: '1',
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index cbf15a517..e6816e31c 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -1,3 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    halfStar: '半星',
+    disabled: '禁用状态',
+    customIcon: '自定义图标',
+    customStyle: '自定义样式',
+    customCount: '自定义数量',
+    readonly: '只读状态',
+    readonlyHalfStar: '只读状态小数显示',
+    changeEvent: '监听 change 事件',
+    toastContent: (value: number) => `当前值：${value}`,
+  },
+  'en-US': {
+    halfStar: 'Half Star',
+    disabled: 'Disabled',
+    customIcon: 'Custom Icon',
+    customStyle: 'Custom Style',
+    customCount: 'Custom Count',
+    readonly: 'Readonly',
+    readonlyHalfStar: 'Readonly Half Star',
+    changeEvent: 'Change Event',
+    toastContent: (value: number) => `current value：${value}`,
+  },
+};
+
+const t = useTranslate(i18n);
+const value1 = ref(3);
+const value2 = ref(3);
+const value3 = ref(3);
+const value4 = ref(2.5);
+const value5 = ref(4);
+const value6 = ref(3);
+const value7 = ref(3.3);
+const value8 = ref(2);
+
+const onChange = (value: number) => Toast(t('toastContent', value));
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-rate v-model="value1" />
@@ -42,61 +85,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    halfStar: '半星',
-    disabled: '禁用状态',
-    customIcon: '自定义图标',
-    customStyle: '自定义样式',
-    customCount: '自定义数量',
-    readonly: '只读状态',
-    readonlyHalfStar: '只读状态小数显示',
-    changeEvent: '监听 change 事件',
-    toastContent: (value: number) => `当前值：${value}`,
-  },
-  'en-US': {
-    halfStar: 'Half Star',
-    disabled: 'Disabled',
-    customIcon: 'Custom Icon',
-    customStyle: 'Custom Style',
-    customCount: 'Custom Count',
-    readonly: 'Readonly',
-    readonlyHalfStar: 'Readonly Half Star',
-    changeEvent: 'Change Event',
-    toastContent: (value: number) => `current value：${value}`,
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value1: 3,
-      value2: 3,
-      value3: 3,
-      value4: 2.5,
-      value5: 4,
-      value6: 3,
-      value7: 3.3,
-      value8: 2,
-    });
-
-    const onChange = (value: number) => Toast(t('toastContent', value));
-
-    return {
-      ...toRefs(state),
-      t,
-      onChange,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/search/demo/index.vue b/src/search/demo/index.vue
index 5a8d7cb03..3d3c3bebd 100644
--- a/src/search/demo/index.vue
+++ b/src/search/demo/index.vue
@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    label: '地址',
+    disabled: '禁用搜索框',
+    inputAlign: '搜索框内容对齐',
+    background: '自定义背景色',
+    placeholder: '请输入搜索关键词',
+    customButton: '自定义按钮',
+    listenToEvents: '事件监听',
+  },
+  'en-US': {
+    label: 'Address',
+    disabled: 'Disabled',
+    inputAlign: 'Input Align',
+    background: 'Custom Background Color',
+    placeholder: 'Placeholder',
+    customButton: 'Custom Action Button',
+    listenToEvents: 'Listen to Events',
+  },
+};
+
+const t = useTranslate(i18n);
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+const value4 = ref('');
+const value5 = ref('');
+const value6 = ref('');
+
+const onSearch = (val: string) => Toast(val);
+const onCancel = () => Toast(t('cancel'));
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-search v-model="value1" :placeholder="t('placeholder')" />
@@ -50,54 +88,3 @@
     </van-search>
   </demo-block>
 </template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    label: '地址',
-    disabled: '禁用搜索框',
-    inputAlign: '搜索框内容对齐',
-    background: '自定义背景色',
-    placeholder: '请输入搜索关键词',
-    customButton: '自定义按钮',
-    listenToEvents: '事件监听',
-  },
-  'en-US': {
-    label: 'Address',
-    disabled: 'Disabled',
-    inputAlign: 'Input Align',
-    background: 'Custom Background Color',
-    placeholder: 'Placeholder',
-    customButton: 'Custom Action Button',
-    listenToEvents: 'Listen to Events',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value1: '',
-      value2: '',
-      value3: '',
-      value4: '',
-      value5: '',
-      value6: '',
-    });
-
-    const onSearch = (val: string) => Toast(val);
-    const onCancel = () => Toast(t('cancel'));
-
-    return {
-      ...toRefs(state),
-      t,
-      onSearch,
-      onCancel,
-    };
-  },
-};
-</script>
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
index 68906dd63..dbda3c74a 100644
--- a/src/share-sheet/demo/index.vue
+++ b/src/share-sheet/demo/index.vue
@@ -1,46 +1,4 @@
-<template>
-  <demo-block card :title="t('basicUsage')">
-    <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
-    <van-share-sheet
-      v-model:show="show.basic"
-      :title="t('title')"
-      :options="options"
-      @select="onSelect"
-    />
-  </demo-block>
-
-  <demo-block card :title="t('multiLine')">
-    <van-cell is-link :title="t('showSheet')" @click="show.multiLine = true" />
-    <van-share-sheet
-      v-model:show="show.multiLine"
-      :title="t('title')"
-      :options="multiLineOptions"
-      @select="onSelect"
-    />
-  </demo-block>
-
-  <demo-block card :title="t('customIcon')">
-    <van-cell is-link :title="t('showSheet')" @click="show.customIcon = true" />
-    <van-share-sheet
-      v-model:show="show.customIcon"
-      :options="customIconOptions"
-      @select="onSelect"
-    />
-  </demo-block>
-
-  <demo-block card :title="t('withDesc')">
-    <van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
-    <van-share-sheet
-      v-model:show="show.withDesc"
-      :title="t('title')"
-      :options="optionsWithDesc"
-      :description="t('description')"
-      @select="onSelect"
-    />
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { computed, reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ShareSheetOption, ShareSheetOptions } from '..';
@@ -83,87 +41,111 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const show = reactive({
-      basic: false,
-      withDesc: false,
-      multiLine: false,
-      customIcon: false,
-    });
+const t = useTranslate(i18n);
+const show = reactive({
+  basic: false,
+  withDesc: false,
+  multiLine: false,
+  customIcon: false,
+});
 
-    const options = computed(() => [
-      { name: t('wechat'), icon: 'wechat' },
-      { name: t('weibo'), icon: 'weibo' },
-      { name: t('link'), icon: 'link' },
-      { name: t('poster'), icon: 'poster' },
-      { name: t('qrcode'), icon: 'qrcode' },
-    ]);
+const options = computed(() => [
+  { name: t('wechat'), icon: 'wechat' },
+  { name: t('weibo'), icon: 'weibo' },
+  { name: t('link'), icon: 'link' },
+  { name: t('poster'), icon: 'poster' },
+  { name: t('qrcode'), icon: 'qrcode' },
+]);
 
-    const multiLineOptions = computed(() => [
-      [
-        { name: t('wechat'), icon: 'wechat' },
-        { name: t('wechatMoments'), icon: 'wechat-moments' },
-        { name: t('weibo'), icon: 'weibo' },
-        { name: t('qq'), icon: 'qq' },
-      ],
-      [
-        { name: t('link'), icon: 'link' },
-        { name: t('poster'), icon: 'poster' },
-        { name: t('qrcode'), icon: 'qrcode' },
-        { name: t('weappQrcode'), icon: 'weapp-qrcode' },
-      ],
-    ]);
+const multiLineOptions = computed(() => [
+  [
+    { name: t('wechat'), icon: 'wechat' },
+    { name: t('wechatMoments'), icon: 'wechat-moments' },
+    { name: t('weibo'), icon: 'weibo' },
+    { name: t('qq'), icon: 'qq' },
+  ],
+  [
+    { name: t('link'), icon: 'link' },
+    { name: t('poster'), icon: 'poster' },
+    { name: t('qrcode'), icon: 'qrcode' },
+    { name: t('weappQrcode'), icon: 'weapp-qrcode' },
+  ],
+]);
 
-    const customIconOptions = computed(() => [
-      {
-        name: t('name'),
-        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
-      },
-      {
-        name: t('name'),
-        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
-      },
-      {
-        name: t('name'),
-        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
-      },
-    ]);
-
-    const optionsWithDesc = computed<ShareSheetOptions>(() => [
-      { name: t('wechat'), icon: 'wechat' },
-      { name: t('weibo'), icon: 'weibo' },
-      {
-        name: t('link'),
-        icon: 'link',
-        description: t('description'),
-      },
-      { name: t('poster'), icon: 'poster' },
-      { name: t('qrcode'), icon: 'qrcode' },
-    ]);
-
-    const onSelect = (option: ShareSheetOption) => {
-      Toast(option.name);
-      show.basic = false;
-      show.withDesc = false;
-      show.multiLine = false;
-      show.customIcon = false;
-    };
-
-    return {
-      t,
-      show,
-      options,
-      onSelect,
-      optionsWithDesc,
-      multiLineOptions,
-      customIconOptions,
-    };
+const customIconOptions = computed(() => [
+  {
+    name: t('name'),
+    icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
   },
+  {
+    name: t('name'),
+    icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
+  },
+  {
+    name: t('name'),
+    icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
+  },
+]);
+
+const optionsWithDesc = computed<ShareSheetOptions>(() => [
+  { name: t('wechat'), icon: 'wechat' },
+  { name: t('weibo'), icon: 'weibo' },
+  {
+    name: t('link'),
+    icon: 'link',
+    description: t('description'),
+  },
+  { name: t('poster'), icon: 'poster' },
+  { name: t('qrcode'), icon: 'qrcode' },
+]);
+
+const onSelect = (option: ShareSheetOption) => {
+  Toast(option.name);
+  show.basic = false;
+  show.withDesc = false;
+  show.multiLine = false;
+  show.customIcon = false;
 };
 </script>
 
-<style lang="less">
-@import '../../style/var';
-</style>
+<template>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
+    <van-share-sheet
+      v-model:show="show.basic"
+      :title="t('title')"
+      :options="options"
+      @select="onSelect"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('multiLine')">
+    <van-cell is-link :title="t('showSheet')" @click="show.multiLine = true" />
+    <van-share-sheet
+      v-model:show="show.multiLine"
+      :title="t('title')"
+      :options="multiLineOptions"
+      @select="onSelect"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('customIcon')">
+    <van-cell is-link :title="t('showSheet')" @click="show.customIcon = true" />
+    <van-share-sheet
+      v-model:show="show.customIcon"
+      :options="customIconOptions"
+      @select="onSelect"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('withDesc')">
+    <van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
+    <van-share-sheet
+      v-model:show="show.withDesc"
+      :title="t('title')"
+      :options="optionsWithDesc"
+      :description="t('description')"
+      @select="onSelect"
+    />
+  </demo-block>
+</template>
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index 6b19ef1a3..ba06f41a9 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -1,3 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    title: '标签名',
+    disabled: '禁用选项',
+    showBadge: '徽标提示',
+    changeEvent: '监听切换事件',
+  },
+  'en-US': {
+    disabled: 'Disabled',
+    showBadge: 'Show Badge',
+    changeEvent: 'Change Event',
+  },
+};
+
+const t = useTranslate(i18n);
+const active1 = ref(0);
+const active2 = ref(0);
+const active3 = ref(0);
+const active4 = ref(0);
+
+const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
+</script>
+
 <template>
   <van-grid :column-num="2" :border="false">
     <van-grid-item>
@@ -38,46 +66,6 @@
   </van-grid>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    title: '标签名',
-    disabled: '禁用选项',
-    showBadge: '徽标提示',
-    changeEvent: '监听切换事件',
-  },
-  'en-US': {
-    disabled: 'Disabled',
-    showBadge: 'Show Badge',
-    changeEvent: 'Change Event',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      active1: 0,
-      active2: 0,
-      active3: 0,
-      active4: 0,
-    });
-
-    const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
-
-    return {
-      ...toRefs(state),
-      t,
-      onChange,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/skeleton/demo/index.vue b/src/skeleton/demo/index.vue
index ead772705..b758ee876 100644
--- a/src/skeleton/demo/index.vue
+++ b/src/skeleton/demo/index.vue
@@ -1,3 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    showAvatar: '显示头像',
+    showChildren: '显示子组件',
+    title: '关于 Vant',
+    desc:
+      'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
+  },
+  'en-US': {
+    showAvatar: 'Show Avatar',
+    showChildren: 'Show Children',
+    title: 'About Vant',
+    desc: 'Vant is a set of Mobile UI Components built on Vue.',
+  },
+};
+
+const t = useTranslate(i18n);
+const show = ref(false);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-skeleton title :row="3" />
@@ -21,39 +45,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    showAvatar: '显示头像',
-    showChildren: '显示子组件',
-    title: '关于 Vant',
-    desc:
-      'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
-  },
-  'en-US': {
-    showAvatar: 'Show Avatar',
-    showChildren: 'Show Children',
-    title: 'About Vant',
-    desc: 'Vant is a set of Mobile UI Components built on Vue.',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const show = ref(false);
-
-    return {
-      t,
-      show,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index c009d8eaa..fa2a62074 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -1,3 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    text: '当前值：',
+    title1: '基础用法',
+    title2: '双滑块',
+    title3: '指定选择范围',
+    title4: '禁用',
+    title5: '指定步长',
+    vertical: '垂直方向',
+    customStyle: '自定义样式',
+    customButton: '自定义按钮',
+  },
+  'en-US': {
+    text: 'Current value: ',
+    title1: 'Basic Usage',
+    title2: 'Dual thumb mode',
+    title3: 'Range',
+    title4: 'Disabled',
+    title5: 'Step size',
+    vertical: 'Vertical',
+    customStyle: 'Custom Style',
+    customButton: 'Custom Button',
+  },
+};
+
+const t = useTranslate(i18n);
+const value1 = ref(50);
+const value2 = ref([20, 60]);
+const value3 = ref(0);
+const value4 = ref(50);
+const value5 = ref(50);
+const value6 = ref(50);
+const value7 = ref(50);
+const value8 = ref(50);
+const value9 = ref([20, 60]);
+
+const onChange = (value: string) => Toast(t('text') + value);
+</script>
+
 <template>
   <demo-block :title="t('title1')">
     <van-slider v-model="value1" @change="onChange" />
@@ -50,62 +94,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    text: '当前值：',
-    title1: '基础用法',
-    title2: '双滑块',
-    title3: '指定选择范围',
-    title4: '禁用',
-    title5: '指定步长',
-    vertical: '垂直方向',
-    customStyle: '自定义样式',
-    customButton: '自定义按钮',
-  },
-  'en-US': {
-    text: 'Current value: ',
-    title1: 'Basic Usage',
-    title2: 'Dual thumb mode',
-    title3: 'Range',
-    title4: 'Disabled',
-    title5: 'Step size',
-    vertical: 'Vertical',
-    customStyle: 'Custom Style',
-    customButton: 'Custom Button',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value1: 50,
-      value2: [20, 60],
-      value3: 0,
-      value4: 50,
-      value5: 50,
-      value6: 50,
-      value7: 50,
-      value8: 50,
-      value9: [20, 60],
-    });
-
-    const onChange = (value: string) => Toast(t('text') + value);
-
-    return {
-      ...toRefs(state),
-      t,
-      onChange,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index a1c761f2e..e71c48b8e 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -1,3 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    step: '步长设置',
+    range: '限制输入范围',
+    integer: '限制输入整数',
+    roundTheme: '圆角风格',
+    customSize: '自定义大小',
+    beforeChange: '异步变更',
+    disableInput: '禁用输入框',
+    decimalLength: '固定小数位数',
+  },
+  'en-US': {
+    step: 'Step',
+    range: 'Range',
+    integer: 'Integer',
+    roundTheme: 'Round Theme',
+    customSize: 'Custom Size',
+    beforeChange: 'Before Change',
+    disableInput: 'Disable Input',
+    decimalLength: 'Decimal Length',
+  },
+};
+
+const t = useTranslate(i18n);
+const stepper1 = ref(1);
+const stepper2 = ref(1);
+const stepper3 = ref(1);
+const stepper4 = ref(1);
+const stepper5 = ref(1);
+const stepper6 = ref(1);
+const stepper7 = ref(1);
+const stepper8 = ref(1);
+const stepperRound = ref(1);
+const disabledInput = ref(1);
+
+const beforeChange = () => {
+  Toast.loading({ forbidClick: true });
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      Toast.clear();
+      resolve(true);
+    }, 500);
+  });
+};
+</script>
+
 <template>
   <demo-block card>
     <van-cell center :title="t('basicUsage')">
@@ -66,67 +118,3 @@
     </van-cell>
   </demo-block>
 </template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    step: '步长设置',
-    range: '限制输入范围',
-    integer: '限制输入整数',
-    roundTheme: '圆角风格',
-    customSize: '自定义大小',
-    beforeChange: '异步变更',
-    disableInput: '禁用输入框',
-    decimalLength: '固定小数位数',
-  },
-  'en-US': {
-    step: 'Step',
-    range: 'Range',
-    integer: 'Integer',
-    roundTheme: 'Round Theme',
-    customSize: 'Custom Size',
-    beforeChange: 'Before Change',
-    disableInput: 'Disable Input',
-    decimalLength: 'Decimal Length',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      stepper1: 1,
-      stepper2: 1,
-      stepper3: 1,
-      stepper4: 1,
-      stepper5: 1,
-      stepper6: 1,
-      stepper7: 1,
-      stepper8: 1,
-      stepperRound: 1,
-      disabledInput: 1,
-    });
-
-    const beforeChange = () => {
-      Toast.loading({ forbidClick: true });
-
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          Toast.clear();
-          resolve(true);
-        }, 500);
-      });
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      beforeChange,
-    };
-  },
-};
-</script>
diff --git a/src/steps/demo/index.vue b/src/steps/demo/index.vue
index 8131ee2f5..ec0787731 100644
--- a/src/steps/demo/index.vue
+++ b/src/steps/demo/index.vue
@@ -1,3 +1,44 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    nextStep: '下一步',
+    step1: '买家下单',
+    step2: '商家接单',
+    step3: '买家提货',
+    step4: '交易完成',
+    title2: '描述信息',
+    title3: '竖向步骤条',
+    status1: '【城市】物流状态1',
+    status2: '【城市】物流状态',
+    status3: '快件已发货',
+    customStyle: '自定义样式',
+  },
+  'en-US': {
+    nextStep: 'Next Step',
+    step1: 'Step1',
+    step2: 'Step2',
+    step3: 'Step3',
+    step4: 'Step4',
+    title2: 'Description',
+    title3: 'Vertical Steps',
+    status1: '【City】Status1',
+    status2: '【City】Status2',
+    status3: '【City】Status3',
+    customStyle: 'Custom Style',
+  },
+};
+
+const t = useTranslate(i18n);
+const active = ref(1);
+
+const nextStep = () => {
+  active.value = ++active.value % 4;
+};
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-steps :active="active">
@@ -42,57 +83,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    nextStep: '下一步',
-    step1: '买家下单',
-    step2: '商家接单',
-    step3: '买家提货',
-    step4: '交易完成',
-    title2: '描述信息',
-    title3: '竖向步骤条',
-    status1: '【城市】物流状态1',
-    status2: '【城市】物流状态',
-    status3: '快件已发货',
-    customStyle: '自定义样式',
-  },
-  'en-US': {
-    nextStep: 'Next Step',
-    step1: 'Step1',
-    step2: 'Step2',
-    step3: 'Step3',
-    step4: 'Step4',
-    title2: 'Description',
-    title3: 'Vertical Steps',
-    status1: '【City】Status1',
-    status2: '【City】Status2',
-    status3: '【City】Status3',
-    customStyle: 'Custom Style',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const active = ref(1);
-
-    const nextStep = () => {
-      active.value = ++active.value % 4;
-    };
-
-    return {
-      t,
-      active,
-      nextStep,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/sticky/demo/index.vue b/src/sticky/demo/index.vue
index 4ca62a1a8..bdc5b0899 100644
--- a/src/sticky/demo/index.vue
+++ b/src/sticky/demo/index.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    offsetTop: '吸顶距离',
+    offsetBottom: '吸底距离',
+    setContainer: '指定容器',
+  },
+  'en-US': {
+    offsetTop: 'Offset Top',
+    offsetBottom: 'Offset Bottom',
+    setContainer: 'Set Container',
+  },
+};
+
+const t = useTranslate(i18n);
+const container = ref(null);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-sticky>
@@ -35,36 +56,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    offsetTop: '吸顶距离',
-    offsetBottom: '吸底距离',
-    setContainer: '指定容器',
-  },
-  'en-US': {
-    offsetTop: 'Offset Top',
-    offsetBottom: 'Offset Bottom',
-    setContainer: 'Set Container',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const container = ref(null);
-
-    return {
-      t,
-      container,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue
index fb45368f9..b8647cdfd 100644
--- a/src/style/demo/index.vue
+++ b/src/style/demo/index.vue
@@ -1,28 +1,5 @@
-<template>
-  <demo-block :title="t('ellipsis')">
-    <div class="van-ellipsis">{{ t('text1') }}</div>
-    <div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
-  </demo-block>
-
-  <demo-block card :title="t('hairline')">
-    <div class="van-hairline--top" />
-  </demo-block>
-
-  <demo-block card :title="t('animation')">
-    <van-cell is-link title="Fade" @click="animate('van-fade')" />
-    <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
-    <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
-    <van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
-    <van-cell is-link title="Slide Right" @click="animate('van-slide-right')" />
-  </demo-block>
-
-  <transition :name="transitionName">
-    <div v-show="show" class="demo-animate-block" />
-  </transition>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -47,32 +24,43 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      show: false,
-      transitionName: '',
-    });
+const t = useTranslate(i18n);
+const show = ref(false);
+const transitionName = ref('');
 
-    const animate = (transitionName: string) => {
-      state.show = true;
-      state.transitionName = transitionName;
+const animate = (newName: string) => {
+  show.value = true;
+  transitionName.value = newName;
 
-      setTimeout(() => {
-        state.show = false;
-      }, 500);
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      animate,
-    };
-  },
+  setTimeout(() => {
+    show.value = false;
+  }, 500);
 };
 </script>
 
+<template>
+  <demo-block :title="t('ellipsis')">
+    <div class="van-ellipsis">{{ t('text1') }}</div>
+    <div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
+  </demo-block>
+
+  <demo-block card :title="t('hairline')">
+    <div class="van-hairline--top" />
+  </demo-block>
+
+  <demo-block card :title="t('animation')">
+    <van-cell is-link title="Fade" @click="animate('van-fade')" />
+    <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
+    <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
+    <van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
+    <van-cell is-link title="Slide Right" @click="animate('van-slide-right')" />
+  </demo-block>
+
+  <transition :name="transitionName">
+    <div v-show="show" class="demo-animate-block" />
+  </transition>
+</template>
+
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue
index 4d7eaeafc..31243b471 100644
--- a/src/submit-bar/demo/index.vue
+++ b/src/submit-bar/demo/index.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    tip1: '你的收货地址不支持同城送, 我们已为你推荐快递',
+    tip2: '你的收货地址不支持同城送, ',
+    tip3: '修改地址',
+    check: '全选',
+    submit: '提交订单',
+    clickLink: '修改地址',
+    clickButton: '点击按钮',
+  },
+  'en-US': {
+    tip1: 'Some tips',
+    tip2: 'Some tips, ',
+    tip3: 'Link',
+    check: 'Label',
+    submit: 'Submit',
+    clickLink: 'Click Link',
+    clickButton: 'Submit',
+  },
+};
+
+const t = useTranslate(i18n);
+const checked = ref(true);
+
+const onSubmit = () => Toast(t('clickButton'));
+const onClickLink = () => Toast(t('clickLink'));
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-submit-bar
@@ -39,50 +72,7 @@
     </van-submit-bar>
   </demo-block>
 </template>
-
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    tip1: '你的收货地址不支持同城送, 我们已为你推荐快递',
-    tip2: '你的收货地址不支持同城送, ',
-    tip3: '修改地址',
-    check: '全选',
-    submit: '提交订单',
-    clickLink: '修改地址',
-    clickButton: '点击按钮',
-  },
-  'en-US': {
-    tip1: 'Some tips',
-    tip2: 'Some tips, ',
-    tip3: 'Link',
-    check: 'Label',
-    submit: 'Submit',
-    clickLink: 'Click Link',
-    clickButton: 'Submit',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const checked = ref(true);
-
-    const onSubmit = () => Toast(t('clickButton'));
-    const onClickLink = () => Toast(t('clickLink'));
-
-    return {
-      t,
-      checked,
-      onSubmit,
-      onClickLink,
-    };
-  },
-};
-</script>
+Ï
 
 <style lang="less">
 @import '../../style/var';
diff --git a/src/swipe-cell/demo/index.vue b/src/swipe-cell/demo/index.vue
index bcb227ef6..246ff6992 100644
--- a/src/swipe-cell/demo/index.vue
+++ b/src/swipe-cell/demo/index.vue
@@ -1,3 +1,49 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+import { Dialog } from '../../dialog';
+
+const i18n = {
+  'zh-CN': {
+    select: '选择',
+    delete: '删除',
+    collect: '收藏',
+    title: '单元格',
+    confirm: '确定删除吗？',
+    cardTitle: '商品标题',
+    beforeClose: '异步关闭',
+    customContent: '自定义内容',
+  },
+  'en-US': {
+    select: 'Select',
+    delete: 'Delete',
+    collect: 'Collect',
+    title: 'Cell',
+    confirm: 'Are you sure to delete?',
+    cardTitle: 'Title',
+    beforeClose: 'Before Close',
+    customContent: 'Custom Content',
+  },
+};
+
+const t = useTranslate(i18n);
+const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
+
+const beforeClose = ({ position }: { position: string }) => {
+  switch (position) {
+    case 'left':
+    case 'cell':
+    case 'outside':
+      return true;
+    case 'right':
+      return new Promise((resolve) => {
+        Dialog.confirm({
+          title: t('confirm'),
+        }).then(resolve);
+      });
+  }
+};
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-swipe-cell>
@@ -45,60 +91,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-import { Dialog } from '../../dialog';
-
-const i18n = {
-  'zh-CN': {
-    select: '选择',
-    delete: '删除',
-    collect: '收藏',
-    title: '单元格',
-    confirm: '确定删除吗？',
-    cardTitle: '商品标题',
-    beforeClose: '异步关闭',
-    customContent: '自定义内容',
-  },
-  'en-US': {
-    select: 'Select',
-    delete: 'Delete',
-    collect: 'Collect',
-    title: 'Cell',
-    confirm: 'Are you sure to delete?',
-    cardTitle: 'Title',
-    beforeClose: 'Before Close',
-    customContent: 'Custom Content',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const beforeClose = ({ position }: { position: string }) => {
-      switch (position) {
-        case 'left':
-        case 'cell':
-        case 'outside':
-          return true;
-        case 'right':
-          return new Promise((resolve) => {
-            Dialog.confirm({
-              title: t('confirm'),
-            }).then(resolve);
-          });
-      }
-    };
-
-    return {
-      t,
-      imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
-      beforeClose,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
index fee5cffcd..d7e661d95 100644
--- a/src/swipe/demo/index.vue
+++ b/src/swipe/demo/index.vue
@@ -1,3 +1,37 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    title2: '懒加载',
+    title3: '监听 change 事件',
+    title4: '纵向滚动',
+    title5: '自定义滑块大小',
+    title6: '自定义指示器',
+    message: '当前 Swipe 索引：',
+  },
+  'en-US': {
+    title2: 'Lazy Render',
+    title3: 'Change Event',
+    title4: 'Vertical Scrolling',
+    title5: 'Set SwipeItem Size',
+    title6: 'Custom indicator',
+    message: 'Current Swipe index:',
+  },
+};
+
+const t = useTranslate(i18n);
+const images = [
+  'https://img.yzcdn.cn/vant/apple-1.jpg',
+  'https://img.yzcdn.cn/vant/apple-2.jpg',
+  'https://img.yzcdn.cn/vant/apple-3.jpg',
+  'https://img.yzcdn.cn/vant/apple-4.jpg',
+];
+
+const onChange = (index: number) => Toast(t('message') + index);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-swipe :autoplay="3000" indicator-color="white">
@@ -62,50 +96,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    title2: '懒加载',
-    title3: '监听 change 事件',
-    title4: '纵向滚动',
-    title5: '自定义滑块大小',
-    title6: '自定义指示器',
-    message: '当前 Swipe 索引：',
-  },
-  'en-US': {
-    title2: 'Lazy Render',
-    title3: 'Change Event',
-    title4: 'Vertical Scrolling',
-    title5: 'Set SwipeItem Size',
-    title6: 'Custom indicator',
-    message: 'Current Swipe index:',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const images = [
-      'https://img.yzcdn.cn/vant/apple-1.jpg',
-      'https://img.yzcdn.cn/vant/apple-2.jpg',
-      'https://img.yzcdn.cn/vant/apple-3.jpg',
-      'https://img.yzcdn.cn/vant/apple-4.jpg',
-    ];
-
-    const onChange = (index: number) => Toast(t('message') + index);
-
-    return {
-      t,
-      images,
-      onChange,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index b78eb38d4..ff409d558 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -1,3 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Dialog } from '../../dialog';
+
+const i18n = {
+  'zh-CN': {
+    title: '标题',
+    confirm: '提醒',
+    message: '是否切换开关？',
+    withCell: '搭配单元格使用',
+    customSize: '自定义大小',
+    customColor: '自定义颜色',
+    asyncControl: '异步控制',
+  },
+  'en-US': {
+    title: 'Title',
+    confirm: 'Confirm',
+    message: 'Are you sure to toggle switch?',
+    withCell: 'Inside a Cell',
+    customSize: 'Custom Size',
+    customColor: 'Custom Color',
+    asyncControl: 'Async Control',
+  },
+};
+
+const t = useTranslate(i18n);
+const checked = ref(true);
+const checked2 = ref(true);
+const checked3 = ref(true);
+const checked4 = ref(true);
+const checked5 = ref(true);
+
+const onUpdateValue = (checked: boolean) => {
+  Dialog.confirm({
+    title: t('title'),
+    message: t('message'),
+  }).then(() => {
+    checked4.value = checked;
+  });
+};
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-switch v-model="checked" />
@@ -36,62 +79,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Dialog } from '../../dialog';
-
-const i18n = {
-  'zh-CN': {
-    title: '标题',
-    confirm: '提醒',
-    message: '是否切换开关？',
-    withCell: '搭配单元格使用',
-    customSize: '自定义大小',
-    customColor: '自定义颜色',
-    asyncControl: '异步控制',
-  },
-  'en-US': {
-    title: 'Title',
-    confirm: 'Confirm',
-    message: 'Are you sure to toggle switch?',
-    withCell: 'Inside a Cell',
-    customSize: 'Custom Size',
-    customColor: 'Custom Color',
-    asyncControl: 'Async Control',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      checked: true,
-      checked2: true,
-      checked3: true,
-      checked4: true,
-      checked5: true,
-      checked6: false,
-    });
-
-    const onUpdateValue = (checked: boolean) => {
-      Dialog.confirm({
-        title: t('title'),
-        message: t('message'),
-      }).then(() => {
-        state.checked4 = checked;
-      });
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onUpdateValue,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue
index a4746e9f6..20d3ac908 100644
--- a/src/tab/demo/index.vue
+++ b/src/tab/demo/index.vue
@@ -1,3 +1,62 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    tab: '标签 ',
+    title2: '标签栏滚动',
+    title3: '禁用标签',
+    title4: '样式风格',
+    title5: '点击事件',
+    title6: '粘性布局',
+    title7: '自定义标签',
+    title8: '切换动画',
+    title9: '滑动切换',
+    title10: '滚动导航',
+    disabled: ' 已被禁用',
+    matchByName: '通过名称匹配',
+    beforeChange: '异步切换',
+  },
+  'en-US': {
+    tab: 'Tab ',
+    content: 'content of tab',
+    title2: 'Swipe Tabs',
+    title3: 'Disabled Tab',
+    title4: 'Card Style',
+    title5: 'Click Event',
+    title6: 'Sticky',
+    title7: 'Custom Tab',
+    title8: 'Switch Animation',
+    title9: 'Swipeable',
+    title10: 'Scrollspy',
+    disabled: ' is disabled',
+    matchByName: 'Match By Name',
+    beforeChange: 'Before Change',
+  },
+};
+
+const t = useTranslate(i18n);
+const active = ref(2);
+const activeName = ref('b');
+
+const tabs = [1, 2, 3, 4];
+
+const onClickTab = ({ title }: { title: string }) => {
+  Toast(title);
+};
+
+const beforeChange = (name: number) => {
+  if (name === 1) {
+    return false;
+  }
+  return new Promise((resolve) => {
+    resolve(name !== 3);
+  });
+};
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-tabs v-model:active="active">
@@ -102,79 +161,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    tab: '标签 ',
-    title2: '标签栏滚动',
-    title3: '禁用标签',
-    title4: '样式风格',
-    title5: '点击事件',
-    title6: '粘性布局',
-    title7: '自定义标签',
-    title8: '切换动画',
-    title9: '滑动切换',
-    title10: '滚动导航',
-    disabled: ' 已被禁用',
-    matchByName: '通过名称匹配',
-    beforeChange: '异步切换',
-  },
-  'en-US': {
-    tab: 'Tab ',
-    content: 'content of tab',
-    title2: 'Swipe Tabs',
-    title3: 'Disabled Tab',
-    title4: 'Card Style',
-    title5: 'Click Event',
-    title6: 'Sticky',
-    title7: 'Custom Tab',
-    title8: 'Switch Animation',
-    title9: 'Swipeable',
-    title10: 'Scrollspy',
-    disabled: ' is disabled',
-    matchByName: 'Match By Name',
-    beforeChange: 'Before Change',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      active: 2,
-      activeName: 'b',
-    });
-
-    const tabs = [1, 2, 3, 4];
-
-    const onClickTab = ({ title }: { title: string }) => {
-      Toast(title);
-    };
-
-    const beforeChange = (name: number) => {
-      if (name === 1) {
-        return false;
-      }
-      return new Promise((resolve) => {
-        resolve(name !== 3);
-      });
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      tabs,
-      onClickTab,
-      beforeChange,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index 2dce829c3..78f4ee161 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -1,3 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    badge: '徽标提示',
+    customIcon: '自定义图标',
+    customColor: '自定义颜色',
+    matchByName: '通过名称匹配',
+    switchEvent: '监听切换事件',
+  },
+  'en-US': {
+    badge: 'Show Badge',
+    customIcon: 'Custom Icon',
+    customColor: 'Custom Color',
+    matchByName: 'Match by name',
+    switchEvent: 'Change Event',
+  },
+};
+
+const t = useTranslate(i18n);
+const active = ref(0);
+const active2 = ref(0);
+const active3 = ref(0);
+const active4 = ref(0);
+const active5 = ref(0);
+const activeName = ref('home');
+
+const icon = {
+  active: 'https://img.yzcdn.cn/vant/user-active.png',
+  inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
+};
+
+const onChange = (index: number) => {
+  Toast(`${t('tab')} ${index + 1}`);
+};
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-tabbar v-model="active">
@@ -70,57 +110,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    badge: '徽标提示',
-    customIcon: '自定义图标',
-    customColor: '自定义颜色',
-    matchByName: '通过名称匹配',
-    switchEvent: '监听切换事件',
-  },
-  'en-US': {
-    badge: 'Show Badge',
-    customIcon: 'Custom Icon',
-    customColor: 'Custom Color',
-    matchByName: 'Match by name',
-    switchEvent: 'Change Event',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      active: 0,
-      active2: 0,
-      active3: 0,
-      active4: 0,
-      active5: 0,
-      activeName: 'home',
-    });
-
-    const onChange = (index: number) => {
-      Toast(`${t('tab')} ${index + 1}`);
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      icon: {
-        active: 'https://img.yzcdn.cn/vant/user-active.png',
-        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
-      },
-      onChange,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 .demo-tabbar {
   .van-tabbar {
diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue
index 00be4a821..95b58934a 100644
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@@ -1,3 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    type: '类型',
+    mark: '标记样式',
+    plain: '空心样式',
+    round: '圆角样式',
+    tagStyle: '样式风格',
+    closeable: '可关闭标签',
+    smallSize: '小号标签',
+    largeSize: '大号标签',
+    mediumSize: '中号标签',
+    customSize: '标签大小',
+    customColor: '自定义颜色',
+    customBgColor: '背景颜色',
+    customTextColor: '文字颜色',
+    customPlainColor: '空心颜色',
+  },
+  'en-US': {
+    mark: 'Mark style',
+    plain: 'Plain style',
+    round: 'Round style',
+    tagStyle: 'Tag Style',
+    closeable: 'Closeable',
+    smallSize: 'Small Size',
+    largeSize: 'Large Size',
+    mediumSize: 'Medium Size',
+    customColor: 'Custom Color',
+    customSize: 'Custom Size',
+    customBgColor: 'Background Color',
+    customTextColor: 'Text Color',
+    customPlainColor: 'Plain Color',
+  },
+};
+
+const t = useTranslate(i18n);
+const show = ref(true);
+const close = () => {
+  show.value = false;
+};
+</script>
+
 <template>
   <demo-block card :title="t('basicUsage')">
     <van-cell :title="`primary ${t('type')}`">
@@ -90,61 +135,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    type: '类型',
-    mark: '标记样式',
-    plain: '空心样式',
-    round: '圆角样式',
-    tagStyle: '样式风格',
-    closeable: '可关闭标签',
-    smallSize: '小号标签',
-    largeSize: '大号标签',
-    mediumSize: '中号标签',
-    customSize: '标签大小',
-    customColor: '自定义颜色',
-    customBgColor: '背景颜色',
-    customTextColor: '文字颜色',
-    customPlainColor: '空心颜色',
-  },
-  'en-US': {
-    mark: 'Mark style',
-    plain: 'Plain style',
-    round: 'Round style',
-    tagStyle: 'Tag Style',
-    closeable: 'Closeable',
-    smallSize: 'Small Size',
-    largeSize: 'Large Size',
-    mediumSize: 'Medium Size',
-    customColor: 'Custom Color',
-    customSize: 'Custom Size',
-    customBgColor: 'Background Color',
-    customTextColor: 'Text Color',
-    customPlainColor: 'Plain Color',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const show = ref(true);
-    const close = () => {
-      show.value = false;
-    };
-
-    return {
-      t,
-      show,
-      close,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';
 
diff --git a/src/toast/demo/index.vue b/src/toast/demo/index.vue
index fe7f3e512..32ff34643 100644
--- a/src/toast/demo/index.vue
+++ b/src/toast/demo/index.vue
@@ -1,36 +1,4 @@
-<template>
-  <demo-block card :title="t('basicUsage')">
-    <van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
-    <van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
-    <van-cell is-link :title="t('success')" @click="showSuccessToast" />
-    <van-cell is-link :title="t('fail')" @click="showFailToast" />
-  </demo-block>
-
-  <demo-block card v-if="!isWeapp" :title="t('customIcon')">
-    <van-cell is-link :title="t('customIcon')" @click="showIconToast" />
-    <van-cell is-link :title="t('customImage')" @click="showImageToast" />
-    <van-cell
-      is-link
-      :title="t('loadingType')"
-      @click="showLoadingToast('spinner')"
-    />
-  </demo-block>
-
-  <demo-block card v-if="!isWeapp" :title="t('customPosition')">
-    <van-cell is-link :title="t('positionTop')" @click="showTopToast" />
-    <van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
-  </demo-block>
-
-  <demo-block card :title="t('updateMessage')">
-    <van-cell
-      is-link
-      :title="t('updateMessage')"
-      @click="showCustomizedToast"
-    />
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '..';
 import type { LoadingType } from '../../loading';
@@ -74,84 +42,100 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
+const t = useTranslate(i18n);
 
-    const showLoadingToast = (loadingType: LoadingType) => {
-      Toast.loading({
-        forbidClick: true,
-        message: t('loading'),
-        loadingType,
-      });
-    };
+const showLoadingToast = (loadingType?: LoadingType) => {
+  Toast.loading({
+    forbidClick: true,
+    message: t('loading'),
+    loadingType,
+  });
+};
 
-    const showSuccessToast = () => {
-      Toast.success(t('text2'));
-    };
+const showSuccessToast = () => {
+  Toast.success(t('text2'));
+};
 
-    const showFailToast = () => {
-      Toast.fail(t('text3'));
-    };
+const showFailToast = () => {
+  Toast.fail(t('text3'));
+};
 
-    const showTopToast = () => {
-      Toast({
-        message: t('positionTop'),
-        position: 'top',
-      });
-    };
+const showTopToast = () => {
+  Toast({
+    message: t('positionTop'),
+    position: 'top',
+  });
+};
 
-    const showBottomToast = () => {
-      Toast({
-        message: t('positionBottom'),
-        position: 'bottom',
-      });
-    };
+const showBottomToast = () => {
+  Toast({
+    message: t('positionBottom'),
+    position: 'bottom',
+  });
+};
 
-    const showIconToast = () => {
-      Toast({
-        message: t('customIcon'),
-        icon: 'like-o',
-      });
-    };
+const showIconToast = () => {
+  Toast({
+    message: t('customIcon'),
+    icon: 'like-o',
+  });
+};
 
-    const showImageToast = () => {
-      Toast({
-        message: t('customImage'),
-        icon: 'https://img.yzcdn.cn/vant/logo.png',
-      });
-    };
+const showImageToast = () => {
+  Toast({
+    message: t('customImage'),
+    icon: 'https://img.yzcdn.cn/vant/logo.png',
+  });
+};
 
-    const showCustomizedToast = () => {
-      const toast = Toast.loading({
-        duration: 0,
-        forbidClick: true,
-        message: t('text4', 3),
-      });
+const showCustomizedToast = () => {
+  const toast = Toast.loading({
+    duration: 0,
+    forbidClick: true,
+    message: t('text4', 3),
+  });
 
-      let second = 3;
-      const timer = setInterval(() => {
-        second--;
-        if (second) {
-          toast.message = t('text4', second);
-        } else {
-          clearInterval(timer);
-          Toast.clear();
-        }
-      }, 1000);
-    };
-
-    return {
-      t,
-      showTopToast,
-      showFailToast,
-      showIconToast,
-      showImageToast,
-      showBottomToast,
-      showLoadingToast,
-      showSuccessToast,
-      showCustomizedToast,
-    };
-  },
+  let second = 3;
+  const timer = setInterval(() => {
+    second--;
+    if (second) {
+      toast.message = t('text4', second);
+    } else {
+      clearInterval(timer);
+      Toast.clear();
+    }
+  }, 1000);
 };
 </script>
+
+<template>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link :title="t('title1')" @click="Toast(t('text'))" />
+    <van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
+    <van-cell is-link :title="t('success')" @click="showSuccessToast" />
+    <van-cell is-link :title="t('fail')" @click="showFailToast" />
+  </demo-block>
+
+  <demo-block card v-if="!isWeapp" :title="t('customIcon')">
+    <van-cell is-link :title="t('customIcon')" @click="showIconToast" />
+    <van-cell is-link :title="t('customImage')" @click="showImageToast" />
+    <van-cell
+      is-link
+      :title="t('loadingType')"
+      @click="showLoadingToast('spinner')"
+    />
+  </demo-block>
+
+  <demo-block card v-if="!isWeapp" :title="t('customPosition')">
+    <van-cell is-link :title="t('positionTop')" @click="showTopToast" />
+    <van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
+  </demo-block>
+
+  <demo-block card :title="t('updateMessage')">
+    <van-cell
+      is-link
+      :title="t('updateMessage')"
+      @click="showCustomizedToast"
+    />
+  </demo-block>
+</template>
diff --git a/src/tree-select/demo/index.vue b/src/tree-select/demo/index.vue
index 52c82ebee..94783fbe9 100644
--- a/src/tree-select/demo/index.vue
+++ b/src/tree-select/demo/index.vue
@@ -1,3 +1,50 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { zhCNData } from './data-zh';
+import { enUSData } from './data-en';
+import { deepClone } from '../../utils/deep-clone';
+
+const i18n = {
+  'zh-CN': {
+    showBadge: '徽标提示',
+    radioMode: '单选模式',
+    multipleMode: '多选模式',
+    customContent: '自定义内容',
+    data: zhCNData,
+    dataSimple: [{ text: '分组 1' }, { text: '分组 2' }],
+  },
+  'en-US': {
+    showBadge: 'Show Badge',
+    radioMode: 'Radio Mode',
+    multipleMode: 'Multiple Mode',
+    customContent: 'Custom Content',
+    data: enUSData,
+    dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
+  },
+};
+
+const t = useTranslate(i18n);
+const activeId = ref(1);
+const activeId2 = ref(1);
+const activeIds = ref([1, 2]);
+const activeIndex = ref(0);
+const activeIndex2 = ref(0);
+const activeIndex3 = ref(0);
+const activeIndex4 = ref(0);
+
+const items = computed(() => t('data'));
+
+const simpleItems = computed(() => t('dataSimple'));
+
+const badgeItems = computed(() => {
+  const data = deepClone(t('data')).slice(0, 2);
+  data[0].dot = true;
+  data[1].badge = 5;
+  return data;
+});
+</script>
+
 <template>
   <demo-block :title="t('radioMode')">
     <van-tree-select
@@ -45,64 +92,3 @@
     />
   </demo-block>
 </template>
-
-<script lang="ts">
-import { computed, reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { zhCNData } from './data-zh';
-import { enUSData } from './data-en';
-import { deepClone } from '../../utils/deep-clone';
-
-const i18n = {
-  'zh-CN': {
-    showBadge: '徽标提示',
-    radioMode: '单选模式',
-    multipleMode: '多选模式',
-    customContent: '自定义内容',
-    data: zhCNData,
-    dataSimple: [{ text: '分组 1' }, { text: '分组 2' }],
-  },
-  'en-US': {
-    showBadge: 'Show Badge',
-    radioMode: 'Radio Mode',
-    multipleMode: 'Multiple Mode',
-    customContent: 'Custom Content',
-    data: enUSData,
-    dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      activeId: 1,
-      activeId2: 1,
-      activeIds: [1, 2],
-      activeIndex: 0,
-      activeIndex2: 0,
-      activeIndex3: 0,
-      activeIndex4: 0,
-    });
-
-    const items = computed(() => t('data'));
-
-    const simpleItems = computed(() => t('dataSimple'));
-
-    const badgeItems = computed(() => {
-      const data = deepClone(t('data')).slice(0, 2);
-      data[0].dot = true;
-      data[1].badge = 5;
-      return data;
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-      items,
-      badgeItems,
-      simpleItems,
-    };
-  },
-};
-</script>
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index 8f04a320d..9e1be8f54 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -1,3 +1,128 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { UploaderFileListItem } from '../types';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    status: '上传状态',
+    failed: '上传失败',
+    upload: '上传文件',
+    preview: '文件预览',
+    maxSize: '限制上传大小',
+    disabled: '禁用文件上传',
+    maxCount: '限制上传数量',
+    uploading: '上传中...',
+    imageName: '图片名称',
+    beforeRead: '上传前置处理',
+    overSizeTip: '文件大小不能超过 500kb',
+    invalidType: '请上传 jpg 格式图片',
+    customUpload: '自定义上传样式',
+    previewCover: '自定义预览样式',
+    customPreviewImage: '自定义单个图片预览',
+    deleteMessage: '删除前置处理',
+  },
+  'en-US': {
+    status: 'Upload Status',
+    failed: 'Failed',
+    upload: 'Upload File',
+    preview: 'Preview File',
+    maxSize: 'Max Size',
+    disabled: 'Disable Uploader',
+    maxCount: 'Max Count',
+    uploading: 'Uploading...',
+    imageName: 'Image Name',
+    beforeRead: 'Before Read',
+    overSizeTip: 'File size cannot exceed 500kb',
+    invalidType: 'Please upload an image in jpg format',
+    customUpload: 'Custom Upload Area',
+    previewCover: 'Preview Cover',
+    customPreviewImage: 'Custom single prevew image',
+    deleteMessage: 'Before Delete',
+  },
+};
+
+const t = useTranslate(i18n);
+
+const fileList = ref([
+  { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+  { url: 'https://img.yzcdn.cn/vant/tree.jpg' },
+]);
+
+const fileList2 = ref([{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }]);
+
+const fileList3 = ref([]);
+
+const fileList4 = ref([{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }]);
+
+const fileList5 = ref([
+  { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+  {
+    url: 'https://img.yzcdn.cn/vant/sand.jpg',
+    deletable: true,
+    beforeDelete: () => {
+      Toast(t('deleteMessage'));
+    },
+  },
+  {
+    url: 'https://img.yzcdn.cn/vant/tree.jpg',
+    deletable: true,
+    imageFit: 'contain',
+    previewSize: 120,
+  },
+]);
+
+const statusFileList = [
+  {
+    url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+    status: 'uploading',
+    message: t('uploading'),
+  },
+  {
+    url: 'https://img.yzcdn.cn/vant/tree.jpg',
+    status: 'failed',
+    message: t('failed'),
+  },
+];
+
+const previewCoverFiles = ref([
+  {
+    url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+    file: {
+      name: t('imageName'),
+    },
+  },
+]);
+
+const beforeRead = (file: File) => {
+  if (file.type !== 'image/jpeg') {
+    Toast(t('invalidType'));
+    return false;
+  }
+  return true;
+};
+
+const afterRead = (file: UploaderFileListItem, detail: unknown) => {
+  console.log(file, detail);
+};
+
+const afterReadFailed = (item: UploaderFileListItem) => {
+  item.status = 'uploading';
+  item.message = t('uploading');
+
+  setTimeout(() => {
+    item.status = 'failed';
+    item.message = t('failed');
+  }, 1000);
+};
+
+const onOversize = (file: UploaderFileListItem, detail: unknown) => {
+  console.log(file, detail);
+  Toast(t('overSizeTip'));
+};
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-uploader :after-read="afterRead" />
@@ -53,139 +178,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { UploaderFileListItem } from '../types';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    status: '上传状态',
-    failed: '上传失败',
-    upload: '上传文件',
-    preview: '文件预览',
-    maxSize: '限制上传大小',
-    disabled: '禁用文件上传',
-    maxCount: '限制上传数量',
-    uploading: '上传中...',
-    imageName: '图片名称',
-    beforeRead: '上传前置处理',
-    overSizeTip: '文件大小不能超过 500kb',
-    invalidType: '请上传 jpg 格式图片',
-    customUpload: '自定义上传样式',
-    previewCover: '自定义预览样式',
-    customPreviewImage: '自定义单个图片预览',
-    deleteMessage: '删除前置处理',
-  },
-  'en-US': {
-    status: 'Upload Status',
-    failed: 'Failed',
-    upload: 'Upload File',
-    preview: 'Preview File',
-    maxSize: 'Max Size',
-    disabled: 'Disable Uploader',
-    maxCount: 'Max Count',
-    uploading: 'Uploading...',
-    imageName: 'Image Name',
-    beforeRead: 'Before Read',
-    overSizeTip: 'File size cannot exceed 500kb',
-    invalidType: 'Please upload an image in jpg format',
-    customUpload: 'Custom Upload Area',
-    previewCover: 'Preview Cover',
-    customPreviewImage: 'Custom single prevew image',
-    deleteMessage: 'Before Delete',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      fileList: [
-        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
-        { url: 'https://img.yzcdn.cn/vant/tree.jpg' },
-      ],
-      fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
-      fileList3: [],
-      fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
-      fileList5: [
-        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
-        {
-          url: 'https://img.yzcdn.cn/vant/sand.jpg',
-          deletable: true,
-          beforeDelete: () => {
-            Toast(t('deleteMessage'));
-          },
-        },
-        {
-          url: 'https://img.yzcdn.cn/vant/tree.jpg',
-          deletable: true,
-          imageFit: 'contain',
-          previewSize: 120,
-        },
-      ],
-      statusFileList: [
-        {
-          url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-          status: 'uploading',
-          message: t('uploading'),
-        },
-        {
-          url: 'https://img.yzcdn.cn/vant/tree.jpg',
-          status: 'failed',
-          message: t('failed'),
-        },
-      ],
-      previewCoverFiles: [
-        {
-          url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-          file: {
-            name: t('imageName'),
-          },
-        },
-      ],
-    });
-
-    const beforeRead = (file: File) => {
-      if (file.type !== 'image/jpeg') {
-        Toast(t('invalidType'));
-        return false;
-      }
-      return true;
-    };
-
-    const afterRead = (file: UploaderFileListItem, detail: unknown) => {
-      console.log(file, detail);
-    };
-
-    const afterReadFailed = (item: UploaderFileListItem) => {
-      item.status = 'uploading';
-      item.message = t('uploading');
-
-      setTimeout(() => {
-        item.status = 'failed';
-        item.message = t('failed');
-      }, 1000);
-    };
-
-    const onOversize = (file: UploaderFileListItem, detail: unknown) => {
-      console.log(file, detail);
-      Toast(t('overSizeTip'));
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      afterRead,
-      beforeRead,
-      onOversize,
-      afterReadFailed,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';