diff --git a/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue b/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue
index 315df60b15..e289ddaf7e 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/calendar/index.vue
@@ -6,13 +6,13 @@
       <nut-cell
         :show-icon="true"
         title="选择单个日期"
-        :desc="date ? `${date} ${dateWeek}` : '请选择'"
+        :desc="state.date ? `${state.date} ${state.dateWeek}` : '请选择'"
         @click="openSwitch('isVisible')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible"
-        :default-value="date"
+        v-model:visible="state.isVisible"
+        :default-value="state.date"
         @close="closeSwitch('isVisible')"
         @choose="setChooseValue"
         :start-date="`2022-01-11`"
@@ -25,13 +25,13 @@
       <nut-cell
         :show-icon="true"
         title="选择日期区间"
-        :desc="date1 ? `${date1[0]}至${date1[1]}` : '请选择'"
+        :desc="state.date1 ? `${state.date1[0]}至${state.date1[1]}` : '请选择'"
         @click="openSwitch('isVisible1')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible1"
-        :default-value="date1"
+        v-model:visible="state.isVisible1"
+        :default-value="state.date1"
         type="range"
         :start-date="`2019-12-22`"
         :end-date="`2021-01-08`"
@@ -46,13 +46,13 @@
       <nut-cell
         :show-icon="true"
         title="选择多个日期"
-        :desc="date7 && date7.length ? `已选择${date7.length}个日期` : '请选择'"
+        :desc="state.date7 && state.date7.length ? `已选择${state.date7.length}个日期` : '请选择'"
         @click="openSwitch('isVisible7')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible7"
-        :default-value="date7"
+        v-model:visible="state.isVisible7"
+        :default-value="state.date7"
         type="multiple"
         :start-date="`2022-01-01`"
         :end-date="`2022-09-10`"
@@ -65,13 +65,13 @@
       <nut-cell
         :show-icon="true"
         title="周选择"
-        :desc="date9 ? `${date9[0]}${'至'}${date9[1]}` : '请选择'"
+        :desc="state.date9 ? `${state.date9[0]}${'至'}${state.date9[1]}` : '请选择'"
         @click="openSwitch('isVisible9')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible9"
-        :default-value="date9"
+        v-model:visible="state.isVisible9"
+        :default-value="state.date9"
         type="week"
         :start-date="`2019-12-22`"
         :end-date="`2021-01-08`"
@@ -87,15 +87,15 @@
       <nut-cell
         :show-icon="true"
         title="选择单个日期"
-        :desc="date3 ? date3 : '请选择'"
+        :desc="state.date3 ? state.date3 : '请选择'"
         @click="openSwitch('isVisible3')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible3"
+        v-model:visible="state.isVisible3"
         @close="closeSwitch('isVisible3')"
         @choose="setChooseValue3"
-        :default-value="date3"
+        :default-value="state.date3"
         :is-auto-back-fill="true"
       >
       </nut-calendar>
@@ -104,13 +104,13 @@
       <nut-cell
         :show-icon="true"
         title="选择日期范围"
-        :desc="date4 ? `${date4[0]}至${date4[1]}` : '请选择'"
+        :desc="state.date4 ? `${state.date4[0]}至${state.date4[1]}` : '请选择'"
         @click="openSwitch('isVisible4')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible4"
-        :default-value="date4"
+        v-model:visible="state.isVisible4"
+        :default-value="state.date4"
         type="range"
         :start-date="`2022-01-01`"
         :end-date="`2022-12-31`"
@@ -125,14 +125,14 @@
       <nut-cell
         :show-icon="true"
         title="自定义按钮"
-        :desc="date5 && date5[0] ? `${date5[0]}至${date5[1]}` : '请选择'"
+        :desc="state.date5 && state.date5[0] ? `${state.date5[0]}至${state.date5[1]}` : '请选择'"
         @click="openSwitch('isVisible5')"
       >
       </nut-cell>
       <nut-calendar
         ref="calendarRef"
-        v-model:visible="isVisible5"
-        :default-value="date5"
+        v-model:visible="state.isVisible5"
+        :default-value="state.date5"
         type="range"
         @close="closeSwitch('isVisible5')"
         @choose="setChooseValue5"
@@ -153,13 +153,13 @@
       <nut-cell
         :show-icon="true"
         title="自定义时间文案"
-        :desc="date6 && date6[0] ? `${date6[0]}至${date6[1]}` : '请选择'"
+        :desc="state.date6 && state.date6[0] ? `${state.date6[0]}至${state.date6[1]}` : '请选择'"
         @click="openSwitch('isVisible6')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible6"
-        :default-value="date6"
+        v-model:visible="state.isVisible6"
+        :default-value="state.date6"
         type="range"
         @close="closeSwitch('isVisible6')"
         @choose="setChooseValue6"
@@ -183,13 +183,13 @@
       <nut-cell
         :showIcon="true"
         title="自定义周起始日"
-        :desc="date8 ? `${date8}` : '请选择'"
+        :desc="state.date8 ? `${state.date8}` : '请选择'"
         @click="openSwitch('isVisible8')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible8"
-        :default-value="date8"
+        v-model:visible="state.isVisible8"
+        :default-value="state.date8"
         @close="closeSwitch('isVisible8')"
         @choose="setChooseValue8"
         :first-day-of-week="2"
@@ -200,7 +200,7 @@
     <div class="test-calendar-wrapper">
       <nut-calendar
         :poppable="false"
-        :default-value="date2"
+        :default-value="state.date2"
         :is-auto-back-fill="true"
         @choose="setChooseValue2"
         :start-date="`2020-02-01`"
@@ -211,136 +211,106 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, ref } from 'vue';
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import Utils from '@/packages/utils/date';
+const env = Taro.getEnv();
 
-export default {
-  props: {},
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-
-    const calendarRef = ref<any>(null);
-    const state = reactive({
-      isVisible: false,
-      date: '2022-02-01',
-      dateWeek: '',
-      date1: ['2020-01-23', '2020-01-26'],
-      date2: '2020-07-08',
-      date3: '',
-      date4: ['2022-02-23', '2022-04-26'],
-      date5: [],
-      date6: [],
-      date7: [],
-      date8: '',
-      date9: ['2020-01-23', '2020-01-26'],
-      isVisible1: false,
-      isVisible2: false,
-      isVisible3: false,
-      isVisible4: false,
-      isVisible5: false,
-      isVisible6: false,
-      isVisible7: false,
-      isVisible8: false,
-      isVisible9: false
-    });
-    const openSwitch = (param: string) => {
-      state[`${param}`] = true;
-    };
+const calendarRef = ref<any>(null);
+const state = reactive({
+  isVisible: false,
+  date: '2022-02-01',
+  dateWeek: '',
+  date1: ['2020-01-23', '2020-01-26'],
+  date2: '2020-07-08',
+  date3: '',
+  date4: ['2022-02-23', '2022-04-26'],
+  date5: [] as string[],
+  date6: [] as string[],
+  date7: [] as string[],
+  date8: '',
+  date9: ['2020-01-23', '2020-01-26'],
+  isVisible1: false,
+  isVisible2: false,
+  isVisible3: false,
+  isVisible4: false,
+  isVisible5: false,
+  isVisible6: false,
+  isVisible7: false,
+  isVisible8: false,
+  isVisible9: false
+});
+const openSwitch = (param: string) => {
+  state[`${param}`] = true;
+};
 
-    const closeSwitch = (param: string) => {
-      state[`${param}`] = false;
-    };
+const closeSwitch = (param: string) => {
+  state[`${param}`] = false;
+};
 
-    const setChooseValue = (param: string) => {
-      state.date = param[3];
-      state.dateWeek = param[4];
-    };
+const setChooseValue = (param: string) => {
+  state.date = param[3];
+  state.dateWeek = param[4];
+};
 
-    const select = (param: string) => {
-      console.log(param);
-    };
-    const setChooseValue1 = (param: string) => {
-      state.date1 = [...[param[0][3], param[1][3]]];
-    };
+const select = (param: string) => {
+  console.log(param);
+};
+const setChooseValue1 = (param: string) => {
+  state.date1 = [...[param[0][3], param[1][3]]];
+};
 
-    const setChooseValue2 = (param: string) => {
-      state.date2 = param[3];
-    };
+const setChooseValue2 = (param: string) => {
+  state.date2 = param[3];
+};
 
-    const setChooseValue3 = (param: string) => {
-      state.date3 = param[3];
-    };
-    const setChooseValue4 = (param: string) => {
-      state.date4 = [...[param[0][3], param[1][3]]];
-    };
+const setChooseValue3 = (param: string) => {
+  state.date3 = param[3];
+};
+const setChooseValue4 = (param: string) => {
+  state.date4 = [...[param[0][3], param[1][3]]];
+};
 
-    const setChooseValue5 = (param: string) => {
-      state.date5 = [...[param[0][3], param[1][3]]];
-    };
-    const setChooseValue6 = (param: string) => {
-      state.date6 = [...[param[0][3], param[1][3]]];
-    };
-    const setChooseValue7 = (chooseData: any) => {
-      let dateArr = chooseData.map((item: any) => {
-        return item[3];
-      });
-      console.log('changevalue 7 ', chooseData, dateArr);
-      state.date7 = [...dateArr];
-    };
-    const setChooseValue8 = (param: string) => {
-      state.date8 = param[3];
-    };
-    const setChooseValue9 = (param: any) => {
-      let { weekDate } = param;
-      state.date9 = [weekDate[0].date[3], weekDate[1].date[3]];
-    };
-    const clickBtn = () => {
-      let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
-      state.date5 = date;
-    };
-    const clickBtn1 = () => {
-      let date = new Date();
-      let year = date.getFullYear();
-      let month: any = date.getMonth() + 1;
-      month = month < 10 ? '0' + month : month + '';
-      let yearMonth = `${year}-${month}`;
-      let currMonthDays = Utils.getMonthDays(year + '', month + '');
-      state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-    };
-    const goDate = () => {
-      if (calendarRef.value) {
-        var date1 = new Date();
-        date1.setDate(date1.getDate() + 30);
-        calendarRef.value.scrollToDate(Utils.date2Str(date1));
-      }
-    };
-    return {
-      ...toRefs(state),
-      openSwitch,
-      closeSwitch,
-      setChooseValue,
-      setChooseValue1,
-      setChooseValue2,
-      setChooseValue3,
-      setChooseValue4,
-      setChooseValue5,
-      setChooseValue6,
-      clickBtn,
-      clickBtn1,
-      setChooseValue7,
-      setChooseValue8,
-      setChooseValue9,
-      goDate,
-      calendarRef,
-      select,
-      env
-    };
+const setChooseValue5 = (param: string) => {
+  state.date5 = [...[param[0][3], param[1][3]]];
+};
+const setChooseValue6 = (param: string) => {
+  state.date6 = [...[param[0][3], param[1][3]]];
+};
+const setChooseValue7 = (chooseData: any) => {
+  let dateArr = chooseData.map((item: any) => {
+    return item[3];
+  });
+  console.log('changevalue 7 ', chooseData, dateArr);
+  state.date7 = [...dateArr];
+};
+const setChooseValue8 = (param: string) => {
+  state.date8 = param[3];
+};
+const setChooseValue9 = (param: any) => {
+  let { weekDate } = param;
+  state.date9 = [weekDate[0].date[3], weekDate[1].date[3]];
+};
+const clickBtn = () => {
+  let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
+  state.date5 = date;
+};
+const clickBtn1 = () => {
+  let date = new Date();
+  let year = date.getFullYear();
+  let month: any = date.getMonth() + 1;
+  month = month < 10 ? '0' + month : month + '';
+  let yearMonth = `${year}-${month}`;
+  let currMonthDays = Utils.getMonthDays(year + '', month + '');
+  state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+};
+const goDate = () => {
+  if (calendarRef.value) {
+    var date1 = new Date();
+    date1.setDate(date1.getDate() + 30);
+    calendarRef.value.scrollToDate(Utils.date2Str(date1));
   }
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/cascader/index.vue b/packages/nutui-taro-demo/src/dentry/pages/cascader/index.vue
index 3223eb6a6f..d0b910a4df 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/cascader/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/cascader/index.vue
@@ -68,203 +68,184 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-
-export default {
-  props: {},
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    // 基础用法
-    const demo1 = reactive({
-      visible: false,
-      value: ['湖南'],
-      options: [
+const env = Taro.getEnv();
+// 基础用法
+const demo1 = reactive({
+  visible: false,
+  value: ['湖南'],
+  options: [
+    {
+      value: '浙江',
+      text: '浙江',
+      children: [
         {
-          value: '浙江',
-          text: '浙江',
+          value: '杭州',
+          text: '杭州',
+          disabled: true,
           children: [
-            {
-              value: '杭州',
-              text: '杭州',
-              disabled: true,
-              children: [
-                { value: '西湖区', text: '西湖区' },
-                { value: '余杭区', text: '余杭区' }
-              ]
-            },
-            {
-              value: '温州',
-              text: '温州',
-              children: [
-                { value: '鹿城区', text: '鹿城区' },
-                { value: '瓯海区', text: '瓯海区' }
-              ]
-            }
+            { value: '西湖区', text: '西湖区' },
+            { value: '余杭区', text: '余杭区' }
           ]
         },
         {
-          value: '湖南',
-          text: '湖南',
-          disabled: true
-        },
-        {
-          value: '福建',
-          text: '福建',
+          value: '温州',
+          text: '温州',
           children: [
-            {
-              value: '福州',
-              text: '福州',
-              children: [
-                { value: '鼓楼区', text: '鼓楼区' },
-                { value: '台江区', text: '台江区' }
-              ]
-            }
+            { value: '鹿城区', text: '鹿城区' },
+            { value: '瓯海区', text: '瓯海区' }
           ]
         }
       ]
-    });
-
-    // 自定义属性名称
-    const demo2 = reactive({
-      visible: false,
-      value: ['福建', '福州', '台江区'],
-      options: [
+    },
+    {
+      value: '湖南',
+      text: '湖南',
+      disabled: true
+    },
+    {
+      value: '福建',
+      text: '福建',
+      children: [
         {
-          text: '浙江',
-          items: [
-            {
-              text: '杭州',
-              disabled: true,
-              items: [{ text: '西湖区' }, { text: '余杭区' }]
-            },
-            {
-              text: '温州',
-              items: [{ text: '鹿城区' }, { text: '瓯海区' }]
-            }
+          value: '福州',
+          text: '福州',
+          children: [
+            { value: '鼓楼区', text: '鼓楼区' },
+            { value: '台江区', text: '台江区' }
           ]
+        }
+      ]
+    }
+  ]
+});
+
+// 自定义属性名称
+const demo2 = reactive({
+  visible: false,
+  value: ['福建', '福州', '台江区'],
+  options: [
+    {
+      text: '浙江',
+      items: [
+        {
+          text: '杭州',
+          disabled: true,
+          items: [{ text: '西湖区' }, { text: '余杭区' }]
         },
         {
-          text: '福建',
-          items: [
-            {
-              text: '福州',
-              items: [{ text: '鼓楼区' }, { text: '台江区' }]
-            }
-          ]
+          text: '温州',
+          items: [{ text: '鹿城区' }, { text: '瓯海区' }]
         }
       ]
-    });
-
-    // 动态加载
-    const demo3 = reactive({
-      visible: false,
-      value: ['A0', 'A12', 'A23', 'A32'],
-      lazyLoad(node: any, resolve: (children: any) => void) {
-        setTimeout(() => {
-          // root表示第一层数据
-          if (node.root) {
-            resolve([
-              { value: 'A0', text: 'A0' },
-              { value: 'B0', text: 'B0' },
-              { value: 'C0', text: 'C0' }
-            ]);
-          } else {
-            const { value, level } = node;
-            const text = value.substring(0, 1);
-            const value1 = `${text}${level + 1}1`;
-            const value2 = `${text}${level + 1}2`;
-            const value3 = `${text}${level + 1}3`;
-            resolve([
-              { value: value1, text: value1, leaf: level >= 6 },
-              { value: value2, text: value2, leaf: level >= 6 },
-              { value: value3, text: value3, leaf: level >= 6 }
-            ]);
-          }
-        }, 3000);
-      }
-    });
-
-    // 部分数据动态加载
-    const demo4 = reactive({
-      visible: false,
-      value: [],
-      options: [
-        { value: 'A0', text: 'A0' },
+    },
+    {
+      text: '福建',
+      items: [
         {
-          value: 'B0',
-          text: 'B0',
-          children: [
-            { value: 'B11', text: 'B11', leaf: true },
-            { value: 'B12', text: 'B12' }
-          ]
-        },
-        { value: 'C0', text: 'C0' }
-      ],
-      lazyLoad(node: any, resolve: (children: any) => void) {
-        setTimeout(() => {
-          const { value, level } = node;
-          const text = value.substring(0, 1);
-          const value1 = `${text}${level + 1}1`;
-          const value2 = `${text}${level + 1}2`;
-          resolve([
-            { value: value1, text: value1, leaf: level >= 2 },
-            { value: value2, text: value2, leaf: level >= 1 }
-          ]);
-        }, 500);
-      }
-    });
-
-    const demo5 = reactive({
-      visible: false,
-      value: ['广东省', '广州市'],
-      convertConfig: {
-        topId: null,
-        idKey: 'id',
-        pidKey: 'pid',
-        sortKey: ''
-      },
-      options: [
-        { value: '北京', text: '北京', id: 1, pid: null },
-        { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
-        { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
-        { value: '广东省', text: '广东省', id: 2, pid: null },
-        { value: '广州市', text: '广州市', id: 21, pid: 2 }
+          text: '福州',
+          items: [{ text: '鼓楼区' }, { text: '台江区' }]
+        }
       ]
-    });
-
-    // onMounted(() => {
-    //   setTimeout(() => {
-    //     demo1.value = ['浙江', '温州', '瓯海区'];
-    //     setTimeout(() => {
-    //       demo1.value = ['浙江', '杭州', '西湖区'];
-    //     }, 2000);
-    //   }, 2000);
-    // });
-
-    const events = {
-      change(...args: any) {
-        console.log('change', ...args);
-      },
-      pathChange(...args: any) {
-        console.log('pathChange', ...args);
+    }
+  ]
+});
+
+// 动态加载
+const demo3 = reactive({
+  visible: false,
+  value: ['A0', 'A12', 'A23', 'A32'],
+  lazyLoad(node: any, resolve: (children: any) => void) {
+    setTimeout(() => {
+      // root表示第一层数据
+      if (node.root) {
+        resolve([
+          { value: 'A0', text: 'A0' },
+          { value: 'B0', text: 'B0' },
+          { value: 'C0', text: 'C0' }
+        ]);
+      } else {
+        const { value, level } = node;
+        const text = value.substring(0, 1);
+        const value1 = `${text}${level + 1}1`;
+        const value2 = `${text}${level + 1}2`;
+        const value3 = `${text}${level + 1}3`;
+        resolve([
+          { value: value1, text: value1, leaf: level >= 6 },
+          { value: value2, text: value2, leaf: level >= 6 },
+          { value: value3, text: value3, leaf: level >= 6 }
+        ]);
       }
-    };
-
-    return {
-      demo1,
-      demo2,
-      demo3,
-      demo4,
-      demo5,
-      events,
-      env
-    };
+    }, 3000);
+  }
+});
+
+// 部分数据动态加载
+const demo4 = reactive({
+  visible: false,
+  value: [],
+  options: [
+    { value: 'A0', text: 'A0' },
+    {
+      value: 'B0',
+      text: 'B0',
+      children: [
+        { value: 'B11', text: 'B11', leaf: true },
+        { value: 'B12', text: 'B12' }
+      ]
+    },
+    { value: 'C0', text: 'C0' }
+  ],
+  lazyLoad(node: any, resolve: (children: any) => void) {
+    setTimeout(() => {
+      const { value, level } = node;
+      const text = value.substring(0, 1);
+      const value1 = `${text}${level + 1}1`;
+      const value2 = `${text}${level + 1}2`;
+      resolve([
+        { value: value1, text: value1, leaf: level >= 2 },
+        { value: value2, text: value2, leaf: level >= 1 }
+      ]);
+    }, 500);
+  }
+});
+
+const demo5 = reactive({
+  visible: false,
+  value: ['广东省', '广州市'],
+  convertConfig: {
+    topId: null,
+    idKey: 'id',
+    pidKey: 'pid',
+    sortKey: ''
+  },
+  options: [
+    { value: '北京', text: '北京', id: 1, pid: null },
+    { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
+    { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
+    { value: '广东省', text: '广东省', id: 2, pid: null },
+    { value: '广州市', text: '广州市', id: 21, pid: 2 }
+  ]
+});
+
+// onMounted(() => {
+//   setTimeout(() => {
+//     demo1.value = ['浙江', '温州', '瓯海区'];
+//     setTimeout(() => {
+//       demo1.value = ['浙江', '杭州', '西湖区'];
+//     }, 2000);
+//   }, 2000);
+// });
+
+const events = {
+  change(...args: any) {
+    console.log('change', ...args);
+  },
+  pathChange(...args: any) {
+    console.log('pathChange', ...args);
   }
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue
index 8e5716e2b8..7b4e3afb3d 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue
@@ -3,36 +3,36 @@
     <Header v-if="env === 'WEB'" />
     <nut-cell-group title="基础用法-左右">
       <nut-cell>
-        <nut-checkbox v-model="checkbox1" label="复选框" @change="changeBox1">复选框</nut-checkbox>
+        <nut-checkbox v-model="data.checkbox1" label="复选框" @change="changeBox1">复选框</nut-checkbox>
       </nut-cell>
       <nut-cell>
-        <nut-checkbox v-model="checkbox2" text-position="left" @change="changeBox2">复选框</nut-checkbox>
+        <nut-checkbox v-model="data.checkbox2" text-position="left" @change="changeBox2">复选框</nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="半选状态">
       <nut-cell>
-        <nut-checkbox v-model="checkbox9" :indeterminate="true" label="复选框">复选框</nut-checkbox>
+        <nut-checkbox v-model="data.checkbox9" :indeterminate="true" label="复选框">复选框</nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="禁用状态">
       <nut-cell>
-        <nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>
+        <nut-checkbox v-model="data.checkbox3" disabled>未选时禁用状态</nut-checkbox>
       </nut-cell>
       <nut-cell>
-        <nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>
+        <nut-checkbox v-model="data.checkbox4" disabled>选中时禁用状态</nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="自定义尺寸">
       <nut-cell>
-        <nut-checkbox v-model="checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>
+        <nut-checkbox v-model="data.checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>
       </nut-cell>
       <nut-cell>
-        <nut-checkbox v-model="checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>
+        <nut-checkbox v-model="data.checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="自定义图标">
       <nut-cell>
-        <nut-checkbox v-model="checkbox7"
+        <nut-checkbox v-model="data.checkbox7"
           >自定义图标
           <template #icon> <Checklist /> </template>
           <template #checkedIcon> <Checklist color="red" /> </template>
@@ -41,12 +41,12 @@
     </nut-cell-group>
     <nut-cell-group title="点击触发change事件">
       <nut-cell>
-        <nut-checkbox v-model="checkbox8" @change="changeBox3">change复选框</nut-checkbox>
+        <nut-checkbox v-model="data.checkbox8" @change="changeBox3">change复选框</nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup使用">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup1">
+        <nut-checkbox-group v-model="data.checkboxgroup1">
           <nut-checkbox label="1">组合复选框</nut-checkbox>
           <nut-checkbox label="2">组合复选框</nut-checkbox>
           <nut-checkbox label="3">组合复选框</nut-checkbox>
@@ -55,12 +55,12 @@
       </nut-cell>
       <nut-cell>
         <div class="demo-check">当前选中值</div>
-        <div>{{ checkboxgroup1 }}</div>
+        <div>{{ data.checkboxgroup1 }}</div>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup禁用">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup2" disabled>
+        <nut-checkbox-group v-model="data.checkboxgroup2" disabled>
           <nut-checkbox label="1">组合复选框</nut-checkbox>
           <nut-checkbox label="2">组合复选框</nut-checkbox>
           <nut-checkbox label="3">组合复选框</nut-checkbox>
@@ -70,8 +70,8 @@
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup 全选/取消">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
-          <nut-checkbox :key="item.label" v-for="item in checkboxsource" :label="item.label">{{
+        <nut-checkbox-group v-model="data.checkboxgroup3" ref="group" @change="changeBox4">
+          <nut-checkbox :key="item.label" v-for="item in data.checkboxsource" :label="item.label">{{
             item.value
           }}</nut-checkbox>
         </nut-checkbox-group>
@@ -84,7 +84,7 @@
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup使用，限制最大可选数（2个）">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup4" :max="2">
+        <nut-checkbox-group v-model="data.checkboxgroup4" :max="2">
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
           <nut-checkbox label="2">组合复选框</nut-checkbox>
           <nut-checkbox label="3" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
@@ -93,14 +93,16 @@
       </nut-cell>
       <nut-cell>
         <div class="demo-check">当前选中值</div>
-        <div>{{ checkboxgroup4 }}</div>
+        <div>{{ data.checkboxgroup4 }}</div>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="全选/半选/取消">
       <nut-cell>
-        <nut-checkbox :indeterminate="indeterminate" v-model="checkbox10" @change="changeBox5">全选</nut-checkbox>
+        <nut-checkbox :indeterminate="data.indeterminate" v-model="data.checkbox10" @change="changeBox5"
+          >全选</nut-checkbox
+        >
       </nut-cell>
-      <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+      <nut-checkbox-group v-model="data.checkboxgroup5" ref="group2" @change="changeBox6">
         <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox></nut-cell>
         <nut-cell><nut-checkbox label="2">组合复选框</nut-checkbox></nut-cell>
         <nut-cell><nut-checkbox label="3">组合复选框</nut-checkbox></nut-cell>
@@ -109,7 +111,7 @@
     </nut-cell-group>
     <nut-cell-group title="按钮形状">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup6">
+        <nut-checkbox-group v-model="data.checkboxgroup6">
           <nut-checkbox label="1" shape="button">按钮形状</nut-checkbox>
           <nut-checkbox label="2" shape="button">按钮形状</nut-checkbox>
         </nut-checkbox-group>
@@ -117,105 +119,82 @@
     </nut-cell-group>
   </div>
 </template>
-<script lang="ts">
-import { reactive, ref, toRefs, Ref } from 'vue';
+<script setup lang="ts">
+import { reactive, ref, Ref } from 'vue';
 import { Checklist } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Checklist,
-    Header
-  },
-  setup(props, context) {
-    const env = Taro.getEnv();
+const env = Taro.getEnv();
 
-    const group = ref(null) as Ref;
-    const group2 = ref(null) as Ref;
-    const data = reactive({
-      checkbox1: true,
-      checkbox2: false,
-      checkbox3: false,
-      checkbox4: true,
-      checkbox5: false,
-      checkbox6: false,
-      checkbox7: false,
-      checkbox8: false,
-      checkbox9: true,
-      checkbox10: false,
-      checkboxgroup1: ['2', '3'],
-      checkboxgroup2: ['2'],
-      checkboxgroup3: ['2'],
-      checkboxgroup4: ['2'],
-      checkboxgroup5: [],
-      checkboxgroup6: [],
-      checkboxsource: [
-        { label: '1', value: '组合复选框' },
-        { label: '2', value: '组合复选框' },
-        { label: '3', value: '组合复选框' },
-        { label: '4', value: '组合复选框' },
-        { label: '5', value: '组合复选框' },
-        { label: '6', value: '组合复选框' }
-      ],
-      indeterminate: false
-    });
-    const changeBox1 = (state: boolean, label: string) => {
-      console.log(state, label);
-    };
-
-    const changeBox2 = (state: boolean, label: string) => {
-      console.log(state, label);
-    };
+const group = ref(null) as Ref;
+const group2 = ref(null) as Ref;
+const data = reactive({
+  checkbox1: true,
+  checkbox2: false,
+  checkbox3: false,
+  checkbox4: true,
+  checkbox5: false,
+  checkbox6: false,
+  checkbox7: false,
+  checkbox8: false,
+  checkbox9: true,
+  checkbox10: false,
+  checkboxgroup1: ['2', '3'],
+  checkboxgroup2: ['2'],
+  checkboxgroup3: ['2'],
+  checkboxgroup4: ['2'],
+  checkboxgroup5: [],
+  checkboxgroup6: [],
+  checkboxsource: [
+    { label: '1', value: '组合复选框' },
+    { label: '2', value: '组合复选框' },
+    { label: '3', value: '组合复选框' },
+    { label: '4', value: '组合复选框' },
+    { label: '5', value: '组合复选框' },
+    { label: '6', value: '组合复选框' }
+  ],
+  indeterminate: false
+});
+const changeBox1 = (state: boolean, label: string) => {
+  console.log(state, label);
+};
 
-    const changeBox3 = (state: boolean, label: string) => {
-      console.log(`${state ? '选中' : '取消'} ${label}`);
-    };
+const changeBox2 = (state: boolean, label: string) => {
+  console.log(state, label);
+};
 
-    const changeBox4 = (label: any[]) => {
-      console.log(label);
-    };
+const changeBox3 = (state: boolean, label: string) => {
+  console.log(`${state ? '选中' : '取消'} ${label}`);
+};
 
-    const changeBox5 = (value: boolean) => {
-      group2.value.toggleAll(value);
-    };
+const changeBox4 = (label: any[]) => {
+  console.log(label);
+};
 
-    const changeBox6 = (label: string[]) => {
-      if (label.length === 4) {
-        data.indeterminate = false;
-        data.checkbox10 = true;
-      } else if (label.length && label.length < 4) {
-        data.indeterminate = true;
-      } else {
-        data.indeterminate = false;
-        data.checkbox10 = false;
-      }
-    };
+const changeBox5 = (value: boolean) => {
+  group2.value.toggleAll(value);
+};
 
-    const toggleAll = (f: boolean) => {
-      console.log(`${f ? '全选' : '取消'}`);
-      group.value.toggleAll(f);
-    };
+const changeBox6 = (label: string[]) => {
+  if (label.length === 4) {
+    data.indeterminate = false;
+    data.checkbox10 = true;
+  } else if (label.length && label.length < 4) {
+    data.indeterminate = true;
+  } else {
+    data.indeterminate = false;
+    data.checkbox10 = false;
+  }
+};
 
-    const toggleReverse = () => {
-      console.log(`反选`);
-      group.value.toggleReverse();
-    };
+const toggleAll = (f: boolean) => {
+  console.log(`${f ? '全选' : '取消'}`);
+  group.value.toggleAll(f);
+};
 
-    return {
-      changeBox1,
-      changeBox2,
-      changeBox3,
-      changeBox4,
-      changeBox5,
-      changeBox6,
-      toggleAll,
-      toggleReverse,
-      group,
-      group2,
-      ...toRefs(data),
-      env
-    };
-  }
+const toggleReverse = () => {
+  console.log(`反选`);
+  group.value.toggleReverse();
 };
 </script>
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/dentry/pages/datepicker/index.vue b/packages/nutui-taro-demo/src/dentry/pages/datepicker/index.vue
index c885455b1b..f17d196e90 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/datepicker/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/datepicker/index.vue
@@ -4,7 +4,7 @@
     <h2>选择年月日</h2>
     <!-- 选择年月日 -->
     <nut-date-picker
-      v-model="currentDate"
+      v-model="state.currentDate"
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="confirm"
@@ -16,7 +16,7 @@
     <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
     <nut-popup position="bottom" v-model:visible="show">
       <nut-date-picker
-        v-model="currentDate"
+        v-model="state.currentDate"
         :min-date="minDate"
         :max-date="maxDate"
         @confirm="popupConfirm"
@@ -31,7 +31,7 @@
     <h2>选择月日</h2>
     <!-- 选择月日 -->
     <nut-date-picker
-      v-model="currentDate2"
+      v-model="state.currentDate2"
       type="month-day"
       title="日期选择"
       :min-date="new Date(2022, 0, 1)"
@@ -42,7 +42,7 @@
 
     <!-- 选择年月日时分 -->
     <nut-date-picker
-      v-model="currentDate3"
+      v-model="state.currentDate3"
       title="日期时间选择"
       type="datetime"
       :min-date="minDate"
@@ -52,7 +52,7 @@
     <h2>选择时分秒</h2>
     <!-- 选择时分秒 -->
     <nut-date-picker
-      v-model="currentDate4"
+      v-model="state.currentDate4"
       title="时间选择"
       type="time"
       :min-date="minDate"
@@ -62,7 +62,7 @@
     <h2>选择时分</h2>
     <!-- 选择时分 -->
     <nut-date-picker
-      v-model="currentDate4"
+      v-model="state.currentDate4"
       title="时间选择"
       type="hour-minute"
       :min-date="minDate"
@@ -72,7 +72,7 @@
     <h2>格式化选项</h2>
     <!-- 格式化选项 -->
     <nut-date-picker
-      v-model="currentDate5"
+      v-model="state.currentDate5"
       title="日期选择"
       type="datetime"
       :min-date="new Date(2022, 0, 1)"
@@ -83,7 +83,7 @@
     <h2>分钟数递增步长设置</h2>
     <!-- 分钟数递增步长设置 -->
     <nut-date-picker
-      v-model="currentDate6"
+      v-model="state.currentDate6"
       title="时间选择"
       type="time"
       :min-date="minDate"
@@ -95,7 +95,7 @@
 
     <!-- 过滤选项 -->
     <nut-date-picker
-      v-model="currentDate7"
+      v-model="state.currentDate7"
       title="时间选择"
       type="datehour"
       :min-date="minDate"
@@ -109,118 +109,90 @@
   </div>
 </template>
 
-<script lang="ts">
-import { toRefs, watch, ref, reactive } from 'vue';
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  props: {},
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
+const env = Taro.getEnv();
 
-    const show = ref(false);
-    const popupDesc = ref();
-    const msg = ref();
-    const showToast = ref(false);
+const show = ref(false);
+const popupDesc = ref();
+const msg = ref();
+const showToast = ref(false);
 
-    const CurrentDate = reactive({
-      currentDate: new Date(2022, 4, 10, 10, 10),
-      currentDate2: new Date(2022, 4, 10, 10, 10),
-      currentDate3: new Date(2022, 4, 10, 10, 10),
-      currentDate4: new Date(2022, 4, 10, 10, 10),
-      currentDate5: new Date(2022, 4, 10, 10, 10),
-      currentDate6: new Date(2022, 4, 10, 10, 10),
-      currentDate7: new Date(2022, 4, 10, 0, 0)
-    });
+const state = reactive({
+  currentDate: new Date(2022, 4, 10, 10, 10),
+  currentDate2: new Date(2022, 4, 10, 10, 10),
+  currentDate3: new Date(2022, 4, 10, 10, 10),
+  currentDate4: new Date(2022, 4, 10, 10, 10),
+  currentDate5: new Date(2022, 4, 10, 10, 10),
+  currentDate6: new Date(2022, 4, 10, 10, 10),
+  currentDate7: new Date(2022, 4, 10, 0, 0)
+});
 
-    const formatter = (type: string, option) => {
-      switch (type) {
-        case 'year':
-          option.text += '';
-          break;
-        case 'month':
-          option.text += '月';
-          break;
-        case 'day':
-          option.text += '日';
-          break;
-        case 'hour':
-          option.text += '时';
-          break;
-        case 'minute':
-          option.text += '分';
-          break;
-        default:
-          option.text += '';
-      }
-      return option;
-    };
-
-    const formatter1 = (type: string, option) => {
-      switch (type) {
-        case 'year':
-          option.text += '年';
-          break;
-        case 'month':
-          option.text += '月';
-          break;
-        case 'day':
-          option.text += '日';
-          break;
-        case 'hour':
-          option.text += '时';
-          break;
-        default:
-          option.text += '';
-      }
-      return option;
-    };
+const formatter = (type: string, option) => {
+  switch (type) {
+    case 'year':
+      option.text += '';
+      break;
+    case 'month':
+      option.text += '月';
+      break;
+    case 'day':
+      option.text += '日';
+      break;
+    case 'hour':
+      option.text += '时';
+      break;
+    case 'minute':
+      option.text += '分';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
 
-    const filter = (type: string, options) => {
-      if (type == 'hour') {
-        return options.filter((option) => Number(option.value) % 6 === 0);
-      }
-      return options;
-    };
+const formatter1 = (type: string, option) => {
+  switch (type) {
+    case 'year':
+      option.text += '年';
+      break;
+    case 'month':
+      option.text += '月';
+      break;
+    case 'day':
+      option.text += '日';
+      break;
+    case 'hour':
+      option.text += '时';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
 
-    const confirm = ({
-      selectedValue,
-      selectedOptions
-    }: {
-      selectedValue: (string | number)[];
-      selectedOptions: any;
-    }) => {
-      showToast.value = true;
-      msg.value = selectedOptions.map((val: any) => val.text).join('-');
-    };
-    const popupConfirm = ({ selectedValue, selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
-      popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
-      show.value = false;
-    };
-    const alwaysFun = () => {
-      popupDesc.value = '永远有效';
-      show.value = false;
-    };
-    return {
-      show,
-      msg,
-      showToast,
-      popupDesc,
-      ...toRefs(CurrentDate),
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      confirm,
-      formatter,
-      formatter1,
-      filter,
-      alwaysFun,
-      popupConfirm,
-      env
-    };
+const filter = (type: string, options) => {
+  if (type == 'hour') {
+    return options.filter((option) => Number(option.value) % 6 === 0);
   }
+  return options;
+};
+
+const confirm = ({ selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
+  showToast.value = true;
+  msg.value = selectedOptions.map((val: any) => val.text).join('-');
+};
+const popupConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
+  popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
+  show.value = false;
+};
+const alwaysFun = () => {
+  popupDesc.value = '永远有效';
+  show.value = false;
 };
+const minDate = new Date(2020, 0, 1);
+const maxDate = new Date(2025, 10, 1);
 </script>
 <style lang="scss" scoped></style>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/form/index.vue b/packages/nutui-taro-demo/src/dentry/pages/form/index.vue
index f71f954466..83b7de76d5 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/form/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/form/index.vue
@@ -165,216 +165,186 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import { FormItemRuleWithoutValidator } from '@/packages/__VUE/formitem/types';
-export default {
-  props: {},
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-
-    const formData = reactive({
-      name: '',
-      age: '',
-      tel: '',
-      address: ''
-    });
-    const basicData = reactive({
-      name: '',
-      age: '',
-      tel: '',
-      address: ''
-    });
-    const dynamicRefForm = ref<any>(null);
-    const dynamicForm = {
-      state: reactive({
-        name: '',
-        tels: new Array({
-          key: 1,
-          value: ''
-        })
-      }),
-
-      methods: {
-        submit() {
-          dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
-            if (valid) {
-              console.log('success', dynamicForm);
-            } else {
-              console.log('error submit!!', errors);
-            }
-          });
-        },
-        reset() {
-          dynamicRefForm.value.reset();
-        },
-        remove() {
-          dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
-        },
-        add() {
-          dynamicForm.state.tels.push({
-            key: Date.now(),
-            value: ''
-          });
-        }
-      }
-    };
-
-    const validate = (item: any) => {
-      console.log(item);
-    };
-
-    const formData2 = reactive({
-      switch: false,
-      checkbox: false,
-      radio: 0,
-      number: 0,
-      rate: 3,
-      range: 30,
-      address: '',
-      defaultFileList: [
-        {
-          name: '文件1.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'success',
-          message: '上传成功',
-          type: 'image'
-        },
-        {
-          name: '文件2.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'uploading',
-          message: '上传中...',
-          type: 'image'
-        }
-      ]
-    });
-
-    const addressModule = reactive({
-      state: {
-        show: false,
-        province: [
-          { id: 1, name: '北京' },
-          { id: 2, name: '广西' },
-          { id: 3, name: '江西' },
-          { id: 4, name: '四川' }
-        ],
-        city: [
-          { id: 7, name: '朝阳区' },
-          { id: 8, name: '崇文区' },
-          { id: 9, name: '昌平区' },
-          { id: 6, name: '石景山区' }
-        ],
-        country: [
-          { id: 3, name: '八里庄街道' },
-          { id: 9, name: '北苑' },
-          { id: 4, name: '常营乡' }
-        ],
-        town: []
-      },
-      methods: {
-        show() {
-          addressModule.state.show = !addressModule.state.show;
-          if (addressModule.state.show) {
-            formData2.address = '';
-          }
-        },
-        onChange({ custom, next, value }: any) {
-          formData2.address += value.name;
-          const name = addressModule.state[next];
-          if (name.length < 1) {
-            addressModule.state.show = false;
-          }
-        }
-      }
-    });
+const env = Taro.getEnv();
 
-    const ruleForm = ref<any>(null);
+const formData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
+const basicData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
+const dynamicRefForm = ref<any>(null);
+const dynamicForm = {
+  state: reactive({
+    name: '',
+    tels: new Array({
+      key: 1,
+      value: ''
+    })
+  }),
 
-    const submit = () => {
-      ruleForm.value.validate().then(({ valid, errors }: any) => {
+  methods: {
+    submit() {
+      dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
         if (valid) {
-          console.log('success', formData);
+          console.log('success', dynamicForm);
         } else {
           console.log('error submit!!', errors);
         }
       });
-    };
-    const reset = () => {
-      ruleForm.value.reset();
-    };
-    // 失去焦点校验
-    const customBlurValidate = (prop: string) => {
-      ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
-        if (valid) {
-          console.log('success', formData);
-        } else {
-          console.log('error submit!!', errors);
-        }
+    },
+    reset() {
+      dynamicRefForm.value.reset();
+    },
+    remove() {
+      dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
+    },
+    add() {
+      dynamicForm.state.tels.push({
+        key: Date.now(),
+        value: ''
       });
-    };
-    // 函数校验
-    const customValidator = (val: string) => {
-      if (/^\d+$/.test(val)) {
-        return Promise.resolve();
-      } else {
-        return Promise.reject('必须输入数字');
+    }
+  }
+};
+
+const formData2 = reactive({
+  switch: false,
+  checkbox: false,
+  radio: 0,
+  number: 0,
+  rate: 3,
+  range: 30,
+  address: '',
+  defaultFileList: [
+    {
+      name: '文件1.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'success',
+      message: '上传成功',
+      type: 'image'
+    },
+    {
+      name: '文件2.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'uploading',
+      message: '上传中...',
+      type: 'image'
+    }
+  ]
+});
+
+const addressModule = reactive({
+  state: {
+    show: false,
+    province: [
+      { id: 1, name: '北京' },
+      { id: 2, name: '广西' },
+      { id: 3, name: '江西' },
+      { id: 4, name: '四川' }
+    ],
+    city: [
+      { id: 7, name: '朝阳区' },
+      { id: 8, name: '崇文区' },
+      { id: 9, name: '昌平区' },
+      { id: 6, name: '石景山区' }
+    ],
+    country: [
+      { id: 3, name: '八里庄街道' },
+      { id: 9, name: '北苑' },
+      { id: 4, name: '常营乡' }
+    ],
+    town: []
+  },
+  methods: {
+    show() {
+      addressModule.state.show = !addressModule.state.show;
+      if (addressModule.state.show) {
+        formData2.address = '';
       }
-    };
-    const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
-      if ((rule?.reg as RegExp).test(val)) {
-        return Promise.resolve();
-      } else {
-        return Promise.reject('必须输入数字');
+    },
+    onChange({ next, value }: any) {
+      formData2.address += value.name;
+      const name = addressModule.state[next];
+      if (name.length < 1) {
+        addressModule.state.show = false;
       }
-    };
-    const nameLengthValidator = (val: string) => {
-      if (val.length > 2) {
-        return Promise.resolve();
+    }
+  }
+});
+
+const ruleForm = ref<any>(null);
+
+const submit = () => {
+  ruleForm.value.validate().then(({ valid, errors }: any) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
+    }
+  });
+};
+const reset = () => {
+  ruleForm.value.reset();
+};
+// 失去焦点校验
+const customBlurValidate = (prop: string) => {
+  ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
+    }
+  });
+};
+// 函数校验
+const customValidator = (val: string) => {
+  if (/^\d+$/.test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
+  if ((rule?.reg as RegExp).test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const nameLengthValidator = (val: string) => {
+  if (val.length > 2) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('名称两个字以上');
+  }
+};
+// Promise 异步校验
+const asyncValidator = (val: string) => {
+  const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
+  return new Promise((resolve, reject) => {
+    console.log('模拟异步验证中...');
+    setTimeout(() => {
+      console.log('验证完成');
+      if (!val) {
+        reject('请输入联系电话');
+      } else if (!telReg.test(val)) {
+        reject('联系电话格式不正确');
       } else {
-        return Promise.reject('名称两个字以上');
+        resolve('');
       }
-    };
-    // Promise 异步校验
-    const asyncValidator = (val: string) => {
-      const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
-      return new Promise((resolve, reject) => {
-        console.log('模拟异步验证中...');
-        setTimeout(() => {
-          console.log('验证完成');
-          if (!val) {
-            reject('请输入联系电话');
-          } else if (!telReg.test(val)) {
-            reject('联系电话格式不正确');
-          } else {
-            resolve('');
-          }
-        }, 1000);
-      });
-    };
-    return {
-      ruleForm,
-      formData,
-      validate,
-      customValidator,
-      customRulePropValidator,
-      nameLengthValidator,
-      asyncValidator,
-      customBlurValidate,
-      submit,
-      reset,
-      formData2,
-      addressModule,
-      dynamicForm,
-      basicData,
-      dynamicRefForm,
-      env
-    };
-  }
+    }, 1000);
+  });
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/index.vue b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/index.vue
index 410cae73c2..1b49990ab4 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/numberkeyboard/index.vue
@@ -45,59 +45,33 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref, reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  props: {},
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
+const env = Taro.getEnv();
 
-    const visible1 = ref(false);
-    const visible2 = ref(false);
-    const visible3 = ref(false);
-    const visible4 = ref(false);
-    const visible5 = ref(false);
-    const visible6 = ref(false);
-    const value = ref('');
-    const customKey1 = reactive(['.']);
-    const customKey2 = reactive(['.', 'x']);
-    const customKey3 = reactive(['X']);
-    const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
-    function input(number: any) {
-      console.log(number);
-    }
-    function showKeyBoard(index: number) {
-      visibleArr[index - 1].value = true;
-    }
-    function onDelete() {}
-    function close(index: number) {
-      visibleArr[index - 1].value = false;
-    }
-
-    return {
-      input,
-      onDelete,
-      close,
-      showKeyBoard,
-      customKey1,
-      customKey2,
-      customKey3,
-      visible1,
-      visible2,
-      visible3,
-      visible4,
-      visible5,
-      visible6,
-      value,
-      env
-    };
-  }
-};
+const visible1 = ref(false);
+const visible2 = ref(false);
+const visible3 = ref(false);
+const visible4 = ref(false);
+const visible5 = ref(false);
+const visible6 = ref(false);
+const value = ref('');
+const customKey1 = reactive(['.']);
+const customKey2 = reactive(['.', 'x']);
+const customKey3 = reactive(['X']);
+const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
+function input(number: any) {
+  console.log(number);
+}
+function showKeyBoard(index: number) {
+  visibleArr[index - 1].value = true;
+}
+function onDelete() {}
+function close(index: number) {
+  visibleArr[index - 1].value = false;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
index 45d9e96125..88f0c62e2f 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
@@ -3,21 +3,21 @@
     <Header v-if="env === 'WEB'" />
     <nut-cell-group title="基础用法">
       <nut-cell>
-        <nut-radio-group v-model="radioVal">
+        <nut-radio-group v-model="state.radioVal">
           <nut-radio label="1">选项1</nut-radio>
           <nut-radio disabled label="2">选项2</nut-radio>
           <nut-radio label="3">选项3</nut-radio>
         </nut-radio-group>
       </nut-cell>
       <nut-cell>
-        <nut-radio-group v-model="radioVal" text-position="left">
+        <nut-radio-group v-model="state.radioVal" text-position="left">
           <nut-radio label="1">选项1</nut-radio>
           <nut-radio disabled label="2">选项2</nut-radio>
           <nut-radio label="3">选项3</nut-radio>
         </nut-radio-group>
       </nut-cell>
       <nut-cell>
-        <nut-radio-group v-model="radioVal">
+        <nut-radio-group v-model="state.radioVal">
           <nut-radio shape="button" label="1">选项1</nut-radio>
           <nut-radio disabled shape="button" label="2">选项2</nut-radio>
           <nut-radio shape="button" label="3">选项3</nut-radio>
@@ -26,21 +26,21 @@
     </nut-cell-group>
     <nut-cell-group title="水平使用">
       <nut-cell>
-        <nut-radio-group v-model="radioVal" direction="horizontal">
+        <nut-radio-group v-model="state.radioVal" direction="horizontal">
           <nut-radio label="1">选项1</nut-radio>
           <nut-radio label="2">选项2</nut-radio>
           <nut-radio label="3">选项3</nut-radio>
         </nut-radio-group>
       </nut-cell>
       <nut-cell>
-        <nut-radio-group v-model="radioVal" text-position="left" direction="horizontal">
+        <nut-radio-group v-model="state.radioVal" text-position="left" direction="horizontal">
           <nut-radio label="1">选项1</nut-radio>
           <nut-radio label="2">选项2</nut-radio>
           <nut-radio label="3">选项3</nut-radio>
         </nut-radio-group>
       </nut-cell>
       <nut-cell>
-        <nut-radio-group v-model="radioVal" direction="horizontal">
+        <nut-radio-group v-model="state.radioVal" direction="horizontal">
           <nut-radio shape="button" label="1">选项1</nut-radio>
           <nut-radio shape="button" label="2">选项2</nut-radio>
           <nut-radio shape="button" label="3">选项3</nut-radio>
@@ -49,7 +49,7 @@
     </nut-cell-group>
     <nut-cell-group title="自定义尺寸">
       <nut-cell>
-        <nut-radio-group v-model="radioVal4">
+        <nut-radio-group v-model="state.radioVal4">
           <nut-radio label="1" icon-size="12">自定义尺寸12</nut-radio>
           <nut-radio label="2" icon-size="12">自定义尺寸12</nut-radio>
         </nut-radio-group>
@@ -57,7 +57,7 @@
     </nut-cell-group>
     <nut-cell-group title="自定义图标">
       <nut-cell>
-        <nut-radio-group v-model="radioVal5">
+        <nut-radio-group v-model="state.radioVal5">
           <nut-radio label="1">
             自定义图标
             <template #icon> <Checklist /> </template>
@@ -73,47 +73,33 @@
     </nut-cell-group>
     <nut-cell-group title="触发事件">
       <nut-cell>
-        <nut-radio-group v-model="radioVal6" @change="handleChange">
+        <nut-radio-group v-model="state.radioVal6" @change="handleChange">
           <nut-radio label="1">触发事件</nut-radio>
           <nut-radio label="2">触发事件</nut-radio>
         </nut-radio-group>
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="radioVal6"></nut-cell>
+      <nut-cell title="当前选中值" :desc="state.radioVal6"></nut-cell>
     </nut-cell-group>
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { Checklist } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  props: {},
-  components: {
-    Checklist,
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
+const env = Taro.getEnv();
 
-    const data = reactive({
-      radioVal: '1',
-      radioVal2: '2',
-      radioVal3: '1',
-      radioVal4: '1',
-      radioVal5: '1',
-      radioVal6: '1'
-    });
-    const handleChange = (value: any) => {
-      console.log(value);
-    };
-    return {
-      ...toRefs(data),
-      handleChange,
-      env
-    };
-  }
+const state = reactive({
+  radioVal: '1',
+  radioVal2: '2',
+  radioVal3: '1',
+  radioVal4: '1',
+  radioVal5: '1',
+  radioVal6: '1'
+});
+const handleChange = (value: any) => {
+  console.log(value);
 };
 </script>
 
diff --git a/packages/nutui-taro-demo/src/dentry/pages/range/index.vue b/packages/nutui-taro-demo/src/dentry/pages/range/index.vue
index 75837e8c15..285c6d7ad9 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/range/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/range/index.vue
@@ -3,36 +3,36 @@
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value1" @change="onChange"></nut-range>
+      <nut-range v-model="state.value1" @change="onChange"></nut-range>
     </nut-cell>
     <h2>双滑块</h2>
     <nut-cell class="cell">
-      <nut-range range v-model="value2" @change="onChange"></nut-range>
+      <nut-range range v-model="state.value2" @change="onChange"></nut-range>
     </nut-cell>
     <h2>指定范围</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value3" :max="10" :min="-10" @change="onChange"></nut-range>
+      <nut-range v-model="state.value3" :max="10" :min="-10" @change="onChange"></nut-range>
     </nut-cell>
     <h2>设置步长</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value4" :step="5" @change="onChange"></nut-range>
+      <nut-range v-model="state.value4" :step="5" @change="onChange"></nut-range>
     </nut-cell>
     <h2>隐藏范围</h2>
     <nut-cell class="cell">
-      <nut-range hidden-range v-model="value5" @change="onChange"></nut-range>
+      <nut-range hidden-range v-model="state.value5" @change="onChange"></nut-range>
     </nut-cell>
     <h2>隐藏标签</h2>
     <nut-cell class="cell">
-      <nut-range hidden-tag v-model="value6" @change="onChange"></nut-range>
+      <nut-range hidden-tag v-model="state.value6" @change="onChange"></nut-range>
     </nut-cell>
     <h2>禁用</h2>
     <nut-cell class="cell">
-      <nut-range disabled v-model="value7"></nut-range>
+      <nut-range disabled v-model="state.value7"></nut-range>
     </nut-cell>
     <h2>自定义样式</h2>
     <nut-cell class="cell">
       <nut-range
-        v-model="value8"
+        v-model="state.value8"
         @change="onChange"
         inactive-color="rgba(163,184,255,1)"
         button-color="rgba(52,96,250,1)"
@@ -41,40 +41,46 @@
     </nut-cell>
     <h2>自定义按钮</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value9" @change="onChange">
+      <nut-range v-model="state.value9" @change="onChange">
         <template #button>
-          <div class="custom-button">{{ value9 }}</div>
+          <div class="custom-button">{{ state.value9 }}</div>
         </template>
       </nut-range>
     </nut-cell>
     <h2>垂直方向</h2>
     <nut-cell class="vertical_div">
       <view class="div">
-        <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
+        <nut-range v-model="state.value10" @change="onChange" :vertical="true"></nut-range>
       </view>
       <view class="div">
-        <nut-range range v-model="value11" @change="onChange" :vertical="true"></nut-range>
+        <nut-range range v-model="state.value11" @change="onChange" :vertical="true"></nut-range>
       </view>
     </nut-cell>
     <h2>刻度标记</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range v-model="state.value12" @change="onChange" :marks="state.marks" :hiddenRange="true"></nut-range>
     </nut-cell>
     <nut-cell class="cell">
-      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range range v-model="state.value13" @change="onChange" :marks="state.marks" :hiddenRange="true"></nut-range>
     </nut-cell>
 
     <nut-cell class="vertical_div">
       <view class="div">
-        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
+        <nut-range
+          v-model="state.value14"
+          @change="onChange"
+          :vertical="true"
+          :marks="state.marks"
+          :hiddenRange="true"
+        ></nut-range>
       </view>
       <view class="div">
         <nut-range
           range
-          v-model="value15"
+          v-model="state.value15"
           @change="onChange"
           :vertical="true"
-          :marks="marks"
+          :marks="state.marks"
           :hiddenRange="true"
         ></nut-range>
       </view>
@@ -82,51 +88,38 @@
   </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  props: {},
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
+const env = Taro.getEnv();
 
-    const state = reactive({
-      value1: 40,
-      value2: [20, 80],
-      value3: 0,
-      value4: 20,
-      value5: 30,
-      value6: 40,
-      value7: 50,
-      value8: 40,
-      value9: 60,
-      value10: 20,
-      value11: [20, 80],
-      value12: 60,
-      value13: [20, 80],
-      value14: 60,
-      value15: [20, 80],
-      marks: {
-        0: 0,
-        20: 20,
-        40: 40,
-        60: 60,
-        80: 80,
-        100: 100
-      }
-    });
-    const onChange = (value: number) => console.log('当前值：' + value);
-    return {
-      ...toRefs(state),
-      onChange,
-      env
-    };
+const state = reactive({
+  value1: 40,
+  value2: [20, 80],
+  value3: 0,
+  value4: 20,
+  value5: 30,
+  value6: 40,
+  value7: 50,
+  value8: 40,
+  value9: 60,
+  value10: 20,
+  value11: [20, 80],
+  value12: 60,
+  value13: [20, 80],
+  value14: 60,
+  value15: [20, 80],
+  marks: {
+    0: 0,
+    20: 20,
+    40: 40,
+    60: 60,
+    80: 80,
+    100: 100
   }
-};
+});
+const onChange = (value: number) => console.log('当前值：' + value);
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/index.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/index.vue
index 8309c24513..df342638dd 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/rate/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/index.vue
@@ -32,39 +32,26 @@
   </div>
 </template>
 
-<script>
-import { reactive, getCurrentInstance } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-import { HeartFill, StarFillN } from '@nutui/icons-vue-taro';
-
-export default {
-  components: { HeartFill, StarFillN, Header },
-  setup() {
-    const env = Taro.getEnv();
-
-    const state = reactive({
-      val: 3,
-      val1: 3.5,
-      val2: 3,
-      val3: 3,
-      val4: 3,
-      val5: 3,
-      val6: 3,
-      val7: 3,
-      val8: 3
-    });
-    const onChange = (val) => {
-      console.log(val);
-    };
-    return {
-      state,
-      onChange,
-      HeartFill,
-      StarFillN,
-      env
-    };
-  }
+import { HeartFill } from '@nutui/icons-vue-taro';
+const env = Taro.getEnv();
+
+const state = reactive({
+  val: 3,
+  val1: 3.5,
+  val2: 3,
+  val3: 3,
+  val4: 3,
+  val5: 3,
+  val6: 3,
+  val7: 3,
+  val8: 3
+});
+const onChange = (val) => {
+  console.log(val);
 };
 </script>
 
diff --git a/packages/nutui-taro-demo/src/dentry/pages/searchbar/index.vue b/packages/nutui-taro-demo/src/dentry/pages/searchbar/index.vue
index 354871554a..95ee95a4c2 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/searchbar/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/searchbar/index.vue
@@ -2,43 +2,43 @@
   <div class="demo full" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
-    <nut-searchbar v-model="searchValue" />
+    <nut-searchbar v-model="state.searchValue" />
 
     <h2>设置搜索框形状</h2>
     <nut-searchbar shape="square" />
 
     <h2>搜索事件监听</h2>
-    <nut-searchbar v-model="searchValue1" @search="search" />
+    <nut-searchbar v-model="state.searchValue1" @search="search" />
 
     <h2>显示搜索 icon</h2>
-    <nut-searchbar v-model="searchValue2">
+    <nut-searchbar v-model="state.searchValue2">
       <template #leftin>
         <Search2 />
       </template>
     </nut-searchbar>
 
     <h2>右侧添加搜索文字</h2>
-    <nut-searchbar v-model="searchValue3" :confirm-type="confirmType">
+    <nut-searchbar v-model="state.searchValue3" :confirm-type="state.confirmType">
       <template #rightout> 搜索 </template>
     </nut-searchbar>
 
     <h2>更改输入框内部及外部的背景样式</h2>
     <nut-searchbar
-      v-model="searchValue4"
+      v-model="state.searchValue4"
       background="linear-gradient(to right, #9866F0, #EB4D50)"
       input-background="#fff"
     >
     </nut-searchbar>
 
     <h2>自定义清除按钮 icon</h2>
-    <nut-searchbar v-model="searchValue6">
+    <nut-searchbar v-model="state.searchValue6">
       <template #clear-icon>
         <img :src="icon" style="width: 20px; height: 20px" />
       </template>
     </nut-searchbar>
 
     <h2>显示全部 icon</h2>
-    <nut-searchbar v-model="searchValue5">
+    <nut-searchbar v-model="state.searchValue5">
       <template #leftout>
         <Left />
       </template>
@@ -55,49 +55,29 @@
   </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import { Search2, Left, Photograph, Message } from '@nutui/icons-vue-taro';
-
-export default {
-  props: {},
-  components: { Search2, Left, Photograph, Message, Header },
-
-  setup() {
-    const env = Taro.getEnv();
-
-    const icon =
-      'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
-
-    const state = reactive({
-      searchValue: '',
-      searchValue1: '',
-      searchValue2: '',
-      searchValue3: '',
-      searchValue4: '',
-      searchValue5: '',
-      searchValue6: '',
-      confirmType: 'search'
-    });
-
-    const search = function () {
-      console.log('搜索触发');
-    };
-
-    const clickLeft = function () {
-      console.log('点击回退按钮');
-    };
-
-    return {
-      icon,
-      clickLeft,
-      search,
-      ...toRefs(state),
-      env
-    };
-  }
+const env = Taro.getEnv();
+
+const icon =
+  'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
+
+const state = reactive({
+  searchValue: '',
+  searchValue1: '',
+  searchValue2: '',
+  searchValue3: '',
+  searchValue4: '',
+  searchValue5: '',
+  searchValue6: '',
+  confirmType: 'search'
+});
+
+const search = function () {
+  console.log('搜索触发');
 };
 </script>
 
diff --git a/packages/nutui-taro-demo/src/dentry/pages/shortpassword/index.vue b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/index.vue
index 57c19cb747..4230bd201f 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/shortpassword/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/shortpassword/index.vue
@@ -72,53 +72,39 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
+const env = Taro.getEnv();
 
-export default {
-  components: {
-    Header
+const state = reactive({
+  visible1: false,
+  visible2: false,
+  visible3: false,
+  visible4: false,
+  showKeyboard1: false,
+  showKeyboard2: false,
+  showKeyboard3: false,
+  showKeyboard4: false,
+  value1: '',
+  value2: '',
+  value3: '',
+  value4: '',
+  errorMsg: '',
+  length: 6,
+  show: false,
+  cover: false
+});
+const methods = {
+  complete(value) {
+    console.log(value);
   },
-  setup() {
-    const env = Taro.getEnv();
-
-    const state = reactive({
-      visible1: false,
-      visible2: false,
-      visible3: false,
-      visible4: false,
-      showKeyboard1: false,
-      showKeyboard2: false,
-      showKeyboard3: false,
-      showKeyboard4: false,
-      value1: '',
-      value2: '',
-      value3: '',
-      value4: '',
-      errorMsg: '',
-      length: 6,
-      show: false,
-      cover: false
-    });
-    const methods = {
-      complete(value) {
-        console.log(value);
-      },
-      onTips() {
-        state.show = true;
-        state.cover = false;
-      },
-      close() {},
-      cancel() {}
-    };
-
-    return {
-      state,
-      methods,
-      env
-    };
-  }
+  onTips() {
+    state.show = true;
+    state.cover = false;
+  },
+  close() {},
+  cancel() {}
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/textarea/index.vue b/packages/nutui-taro-demo/src/dentry/pages/textarea/index.vue
index 237a18d38d..b8b98659fb 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/textarea/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/textarea/index.vue
@@ -13,32 +13,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-
-export default {
-  props: {},
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const value = ref('');
-    const value2 = ref('');
-    const value3 = ref('');
-    const value4 = ref('');
-
-    return {
-      value,
-      value2,
-      value3,
-      value4,
-      env
-    };
-  }
-};
+const env = Taro.getEnv();
+const value = ref('');
+const value2 = ref('');
+const value3 = ref('');
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/dentry/pages/uploader/index.vue b/packages/nutui-taro-demo/src/dentry/pages/uploader/index.vue
index e45d0ee588..f796dd6e0a 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/uploader/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/uploader/index.vue
@@ -52,134 +52,111 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref, reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
+const env = Taro.getEnv();
+const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts';
+const progressPercentage = ref<string | number>(0);
+const formData = {
+  custom: 'test'
+};
+const defaultFileList = reactive([
+  {
+    name: '文件1.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'success',
+    message: '上传成功',
+    type: 'image'
   },
-  setup() {
-    const env = Taro.getEnv();
-    const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts';
-    const progressPercentage = ref<string | number>(0);
-    const formData = {
-      custom: 'test'
-    };
-    const defaultFileList = reactive([
-      {
-        name: '文件1.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'success',
-        message: '上传成功',
-        type: 'image'
-      },
-      {
-        name: '文件2.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'error',
-        message: '上传失败',
-        type: 'image'
-      },
-      {
-        name: '文件3.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'uploading',
-        message: '上传中...',
-        type: 'image'
-      }
-    ]);
-    const defaultFileList1 = reactive([
-      {
-        name: '文件1.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'success',
-        message: '上传成功',
-        type: 'image'
-      },
-      {
-        name: '文件2.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'error',
-        message: '上传失败',
-        type: 'image'
-      },
-      {
-        name: '文件3.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'uploading',
-        message: '上传中...',
-        type: 'image'
-      }
-    ]);
-    const onOversize = (files: File[]) => {
-      console.log('oversize 触发 文件大小不能超过 50kb', files);
-    };
-    const onDelete = (file: any, fileList: any[]) => {
-      console.log('delete 事件触发', file, fileList);
-    };
-    const onProgress = ({ event, options, percentage }: any) => {
-      progressPercentage.value = percentage;
-      console.log('progress 事件触发', percentage);
-    };
-    const uploadRef = ref<any>(null);
-    const submitUpload = () => {
-      uploadRef.value.submit();
-    };
-    const clearUpload = () => {
-      uploadRef.value.clearUploadQueue();
-    };
-
-    const beforeXhrUpload = (taroUploadFile: any, options: any) => {
-      //taroUploadFile  是 Taro.uploadFile ， 你也可以自定义设置其它函数
-      const uploadTask = taroUploadFile({
-        url: options.url,
-        filePath: options.taroFilePath,
-        fileType: options.fileType,
-        header: {
-          'Content-Type': 'multipart/form-data',
-          ...options.headers
-        }, //
-        formData: options.formData,
-        name: options.name,
-        success(response: { errMsg: any; statusCode: number; data: string }) {
-          if (options.xhrState == response.statusCode) {
-            options.onSuccess?.(response, options);
-          } else {
-            options.onFailure?.(response, options);
-          }
-        },
-        fail(e: any) {
-          options.onFailure?.(e, options);
-        }
-      });
-      options.onStart?.(options);
-      uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
-        options.onProgress?.(res, options);
-        // console.log('上传进度', res.progress);
-        // console.log('已经上传的数据长度', res.totalBytesSent);
-        // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
-      });
-      // uploadTask.abort(); // 取消上传任务
-    };
-
-    return {
-      onOversize,
-      onDelete,
-      onProgress,
-      progressPercentage,
-      uploadUrl,
-      defaultFileList,
-      defaultFileList1,
-      formData,
-      uploadRef,
-      submitUpload,
-      clearUpload,
-      beforeXhrUpload,
-      env
-    };
+  {
+    name: '文件2.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'error',
+    message: '上传失败',
+    type: 'image'
+  },
+  {
+    name: '文件3.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'uploading',
+    message: '上传中...',
+    type: 'image'
+  }
+]);
+const defaultFileList1 = reactive([
+  {
+    name: '文件1.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'success',
+    message: '上传成功',
+    type: 'image'
+  },
+  {
+    name: '文件2.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'error',
+    message: '上传失败',
+    type: 'image'
+  },
+  {
+    name: '文件3.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'uploading',
+    message: '上传中...',
+    type: 'image'
   }
+]);
+const onOversize = (files: File[]) => {
+  console.log('oversize 触发 文件大小不能超过 50kb', files);
+};
+const onDelete = (file: any, fileList: any[]) => {
+  console.log('delete 事件触发', file, fileList);
+};
+const onProgress = ({ event, options, percentage }: any) => {
+  progressPercentage.value = percentage;
+  console.log('progress 事件触发', percentage);
+};
+const uploadRef = ref<any>(null);
+const submitUpload = () => {
+  uploadRef.value.submit();
+};
+const clearUpload = () => {
+  uploadRef.value.clearUploadQueue();
+};
+
+const beforeXhrUpload = (taroUploadFile: any, options: any) => {
+  //taroUploadFile  是 Taro.uploadFile ， 你也可以自定义设置其它函数
+  const uploadTask = taroUploadFile({
+    url: options.url,
+    filePath: options.taroFilePath,
+    fileType: options.fileType,
+    header: {
+      'Content-Type': 'multipart/form-data',
+      ...options.headers
+    }, //
+    formData: options.formData,
+    name: options.name,
+    success(response: { errMsg: any; statusCode: number; data: string }) {
+      if (options.xhrState == response.statusCode) {
+        options.onSuccess?.(response, options);
+      } else {
+        options.onFailure?.(response, options);
+      }
+    },
+    fail(e: any) {
+      options.onFailure?.(e, options);
+    }
+  });
+  options.onStart?.(options);
+  uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
+    options.onProgress?.(res, options);
+    // console.log('上传进度', res.progress);
+    // console.log('已经上传的数据长度', res.totalBytesSent);
+    // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
+  });
+  // uploadTask.abort(); // 取消上传任务
 };
 </script>
 
diff --git a/src/packages/__VUE/calendar/demo.vue b/src/packages/__VUE/calendar/demo.vue
index 6ef79d1d15..f9c52aaa38 100644
--- a/src/packages/__VUE/calendar/demo.vue
+++ b/src/packages/__VUE/calendar/demo.vue
@@ -5,13 +5,13 @@
       <nut-cell
         :show-icon="true"
         :title="translate('single')"
-        :desc="date ? `${date} ${dateWeek}` : translate('please')"
+        :desc="state.date ? `${state.date} ${state.dateWeek}` : translate('please')"
         @click="openSwitch('isVisible')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible"
-        :default-value="date"
+        v-model:visible="state.isVisible"
+        :default-value="state.date"
         :start-date="`2022-01-11`"
         :end-date="`2022-11-30`"
         @close="closeSwitch('isVisible')"
@@ -24,14 +24,16 @@
       <nut-cell
         :show-icon="true"
         :title="translate('range')"
-        :desc="date1.length ? `${date1[0]}${translate('conjunction')}${date1[1]}` : translate('please')"
+        :desc="
+          state.date1.length ? `${state.date1[0]}${translate('conjunction')}${state.date1[1]}` : translate('please')
+        "
         @click="openSwitch('isVisible1')"
       >
       </nut-cell>
       <nut-calendar
         ref="calendarRef"
-        v-model:visible="isVisible1"
-        :default-value="date1"
+        v-model:visible="state.isVisible1"
+        :default-value="state.date1"
         type="range"
         :start-date="`2019-12-22`"
         :end-date="`2021-01-08`"
@@ -45,13 +47,15 @@
       <nut-cell
         :show-icon="true"
         :title="translate('multiple')"
-        :desc="date7 && date7.length ? `${translate('selected')}${date7.length}` : translate('please')"
+        :desc="
+          state.date7 && state.date7.length ? `${translate('selected')}${state.date7.length}` : translate('please')
+        "
         @click="openSwitch('isVisible7')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible7"
-        :default-value="date7"
+        v-model:visible="state.isVisible7"
+        :default-value="state.date7"
         type="multiple"
         :start-date="`2022-01-01`"
         :end-date="`2022-09-10`"
@@ -64,13 +68,15 @@
       <nut-cell
         :show-icon="true"
         :title="translate('week')"
-        :desc="date9.length ? `${date9[0]}${translate('conjunction')}${date9[1]}` : translate('please')"
+        :desc="
+          state.date9.length ? `${state.date9[0]}${translate('conjunction')}${state.date9[1]}` : translate('please')
+        "
         @click="openSwitch('isVisible9')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible9"
-        :default-value="date9"
+        v-model:visible="state.isVisible9"
+        :default-value="state.date9"
         type="week"
         :start-date="`2019-12-22`"
         :end-date="`2021-01-08`"
@@ -86,13 +92,13 @@
       <nut-cell
         :show-icon="true"
         :title="translate('single')"
-        :desc="date3 ? date3 : translate('please')"
+        :desc="state.date3 ? state.date3 : translate('please')"
         @click="openSwitch('isVisible3')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible3"
-        :default-value="date3"
+        v-model:visible="state.isVisible3"
+        :default-value="state.date3"
         :start-date="null"
         :end-date="null"
         :is-auto-back-fill="true"
@@ -105,13 +111,15 @@
       <nut-cell
         :show-icon="true"
         :title="translate('range')"
-        :desc="date4.length ? `${date4[0]}${translate('conjunction')}${date4[1]}` : translate('please')"
+        :desc="
+          state.date4.length ? `${state.date4[0]}${translate('conjunction')}${state.date4[1]}` : translate('please')
+        "
         @click="openSwitch('isVisible4')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible4"
-        :default-value="date4"
+        v-model:visible="state.isVisible4"
+        :default-value="state.date4"
         type="range"
         :start-date="`2022-01-01`"
         :end-date="`2022-12-31`"
@@ -126,14 +134,18 @@
       <nut-cell
         :show-icon="true"
         :title="translate('custom_btn')"
-        :desc="date5 && date5[0] ? `${date5[0]}${translate('conjunction')}${date5[1]}` : translate('please')"
+        :desc="
+          state.date5 && state.date5[0]
+            ? `${state.date5[0]}${translate('conjunction')}${state.date5[1]}`
+            : translate('please')
+        "
         @click="openSwitch('isVisible5')"
       >
       </nut-cell>
       <nut-calendar
         ref="calendarRef"
-        v-model:visible="isVisible5"
-        :default-value="date5"
+        v-model:visible="state.isVisible5"
+        :default-value="state.date5"
         type="range"
         @close="closeSwitch('isVisible5')"
         @choose="setChooseValue5"
@@ -160,13 +172,17 @@
       <nut-cell
         :show-icon="true"
         :title="translate('timeText')"
-        :desc="date6 && date6[0] ? `${date6[0]}${translate('conjunction')}${date6[1]}` : translate('please')"
+        :desc="
+          state.date6 && state.date6[0]
+            ? `${state.date6[0]}${translate('conjunction')}${state.date6[1]}`
+            : translate('please')
+        "
         @click="openSwitch('isVisible6')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible6"
-        :default-value="date6"
+        v-model:visible="state.isVisible6"
+        :default-value="state.date6"
         type="range"
         :start-date="`2022-01-01`"
         :end-date="`2022-12-31`"
@@ -189,22 +205,28 @@
       <nut-cell
         :show-icon="true"
         :title="translate('custom_footer')"
-        :desc="date10 ? `${date10}` : translate('please')"
+        :desc="state.date10 ? `${state.date10}` : translate('please')"
         @click="openSwitch('isVisible10')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible10"
-        :default-value="date10"
+        v-model:visible="state.isVisible10"
+        :default-value="state.date10"
         :poppable="true"
         :is-auto-back-fill="false"
         @close="closeSwitch('isVisible10')"
         @select="setSelectalue10"
       >
         <template #footer-info="dateInfo">
-          <nut-button size="large" block round type="primary" :disabled="disabled10" @click="clickBtn10(dateInfo)">{{
-            disabled10 ? translate('custom_footer_text1') : translate('custom_footer_text2')
-          }}</nut-button>
+          <nut-button
+            size="large"
+            block
+            round
+            type="primary"
+            :disabled="state.disabled10"
+            @click="clickBtn10(dateInfo)"
+            >{{ state.disabled10 ? translate('custom_footer_text1') : translate('custom_footer_text2') }}</nut-button
+          >
         </template>
       </nut-calendar>
     </div>
@@ -213,13 +235,13 @@
       <nut-cell
         :show-icon="true"
         :title="translate('single')"
-        :desc="date8 ? `${date8}` : translate('please')"
+        :desc="state.date8 ? `${state.date8}` : translate('please')"
         @click="openSwitch('isVisible8')"
       >
       </nut-cell>
       <nut-calendar
-        v-model:visible="isVisible8"
-        :default-value="date8"
+        v-model:visible="state.isVisible8"
+        :default-value="state.date8"
         :first-day-of-week="2"
         @close="closeSwitch('isVisible8')"
         @choose="setChooseValue8"
@@ -230,7 +252,7 @@
     <div class="test-calendar-wrapper">
       <nut-calendar
         :poppable="false"
-        :default-value="date2"
+        :default-value="state.date2"
         :is-auto-back-fill="true"
         :start-date="`2020-02-01`"
         :end-date="`2020-12-30`"
@@ -241,8 +263,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Utils from '@/packages/utils/date';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -308,146 +330,117 @@ const initTranslate = () =>
       selected: 'selected:'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const calendarRef = ref<null | CalendarRef>(null);
-    const state = reactive({
-      isVisible: false,
-      date: '2022-02-01',
-      dateWeek: '',
-      date1: ['2020-01-23', '2020-01-26'],
-      date2: '2020-07-08',
-      date3: '',
-      date4: ['2021-12-23', '2021-12-26'],
-      date5: ['2021-12-23', '2021-12-26'],
-      date6: [] as string[],
-      date7: [] as string[],
-      date8: '',
-      date9: [] as string[],
-      date10: '2023-09-03',
-      isVisible1: false,
-      isVisible2: false,
-      isVisible3: false,
-      isVisible4: false,
-      isVisible5: false,
-      isVisible6: false,
-      isVisible7: false,
-      isVisible8: false,
-      isVisible9: false,
-      isVisible10: false,
-      disabled10: false
-    });
-    const openSwitch = (param: string) => {
-      (state as any)[`${param}`] = true;
-    };
+initTranslate();
+const calendarRef = ref<null | CalendarRef>(null);
+const state = reactive({
+  isVisible: false,
+  date: '2022-02-01',
+  dateWeek: '',
+  date1: ['2020-01-23', '2020-01-26'],
+  date2: '2020-07-08',
+  date3: '',
+  date4: ['2021-12-23', '2021-12-26'],
+  date5: ['2021-12-23', '2021-12-26'],
+  date6: [] as string[],
+  date7: [] as string[],
+  date8: '',
+  date9: [] as string[],
+  date10: '2023-09-03',
+  isVisible1: false,
+  isVisible2: false,
+  isVisible3: false,
+  isVisible4: false,
+  isVisible5: false,
+  isVisible6: false,
+  isVisible7: false,
+  isVisible8: false,
+  isVisible9: false,
+  isVisible10: false,
+  disabled10: false
+});
+const openSwitch = (param: string) => {
+  (state as any)[`${param}`] = true;
+};
 
-    const closeSwitch = (param: string) => {
-      (state as any)[`${param}`] = false;
-    };
+const closeSwitch = (param: string) => {
+  (state as any)[`${param}`] = false;
+};
 
-    const setChooseValue = (param: string) => {
-      state.date = param[3];
-      state.dateWeek = param[4];
-    };
+const setChooseValue = (param: string) => {
+  state.date = param[3];
+  state.dateWeek = param[4];
+};
 
-    const select = (param: string) => {
-      console.log(param);
-    };
-    const setChooseValue1 = (chooseData: any) => {
-      let dateArr = chooseData.map((item: any) => {
-        return item[3];
-      });
-      state.date1 = [...dateArr];
-    };
-    const setChooseValue2 = (param: string) => {
-      state.date2 = param[3];
-    };
+const select = (param: string) => {
+  console.log(param);
+};
+const setChooseValue1 = (chooseData: any) => {
+  let dateArr = chooseData.map((item: any) => {
+    return item[3];
+  });
+  state.date1 = [...dateArr];
+};
+const setChooseValue2 = (param: string) => {
+  state.date2 = param[3];
+};
 
-    const setChooseValue3 = (param: string) => {
-      state.date3 = param[3];
-    };
-    const setChooseValue4 = (param: string) => {
-      state.date4 = [...[param[0][3], param[1][3]]];
-    };
+const setChooseValue3 = (param: string) => {
+  state.date3 = param[3];
+};
+const setChooseValue4 = (param: string) => {
+  state.date4 = [...[param[0][3], param[1][3]]];
+};
 
-    const setChooseValue5 = (param: string) => {
-      state.date5 = [...[param[0][3], param[1][3]]];
-    };
-    const setChooseValue6 = (param: string) => {
-      state.date6 = [...[param[0][3], param[1][3]]];
-    };
-    const setChooseValue7 = (chooseData: any) => {
-      let dateArr = chooseData.map((item: any) => {
-        return item[3];
-      });
-      state.date7 = [...dateArr];
-    };
-    const setChooseValue8 = (param: string) => {
-      state.date8 = param[3];
-    };
-    const setChooseValue9 = (param: any) => {
-      let { weekDate } = param;
-      state.date9 = [weekDate[0].date[3], weekDate[1].date[3]];
-    };
-    const setSelectalue10 = (param: any) => {
-      state.disabled10 = param[2] % 2 === 0;
-    };
+const setChooseValue5 = (param: string) => {
+  state.date5 = [...[param[0][3], param[1][3]]];
+};
+const setChooseValue6 = (param: string) => {
+  state.date6 = [...[param[0][3], param[1][3]]];
+};
+const setChooseValue7 = (chooseData: any) => {
+  let dateArr = chooseData.map((item: any) => {
+    return item[3];
+  });
+  state.date7 = [...dateArr];
+};
+const setChooseValue8 = (param: string) => {
+  state.date8 = param[3];
+};
+const setChooseValue9 = (param: any) => {
+  let { weekDate } = param;
+  state.date9 = [weekDate[0].date[3], weekDate[1].date[3]];
+};
+const setSelectalue10 = (param: any) => {
+  state.disabled10 = param[2] % 2 === 0;
+};
 
-    const clickBtn = () => {
-      let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
-      state.date5 = date;
-    };
-    const clickBtn1 = () => {
-      let date = new Date();
-      let year = date.getFullYear();
-      let month: any = date.getMonth() + 1;
-      month = month < 10 ? '0' + month : month + '';
-      let yearMonth = `${year}-${month}`;
-      let currMonthDays = Utils.getMonthDays(year + '', month + '');
-      state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-    };
-    const goDate = () => {
-      if (calendarRef.value) {
-        var date1 = new Date();
-        date1.setDate(date1.getDate() + 30);
-        calendarRef.value.scrollToDate(Utils.date2Str(date1));
-      }
-    };
-    const renderDate = (date: { date: Day }) => {
-      return +date.date.day <= 9 ? '0' + date.date.day : date.date.day;
-    };
-    const clickBtn10 = (dateInfo: any) => {
-      state.date10 = dateInfo.date[3];
-      state.isVisible10 = false;
-    };
-    return {
-      ...toRefs(state),
-      openSwitch,
-      closeSwitch,
-      setChooseValue,
-      setChooseValue1,
-      setChooseValue7,
-      setChooseValue2,
-      setChooseValue3,
-      setChooseValue4,
-      setChooseValue5,
-      setChooseValue6,
-      setChooseValue8,
-      setChooseValue9,
-      setSelectalue10,
-      clickBtn,
-      clickBtn1,
-      goDate,
-      calendarRef,
-      select,
-      translate,
-      renderDate,
-      clickBtn10
-    };
+const clickBtn = () => {
+  let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
+  state.date5 = date;
+};
+const clickBtn1 = () => {
+  let date = new Date();
+  let year = date.getFullYear();
+  let month: any = date.getMonth() + 1;
+  month = month < 10 ? '0' + month : month + '';
+  let yearMonth = `${year}-${month}`;
+  let currMonthDays = Utils.getMonthDays(year + '', month + '');
+  state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+};
+const goDate = () => {
+  if (calendarRef.value) {
+    var date1 = new Date();
+    date1.setDate(date1.getDate() + 30);
+    calendarRef.value.scrollToDate(Utils.date2Str(date1));
   }
-});
+};
+const renderDate = (date: { date: Day }) => {
+  return +date.date.day <= 9 ? '0' + date.date.day : date.date.day;
+};
+const clickBtn10 = (dateInfo: any) => {
+  state.date10 = dateInfo.date[3];
+  state.isVisible10 = false;
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/calendar/doc.en-US.md b/src/packages/__VUE/calendar/doc.en-US.md
index 4b3b391be5..9e75b12868 100644
--- a/src/packages/__VUE/calendar/doc.en-US.md
+++ b/src/packages/__VUE/calendar/doc.en-US.md
@@ -6,7 +6,7 @@ Calendar, tileable/pop-up display
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Calendar } from '@nutui/nutui';
 
@@ -18,18 +18,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="Select Single Date"
-    :desc="date ? `${date} ${dateWeek}` : 'Please Select Date'"
+    :desc="state.date ? `${state.date} ${state.dateWeek}` : 'Please Select Date'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
     :start-date="`2022-01-11`"
@@ -37,33 +37,23 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        date: '',
-        dateWeek: ''
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-        state.dateWeek = param[4];
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  isVisible: false,
+  date: '',
+  dateWeek: ''
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+  state.dateWeek = param[4];
+};
 </script>
 ```
 
@@ -73,18 +63,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="Select Date Range"
-    :desc="date && date[0] ? `${date[0]}-${date[1]}` : 'Please Select Date'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     :start-date="`2019-12-22`"
     :end-date="`2021-01-08`"
@@ -94,40 +84,29 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: ['2019-12-23', '2019-12-26'],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = [...[param[0][3], param[1][3]]];
-      };
-      const select = (param: string) => {
-        console.log(param);
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue,
-        select
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: ['2019-12-23', '2019-12-26'],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = [...[param[0][3], param[1][3]]];
+};
+const select = (param) => {
+  console.log(param);
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -137,18 +116,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :show-icon="true"
     title="Select Multiple Date"
-    :desc="date7 && date7.length ? `${date7.length} dates selected` : 'Please Select Date'"
+    :desc="state.date7 && state.date7.length ? `${state.date7.length} dates selected` : 'Please Select Date'"
     @click="openSwitch('isVisible7')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible7"
-    :default-value="date7"
+    v-model:visible="state.isVisible7"
+    :default-value="state.date7"
     type="multiple"
     :start-date="`2022-01-01`"
     :end-date="`2022-09-10`"
@@ -157,38 +136,27 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date7: [],
-        isVisible7: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue7 = (chooseData: any) => {
-        let dateArr = chooseData.map((item: any) => {
-          return item[3];
-        });
-        state.date7 = [...dateArr];
-      };
-      const select = (param: string) => {
-        console.log(param);
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue7,
-        select
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date7: [],
+  isVisible7: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue7 = (chooseData) => {
+  let dateArr = chooseData.map((item) => {
+    return item[3];
+  });
+  state.date7 = [...dateArr];
+};
+const select = (param) => {
+  console.log(param);
+};
 </script>
 ```
 
@@ -199,18 +167,18 @@ app.use(Calendar);
 When set to week selection, the start and end dates of the week will be determined according to `first-day-of-week`. For example, when `first-day-of-week` is 0, the start date of a week is Sunday. In other cases, the start date of the week is Monday.
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="Select Week"
-    :desc="date && date[0] ? `${date[0]}-${date[1]}` : 'Please Select Date'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="week"
     :start-date="`2019-12-22`"
     :end-date="`2021-01-08`"
@@ -220,41 +188,30 @@ When set to week selection, the start and end dates of the week will be determin
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: ['2019-12-23', '2019-12-26'],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        let { weekDate } = param;
-        state.date = [weekDate[0].date[3], weekDate[1].date[3]];
-      };
-      const select = (param: string) => {
-        console.log(param);
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue,
-        select
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: ['2019-12-23', '2019-12-26'],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  let { weekDate } = param;
+  state.date = [weekDate[0].date[3], weekDate[1].date[3]];
+};
+const select = (param) => {
+  console.log(param);
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -264,51 +221,41 @@ When set to week selection, the start and end dates of the week will be determin
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="Select Single Date"
-    :desc="date ? date : 'Please Select Date'"
+    :desc="state.date ? state.date : 'Please Select Date'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
+    v-model:visible="state.isVisible"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
-    :default-value="date"
+    :default-value="state.date"
     :start-date="null"
     :end-date="null"
     :is-auto-back-fill="true"
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: '',
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: '',
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 ```
 
@@ -318,18 +265,18 @@ When set to week selection, the start and end dates of the week will be determin
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="Select Date Range"
-    :desc="date && date[0] ? `${date[0]}-${date[1]}` : 'Please Select Date'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     :start-date="`2022-01-01`"
     :end-date="`2022-12-31`"
@@ -339,36 +286,26 @@ When set to week selection, the start and end dates of the week will be determin
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: ['2021-12-23', '2021-12-26'],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = [...[param[0][3], param[1][3]]];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: ['2021-12-23', '2021-12-26'],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = [...[param[0][3], param[1][3]]];
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -378,18 +315,19 @@ When set to week selection, the start and end dates of the week will be determin
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="Custom Button"
-    :desc="date && date[0] ? `${date[0]}-${date[1]}` : 'Please Select Date'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    ref="calendarRef"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
@@ -407,105 +345,92 @@ When set to week selection, the start and end dates of the week will be determin
   </nut-calendar>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const calendarRef = ref(null);
-      const state = reactive({
-        date: ['2021-12-23', '2021-12-26'],
-        isVisible: false
-      });
-      const getNumTwoBit = function (n: number): string {
-        n = Number(n);
-        return (n > 9 ? '' : '0') + n;
-      };
-      const date2Str = function (date: Date, split?: string): string {
-        split = split || '-';
-        const y = date.getFullYear();
-        const m = getNumTwoBit(date.getMonth() + 1);
-        const d = getNumTwoBit(date.getDate());
-        return [y, m, d].join(split);
-      };
-      const getDay = function (i: number): string {
-        i = i || 0;
-        let date = new Date();
-        const diff = i * (1000 * 60 * 60 * 24);
-        date = new Date(date.getTime() + diff);
-        return date2Str(date);
-      };
-      const isLeapYear = function (y: number): boolean {
-        return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
-      };
-      const getMonthDays = function (year: string, month: string): number {
-        if (/^0/.test(month)) {
-          month = month.split('')[1];
-        }
-        return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
-          month as any
-        ];
-      };
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      const clickBtn = () => {
-        let date = [date2Str(new Date()), getDay(6)];
-        state.date5 = date;
-      };
-      const clickBtn1 = () => {
-        let date = new Date();
-        let year = date.getFullYear();
-        let month: any = date.getMonth() + 1;
-        month = month < 10 ? '0' + month : month + '';
-        let yearMonth = `${year}-${month}`;
-        let currMonthDays = getMonthDays(year + '', month + '');
-        state.date5 = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-      };
-      const goDate = () => {
-        if (calendarRef.value) {
-          var date1 = new Date();
-          date1.setDate(date1.getDate() + 30);
-          calendarRef.value.scrollToDate(date2Str(date1));
-        }
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch,
-        clickBtn,
-        clickBtn1,
-        goDate
-      };
-    }
-  };
-</script>
-<style>
-  .nut-cell__value {
-    flex: initial;
-  }
-  .wrapper {
-    display: flex;
-    padding: 0 40px;
-    justify-content: center;
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  date: [],
+  isVisible: false
+});
+const calendarRef = ref(null);
+const getNumTwoBit = function (n) {
+  n = Number(n);
+  return (n > 9 ? '' : '0') + n;
+};
+const date2Str = function (date, split) {
+  split = split || '-';
+  const y = date.getFullYear();
+  const m = getNumTwoBit(date.getMonth() + 1);
+  const d = getNumTwoBit(date.getDate());
+  return [y, m, d].join(split);
+};
+const getDay = function (i) {
+  i = i || 0;
+  let date = new Date();
+  const diff = i * (1000 * 60 * 60 * 24);
+  date = new Date(date.getTime() + diff);
+  return date2Str(date);
+};
+const isLeapYear = function (y) {
+  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
+};
+const getMonthDays = function (year, month) {
+  if (/^0/.test(month)) {
+    month = month.split('')[1];
   }
-  .d_div {
-    margin: 0px 5px;
-    .d_btn {
-      background: #fa3f19;
-      color: #fff;
-      font-size: 12px;
-      padding: 2px 8px;
-      border-radius: 4px;
-      display: inline-block;
-    }
+  return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
+    month as any
+  ];
+};
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
+const clickBtn = () => {
+  let date = [date2Str(new Date()), getDay(6)];
+  state.date = date;
+};
+const clickBtn1 = () => {
+  let date = new Date();
+  let year = date.getFullYear();
+  let month: any = date.getMonth() + 1;
+  month = month < 10 ? '0' + month : month + '';
+  let yearMonth = `${year}-${month}`;
+  let currMonthDays = getMonthDays(year + '', month + '');
+  state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+};
+const goDate = () => {
+  if (calendarRef.value) {
+    var date1 = new Date();
+    date1.setDate(date1.getDate() + 30);
+    calendarRef.value.scrollToDate(date2Str(date1));
   }
+};
+</script>
+<style>
+.nut-cell__value {
+  flex: initial;
+}
+.wrapper {
+  display: flex;
+  padding: 0 40px;
+  justify-content: center;
+}
+.d_div {
+  margin: 0px 5px;
+}
+.d_btn {
+  background: #fa3f19;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
 </style>
 ```
 
@@ -515,18 +440,18 @@ When set to week selection, the start and end dates of the week will be determin
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="Custom Date Text"
-    :desc="date && date[0] ? `${date[0]}-${date[1]}` : 'Please Select Date'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}-${state.date[1]}` : 'Please Select Date'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
@@ -545,154 +470,128 @@ When set to week selection, the start and end dates of the week will be determin
     </template>
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: [],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: [],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
 :::
 
-### Custom First Day Of Week
+### Custom Footer v4.1.6
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
-    :showIcon="true"
-    title="Custom First Day Of Week"
-    :desc="date ? `${date}` : 'Please Select Date'"
+    :show-icon="true"
+    title="Custom Footer"
+    :desc="state.date ? `${state.date}` : 'Please Select Date'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
+    :poppable="true"
+    :is-auto-back-fill="false"
     @close="closeSwitch('isVisible')"
-    @choose="setChooseValue"
-    :first-day-of-week="2"
+    @select="setSelectalue"
   >
+    <template #footer-info="dateInfo">
+      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)">{{
+        disabled ? 'Even dates cannot be selected' : 'Odd dates can be selected'
+      }}</nut-button>
+    </template>
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        date: ''
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue
-      };
-    }
-  };
+
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  date: '2023-09-03',
+  isVisible: false,
+  disabled: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setSelectalue = (param) => {
+  state.disabled = param[2] % 2 === 0;
+};
+const clickBtn = (dateInfo) => {
+  state.date = dateInfo.date[3];
+  state.isVisible = false;
+};
 </script>
 ```
 
 :::
 
-### Custom Footer v4.1.6
+### Custom First Day Of Week
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
-    :show-icon="true"
-    title="Custom Footer"
-    :desc="date ? `${date}` : 'Please Select Date'"
+    :showIcon="true"
+    title="Custom First Day Of Week"
+    :desc="state.date ? `${state.date}` : 'Please Select Date'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
-    :poppable="true"
-    :is-auto-back-fill="false"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     @close="closeSwitch('isVisible')"
-    @select="setSelectalue"
+    @choose="setChooseValue"
+    :first-day-of-week="2"
   >
-    <template #footer-info="dateInfo">
-      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)"
-        >{{ disabled?'Even dates cannot be selected':'Odd dates can be selected' }}</nut-button
-      >
-    </template>
   </nut-calendar>
 </template>
-
-<script lang="ts">
-  import { reactive, toRefs, ref } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: '2023-09-03',
-        isVisible: false,
-        disabled: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setSelectalue = (param: any) => {
-        state.disabled = param[2] % 2 === 0;
-      };
-      const clickBtn = (dateInfo: any) => {
-        state.date = dateInfo.date[3];
-        state.isVisible = false;
-      };
-      return {
-        ...toRefs(state),
-        setSelectalue,
-        openSwitch,
-        closeSwitch,
-        clickBtn
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  isVisible: false,
+  date: ''
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
+<style>
+.nut-cell__value {
+  flex: initial;
+}
+</style>
 ```
 
 :::
@@ -701,12 +600,12 @@ When set to week selection, the start and end dates of the week will be determin
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="test-calendar-wrapper">
     <nut-calendar
       :poppable="false"
-      :default-value="date"
+      :default-value="state.date"
       :is-auto-back-fill="true"
       @choose="setChooseValue"
       :start-date="`2020-02-01`"
@@ -715,82 +614,76 @@ When set to week selection, the start and end dates of the week will be determin
     </nut-calendar>
   </div>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: '2020-07-08'
-      });
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs } from 'vue';
+const state = reactive({
+  date: '2020-07-08'
+});
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 <style>
-  .test-calendar-wrapper {
-    display: flex;
-    width: 100%;
-    height: 560px;
-    overflow: hidden;
-  }
+.test-calendar-wrapper {
+  display: flex;
+  width: 100%;
+  height: 560px;
+  overflow: hidden;
+}
 </style>
 ```
 
 :::
 
+## API
+
 ### Props
 
-| Attribute         | Description                                                     | Type               | Default               |
-| ----------------- | --------------------------------------------------------------- | ------------------ | --------------------- |
-| v-model:visible   | whether to show                                                 | boolean            | `false`               |
-| type              | Calendar type ：`one` `range` `multiple` `week(V4.0.1)`         | string             | `one`                 |
-| poppable          | Whether to display the pop-up window                            | boolean            | `true`                |
-| is-auto-back-fill | Automatic backfill                                              | boolean            | `false`               |
-| title             | whether to show title                                           | string             | `Calendar`            |
-| default-value     | Default value, select single date : `string`，other: `string[]` | string \| string[] | `null`                |
-| start-date        | The start date                                                  | string             | `Today`               |
-| end-date          | The end date                                                    | string             | `365 days from today` |
-| show-today        | Whether to show today's mark                                    | boolean            | `true`                |
-| start-text        | Range selection, start part of the text                         | string             | `Start`               |
-| end-text          | Range selection, end part of the text                           | string             | `End`                 |
-| confirm-text      | Bottom confirm button text                                      | string             | `Confirm`             |
-| show-title        | Whether to show the calendar title                              | boolean            | `true`                |
-| show-sub-title    | Whether to display the date title                               | boolean            | `true`                |
-| to-date-animation | Whether to use scroll animation                                 | boolean            | `true`                |
-| first-day-of-week | Set the start day of week                                       | 0-6                | `0`                   |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model:visible | whether to show | boolean | `false` |
+| type | Calendar type ：`one` `range` `multiple` `week(V4.0.1)` | string | `one` |
+| poppable | Whether to display the pop-up window | boolean | `true` |
+| is-auto-back-fill | Automatic backfill | boolean | `false` |
+| title | whether to show title | string | `Calendar` |
+| default-value | Default value, select single date : `string`，other: `string[]` | string \| string[] | `null` |
+| start-date | The start date | string | `Today` |
+| end-date | The end date | string | `365 days from today` |
+| show-today | Whether to show today's mark | boolean | `true` |
+| start-text | Range selection, start part of the text | string | `Start` |
+| end-text | Range selection, end part of the text | string | `End` |
+| confirm-text | Bottom confirm button text | string | `Confirm` |
+| show-title | Whether to show the calendar title | boolean | `true` |
+| show-sub-title | Whether to display the date title | boolean | `true` |
+| to-date-animation | Whether to use scroll animation | boolean | `true` |
+| first-day-of-week | Set the start day of week | 0-6 | `0` |
 
 ### Events
 
-| Event  | Description                                                                                                      | Arguments                |
-| ------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | choose | Triggered after selection or by clicking the confirm button,Array of dates (including year, month, day and week) | `(string \| string[])[]` |
-| close  | Triggered when closed                                                                                            | -                        |
-| select | Triggered after click/select                                                                                     | `(string \| string[])[]` |
+| close | Triggered when closed | - |
+| select | Triggered after click/select | `(string \| string[])[]` |
 
 ### Slots
 
-| Name                | Description                                                  |
-| ------------------- | ------------------------------------------------------------ |
-| btn                 | Below the custom calendar header, you can add custom actions |
-| day                 | Date information                                             |
-| top-info            | Date top information                                         |
-| bottom-info         | Date bottom information                                      |
-| footer-info`v4.1.6` | Custom calendar Footer, replace confirm btn                  |
+| Name | Description |
+| --- | --- |
+| btn | Below the custom calendar header, you can add custom actions |
+| day | Date information |
+| top-info | Date top information |
+| bottom-info | Date bottom information |
+| footer-info`v4.1.6` | Custom calendar Footer, replace confirm btn |
 
 ### Methods
 
 Through [ref](https://vuejs.org/guide/essentials/template-refs.html), you can get the Calendar instance and call the instance method.
 
-| Name                  | Description                                            | Arguments |
-| --------------------- | ------------------------------------------------------ | --------- |
-| scrollToDate          | Scroll to the month of the specified date:'2021-12-30' | `string`  |
-| initPosition `v4.0.1` | Initialize scroll position                             |           |
+| Name | Description | Arguments |
+| --- | --- | --- |
+| scrollToDate | Scroll to the month of the specified date:'2021-12-30' | `string` |
+| initPosition `v4.0.1` | Initialize scroll position |  |
 
 ## Theming
 
@@ -798,20 +691,20 @@ Through [ref](https://vuejs.org/guide/essentials/template-refs.html), you can ge
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                    | Default Value              |
-| --------------------------------------- | -------------------------- |
-| --nut-calendar-primary-color            | _var(--nut-primary-color)_ |
-| --nut-calendar-choose-color             | _var(--nut-primary-color)_ |
-| --nut-calendar-choose-font-color        | _var(--nut-primary-color)_ |
-| --nut-calendar-base-color               | _#333333_                  |
-| --nut-calendar-disable-color            | _#d1d0d0_                  |
-| --nut-calendar-base-font                | _var(--nut-font-size-3)_   |
-| --nut-calendar-title-font               | _var(--nut-font-size-4)_   |
-| --nut-calendar-title-font-weight        | _500_                      |
-| --nut-calendar-sub-title-font           | _var(--nut-font-size-2)_   |
-| --nut-calendar-text-font                | _var(--nut-font-size-1)_   |
-| --nut-calendar-day-font                 | _16px_                     |
-| --nut-calendar-day-active-border-radius | _0px_                      |
-| --nut-calendar-day-font-weight          | _500_                      |
-| --nut-calendar-day67-font-color         | _var(--nut-primary-color)_ |
-| --nut-calendar-month-title-font-size    | _inherit_                  |
+| Name | Default Value |
+| --- | --- |
+| --nut-calendar-primary-color | _var(--nut-primary-color)_ |
+| --nut-calendar-choose-color | _var(--nut-primary-color)_ |
+| --nut-calendar-choose-font-color | _var(--nut-primary-color)_ |
+| --nut-calendar-base-color | _#333333_ |
+| --nut-calendar-disable-color | _#d1d0d0_ |
+| --nut-calendar-base-font | _var(--nut-font-size-3)_ |
+| --nut-calendar-title-font | _var(--nut-font-size-4)_ |
+| --nut-calendar-title-font-weight | _500_ |
+| --nut-calendar-sub-title-font | _var(--nut-font-size-2)_ |
+| --nut-calendar-text-font | _var(--nut-font-size-1)_ |
+| --nut-calendar-day-font | _16px_ |
+| --nut-calendar-day-active-border-radius | _0px_ |
+| --nut-calendar-day-font-weight | _500_ |
+| --nut-calendar-day67-font-color | _var(--nut-primary-color)_ |
+| --nut-calendar-month-title-font-size | _inherit_ |
diff --git a/src/packages/__VUE/calendar/doc.md b/src/packages/__VUE/calendar/doc.md
index 3ba1f22da1..7a413ccc7e 100644
--- a/src/packages/__VUE/calendar/doc.md
+++ b/src/packages/__VUE/calendar/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Calendar } from '@nutui/nutui';
 
@@ -18,18 +18,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="选择单个日期"
-    :desc="date ? `${date} ${dateWeek}` : '请选择'"
+    :desc="state.date ? `${state.date} ${state.dateWeek}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
     :start-date="`2022-01-11`"
@@ -37,33 +37,23 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        date: '',
-        dateWeek: ''
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-        state.dateWeek = param[4];
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  isVisible: false,
+  date: '',
+  dateWeek: ''
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+  state.dateWeek = param[4];
+};
 </script>
 ```
 
@@ -73,18 +63,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="选择日期区间"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     :start-date="`2019-12-22`"
     :end-date="`2021-01-08`"
@@ -94,40 +84,29 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: ['2019-12-23', '2019-12-26'],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = [...[param[0][3], param[1][3]]];
-      };
-      const select = (param: string) => {
-        console.log(param);
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue,
-        select
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: ['2019-12-23', '2019-12-26'],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = [...[param[0][3], param[1][3]]];
+};
+const select = (param) => {
+  console.log(param);
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -137,18 +116,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :show-icon="true"
     title="选择多个日期"
-    :desc="date7 && date7.length ? `已选择${date7.length}个日期` : '请选择'"
+    :desc="state.date7 && state.date7.length ? `已选择${state.date7.length}个日期` : '请选择'"
     @click="openSwitch('isVisible7')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible7"
-    :default-value="date7"
+    v-model:visible="state.isVisible7"
+    :default-value="state.date7"
     type="multiple"
     :start-date="`2022-01-01`"
     :end-date="`2022-09-10`"
@@ -157,38 +136,27 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date7: [],
-        isVisible7: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue7 = (chooseData: any) => {
-        let dateArr = chooseData.map((item: any) => {
-          return item[3];
-        });
-        state.date7 = [...dateArr];
-      };
-      const select = (param: string) => {
-        console.log(param);
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue7,
-        select
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date7: [],
+  isVisible7: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue7 = (chooseData) => {
+  let dateArr = chooseData.map((item) => {
+    return item[3];
+  });
+  state.date7 = [...dateArr];
+};
+const select = (param) => {
+  console.log(param);
+};
 </script>
 ```
 
@@ -197,20 +165,21 @@ app.use(Calendar);
 ### 选择周
 
 当设置为周选择时，会根据`first-day-of-week` 判断周的起始与结束日期。如`first-day-of-week`为 0 时，一周的起始日期为星期日。其他情况时，一周的起始日期为星期一。
+
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="选择周"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="week"
     :start-date="`2019-12-22`"
     :end-date="`2021-01-08`"
@@ -220,41 +189,30 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: ['2019-12-23', '2019-12-26'],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        let { weekDate } = param;
-        state.date = [weekDate[0].date[3], weekDate[1].date[3]];
-      };
-      const select = (param: string) => {
-        console.log(param);
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue,
-        select
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: ['2019-12-23', '2019-12-26'],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  let { weekDate } = param;
+  state.date = [weekDate[0].date[3], weekDate[1].date[3]];
+};
+const select = (param) => {
+  console.log(param);
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -264,46 +222,41 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :showIcon="true" title="选择单个日期" :desc="date ? date : '请选择'" @click="openSwitch('isVisible')">
+  <nut-cell
+    :showIcon="true"
+    title="选择单个日期"
+    :desc="state.date ? state.date : '请选择'"
+    @click="openSwitch('isVisible')"
+  >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
+    v-model:visible="state.isVisible"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
-    :default-value="date"
+    :default-value="state.date"
     :start-date="null"
     :end-date="null"
     :is-auto-back-fill="true"
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: '',
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: '',
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 ```
 
@@ -313,18 +266,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="选择日期范围"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     :start-date="`2022-01-01`"
     :end-date="`2022-12-31`"
@@ -334,36 +287,26 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: ['2021-12-23', '2021-12-26'],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = [...[param[0][3], param[1][3]]];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: ['2021-12-23', '2021-12-26'],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = [...[param[0][3], param[1][3]]];
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -373,19 +316,19 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="自定义按钮"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
     ref="calendarRef"
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
@@ -409,106 +352,92 @@ app.use(Calendar);
   </nut-calendar>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs, ref } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: [],
-        isVisible: false
-      });
-      const calendarRef = ref(null);
-      const getNumTwoBit = function (n: number): string {
-        n = Number(n);
-        return (n > 9 ? '' : '0') + n;
-      };
-      const date2Str = function (date: Date, split?: string): string {
-        split = split || '-';
-        const y = date.getFullYear();
-        const m = getNumTwoBit(date.getMonth() + 1);
-        const d = getNumTwoBit(date.getDate());
-        return [y, m, d].join(split);
-      };
-      const getDay = function (i: number): string {
-        i = i || 0;
-        let date = new Date();
-        const diff = i * (1000 * 60 * 60 * 24);
-        date = new Date(date.getTime() + diff);
-        return date2Str(date);
-      };
-      const isLeapYear = function (y: number): boolean {
-        return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
-      };
-      const getMonthDays = function (year: string, month: string): number {
-        if (/^0/.test(month)) {
-          month = month.split('')[1];
-        }
-        return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
-          month as any
-        ];
-      };
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      const clickBtn = () => {
-        let date = [date2Str(new Date()), getDay(6)];
-        state.date = date;
-      };
-      const clickBtn1 = () => {
-        let date = new Date();
-        let year = date.getFullYear();
-        let month: any = date.getMonth() + 1;
-        month = month < 10 ? '0' + month : month + '';
-        let yearMonth = `${year}-${month}`;
-        let currMonthDays = getMonthDays(year + '', month + '');
-        state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-      };
-      const goDate = () => {
-        if (calendarRef.value) {
-          var date1 = new Date();
-          date1.setDate(date1.getDate() + 30);
-          calendarRef.value.scrollToDate(date2Str(date1));
-        }
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch,
-        clickBtn,
-        calendarRef,
-        goDate,
-        clickBtn1
-      };
-    }
-  };
-</script>
-<style>
-  .nut-cell__value {
-    flex: initial;
-  }
-  .wrapper {
-    display: flex;
-    padding: 0 40px;
-    justify-content: center;
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  date: [],
+  isVisible: false
+});
+const calendarRef = ref(null);
+const getNumTwoBit = function (n) {
+  n = Number(n);
+  return (n > 9 ? '' : '0') + n;
+};
+const date2Str = function (date, split) {
+  split = split || '-';
+  const y = date.getFullYear();
+  const m = getNumTwoBit(date.getMonth() + 1);
+  const d = getNumTwoBit(date.getDate());
+  return [y, m, d].join(split);
+};
+const getDay = function (i) {
+  i = i || 0;
+  let date = new Date();
+  const diff = i * (1000 * 60 * 60 * 24);
+  date = new Date(date.getTime() + diff);
+  return date2Str(date);
+};
+const isLeapYear = function (y) {
+  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
+};
+const getMonthDays = function (year, month) {
+  if (/^0/.test(month)) {
+    month = month.split('')[1];
   }
-  .d_div {
-    margin: 0px 5px;
-  }
-  .d_btn {
-    background: #fa3f19;
-    color: #fff;
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    display: inline-block;
+  return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
+    month as any
+  ];
+};
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
+const clickBtn = () => {
+  let date = [date2Str(new Date()), getDay(6)];
+  state.date = date;
+};
+const clickBtn1 = () => {
+  let date = new Date();
+  let year = date.getFullYear();
+  let month: any = date.getMonth() + 1;
+  month = month < 10 ? '0' + month : month + '';
+  let yearMonth = `${year}-${month}`;
+  let currMonthDays = getMonthDays(year + '', month + '');
+  state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+};
+const goDate = () => {
+  if (calendarRef.value) {
+    var date1 = new Date();
+    date1.setDate(date1.getDate() + 30);
+    calendarRef.value.scrollToDate(date2Str(date1));
   }
+};
+</script>
+<style>
+.nut-cell__value {
+  flex: initial;
+}
+.wrapper {
+  display: flex;
+  padding: 0 40px;
+  justify-content: center;
+}
+.d_div {
+  margin: 0px 5px;
+}
+.d_btn {
+  background: #fa3f19;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
 </style>
 ```
 
@@ -518,18 +447,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="自定义时间文案"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
@@ -548,36 +477,26 @@ app.use(Calendar);
     </template>
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: [],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: [],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -587,62 +506,51 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :show-icon="true"
     title="自定义底部区域"
-    :desc="date ? `${date}` : '请选择'"
+    :desc="state.date ? `${state.date}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     :poppable="true"
     :is-auto-back-fill="false"
     @close="closeSwitch('isVisible')"
     @select="setSelectalue"
   >
     <template #footer-info="dateInfo">
-      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)"
-        >{{ disabled?'偶数的日期不能选择':'奇数的日期可以选择' }}</nut-button
-      >
+      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)">{{
+        disabled ? '偶数的日期不能选择' : '奇数的日期可以选择'
+      }}</nut-button>
     </template>
   </nut-calendar>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs, ref } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: '2023-09-03',
-        isVisible: false,
-        disabled: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setSelectalue = (param: any) => {
-        state.disabled = param[2] % 2 === 0;
-      };
-      const clickBtn = (dateInfo: any) => {
-        state.date = dateInfo.date[3];
-        state.isVisible = false;
-      };
-      return {
-        ...toRefs(state),
-        setSelectalue,
-        openSwitch,
-        closeSwitch,
-        clickBtn
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  date: '2023-09-03',
+  isVisible: false,
+  disabled: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setSelectalue = (param) => {
+  state.disabled = param[2] % 2 === 0;
+};
+const clickBtn = (dateInfo) => {
+  state.date = dateInfo.date[3];
+  state.isVisible = false;
+};
 </script>
 ```
 
@@ -652,54 +560,44 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="自定义周起始日"
-    :desc="date ? `${date}` : '请选择'"
+    :desc="state.date ? `${state.date}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
     :first-day-of-week="2"
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        date: ''
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  isVisible: false,
+  date: ''
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -709,12 +607,12 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="test-calendar-wrapper">
     <nut-calendar
       :poppable="false"
-      :default-value="date"
+      :default-value="state.date"
       :is-auto-back-fill="true"
       @choose="setChooseValue"
       :start-date="`2020-02-01`"
@@ -723,30 +621,22 @@ app.use(Calendar);
     </nut-calendar>
   </div>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: '2022-07-08'
-      });
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs } from 'vue';
+const state = reactive({
+  date: '2020-07-08'
+});
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 <style>
-  .test-calendar-wrapper {
-    display: flex;
-    width: 100%;
-    height: 560px;
-    overflow: hidden;
-  }
+.test-calendar-wrapper {
+  display: flex;
+  width: 100%;
+  height: 560px;
+  overflow: hidden;
+}
 </style>
 ```
 
@@ -756,51 +646,51 @@ app.use(Calendar);
 
 ### Props
 
-| 参数              | 说明                                                                           | 类型               | 默认值            |
-| ----------------- | ------------------------------------------------------------------------------ | ------------------ | ----------------- |
-| v-model:visible   | 是否可见                                                                       | boolean            | `false`           |
-| type              | 类型，日期单择`one`，区间选择`range`,日期多选`multiple`,周选择`week`(`v4.0.1`) | string             | '`one`'           |
-| poppable          | 是否弹窗状态展示                                                               | boolean            | `true`            |
-| is-auto-back-fill | 自动回填                                                                       | boolean            | `false`           |
-| title             | 显示标题                                                                       | string             | `日期选择`        |
-| default-value     | 默认值，单个日期选择 `string`，其他为 `string[]`                               | string \| string[] | `null`            |
-| start-date        | 开始日期                                                                       | string             | `今天`            |
-| end-date          | 结束日期                                                                       | string             | `距离今天 365 天` |
-| show-today        | 是否展示今天标记                                                               | boolean            | `true`            |
-| start-text        | 范围选择，开始信息文案                                                         | string             | `开始`            |
-| end-text          | 范围选择，结束信息文案                                                         | string             | `结束`            |
-| confirm-text      | 底部确认按钮文案                                                               | string             | `确认`            |
-| show-title        | 是否在展示日历标题                                                             | boolean            | `true`            |
-| show-sub-title    | 是否展示日期标题                                                               | boolean            | `true`            |
-| to-date-animation | 是否启动滚动动画                                                               | boolean            | `true`            |
-| first-day-of-week | 设置周起始日                                                                   | 0-6                | `0`               |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:visible | 是否可见 | boolean | `false` |
+| type | 类型，日期单择`one`，区间选择`range`,日期多选`multiple`,周选择`week`(`v4.0.1`) | string | '`one`' |
+| poppable | 是否弹窗状态展示 | boolean | `true` |
+| is-auto-back-fill | 自动回填 | boolean | `false` |
+| title | 显示标题 | string | `日期选择` |
+| default-value | 默认值，单个日期选择 `string`，其他为 `string[]` | string \| string[] | `null` |
+| start-date | 开始日期 | string | `今天` |
+| end-date | 结束日期 | string | `距离今天 365 天` |
+| show-today | 是否展示今天标记 | boolean | `true` |
+| start-text | 范围选择，开始信息文案 | string | `开始` |
+| end-text | 范围选择，结束信息文案 | string | `结束` |
+| confirm-text | 底部确认按钮文案 | string | `确认` |
+| show-title | 是否在展示日历标题 | boolean | `true` |
+| show-sub-title | 是否展示日期标题 | boolean | `true` |
+| to-date-animation | 是否启动滚动动画 | boolean | `true` |
+| first-day-of-week | 设置周起始日 | 0-6 | `0` |
 
 ### Events
 
-| 事件名 | 说明                                                      | 回调参数                 |
-| ------ | --------------------------------------------------------- | ------------------------ |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | choose | 选择之后或是点击确认按钮触发,日期数组（包含年月日和星期） | `(string \| string[])[]` |
-| close  | 关闭时触发                                                | -                        |
-| select | 点击/选择后触发                                           | `(string \| string[])[]` |
+| close | 关闭时触发 | - |
+| select | 点击/选择后触发 | `(string \| string[])[]` |
 
 ### Slots
 
-| 名称                | 说明                                     |
-| ------------------- | ---------------------------------------- |
-| btn                 | 自定义日历标题下部，可用以添加自定义操作 |
-| day                 | 日期信息                                 |
-| top-info            | 日期顶部信息                             |
-| bottom-info         | 日期底部信息                             |
-| footer-info`v4.1.6` | 日历自定义底部，替代confirm按钮          |
+| 名称 | 说明 |
+| --- | --- |
+| btn | 自定义日历标题下部，可用以添加自定义操作 |
+| day | 日期信息 |
+| top-info | 日期顶部信息 |
+| bottom-info | 日期底部信息 |
+| footer-info`v4.1.6` | 日历自定义底部，替代confirm按钮 |
 
 ### Methods
 
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 `Calendar` 实例并调用实例方法。
 
-| 方法名                | 说明                                  | 参数     |
-| --------------------- | ------------------------------------- | -------- |
-| scrollToDate          | 滚动到指定日期所在月,如：'2021-12-30' | `string` |
-| initPosition `v4.0.1` | 初始化滚动位置                        | 无       |
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| scrollToDate | 滚动到指定日期所在月,如：'2021-12-30' | `string` |
+| initPosition `v4.0.1` | 初始化滚动位置 | 无 |
 
 ## 主题定制
 
@@ -808,20 +698,20 @@ app.use(Calendar);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                    | 默认值                     |
-| --------------------------------------- | -------------------------- |
-| --nut-calendar-primary-color            | _var(--nut-primary-color)_ |
-| --nut-calendar-choose-color             | _var(--nut-primary-color)_ |
-| --nut-calendar-choose-font-color        | _var(--nut-primary-color)_ |
-| --nut-calendar-base-color               | _#333333_                  |
-| --nut-calendar-disable-color            | _#d1d0d0_                  |
-| --nut-calendar-base-font                | _var(--nut-font-size-3)_   |
-| --nut-calendar-title-font               | _var(--nut-font-size-4)_   |
-| --nut-calendar-title-font-weight        | _500_                      |
-| --nut-calendar-sub-title-font           | _var(--nut-font-size-2)_   |
-| --nut-calendar-text-font                | _var(--nut-font-size-1)_   |
-| --nut-calendar-day-font                 | _16px_                     |
-| --nut-calendar-day-active-border-radius | _0px_                      |
-| --nut-calendar-day-font-weight          | _500_                      |
-| --nut-calendar-day67-font-color         | _var(--nut-primary-color)_ |
-| --nut-calendar-month-title-font-size    | _inherit_                  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-calendar-primary-color | _var(--nut-primary-color)_ |
+| --nut-calendar-choose-color | _var(--nut-primary-color)_ |
+| --nut-calendar-choose-font-color | _var(--nut-primary-color)_ |
+| --nut-calendar-base-color | _#333333_ |
+| --nut-calendar-disable-color | _#d1d0d0_ |
+| --nut-calendar-base-font | _var(--nut-font-size-3)_ |
+| --nut-calendar-title-font | _var(--nut-font-size-4)_ |
+| --nut-calendar-title-font-weight | _500_ |
+| --nut-calendar-sub-title-font | _var(--nut-font-size-2)_ |
+| --nut-calendar-text-font | _var(--nut-font-size-1)_ |
+| --nut-calendar-day-font | _16px_ |
+| --nut-calendar-day-active-border-radius | _0px_ |
+| --nut-calendar-day-font-weight | _500_ |
+| --nut-calendar-day67-font-color | _var(--nut-primary-color)_ |
+| --nut-calendar-month-title-font-size | _inherit_ |
diff --git a/src/packages/__VUE/calendar/doc.taro.md b/src/packages/__VUE/calendar/doc.taro.md
index 24d6ffe821..212953ad02 100644
--- a/src/packages/__VUE/calendar/doc.taro.md
+++ b/src/packages/__VUE/calendar/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Calendar } from '@nutui/nutui-taro';
 
@@ -18,18 +18,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="选择单个日期"
-    :desc="date ? `${date} ${dateWeek}` : '请选择'"
+    :desc="state.date ? `${state.date} ${state.dateWeek}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
     :start-date="`2022-01-11`"
@@ -37,33 +37,23 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        date: '',
-        dateWeek: ''
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-        state.dateWeek = param[4];
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  isVisible: false,
+  date: '',
+  dateWeek: ''
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+  state.dateWeek = param[4];
+};
 </script>
 ```
 
@@ -73,18 +63,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="选择日期区间"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     :start-date="`2019-12-22`"
     :end-date="`2021-01-08`"
@@ -94,40 +84,29 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: ['2019-12-23', '2019-12-26'],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = [...[param[0][3], param[1][3]]];
-      };
-      const select = (param: string) => {
-        console.log(param);
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue,
-        select
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: ['2019-12-23', '2019-12-26'],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = [...[param[0][3], param[1][3]]];
+};
+const select = (param) => {
+  console.log(param);
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -137,18 +116,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :show-icon="true"
     title="选择多个日期"
-    :desc="date7 && date7.length ? `已选择${date7.length}个日期` : '请选择'"
+    :desc="state.date7 && state.date7.length ? `已选择${state.date7.length}个日期` : '请选择'"
     @click="openSwitch('isVisible7')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible7"
-    :default-value="date7"
+    v-model:visible="state.isVisible7"
+    :default-value="state.date7"
     type="multiple"
     :start-date="`2022-01-01`"
     :end-date="`2022-09-10`"
@@ -157,38 +136,27 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date7: [],
-        isVisible7: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue7 = (chooseData: any) => {
-        let dateArr = chooseData.map((item: any) => {
-          return item[3];
-        });
-        state.date7 = [...dateArr];
-      };
-      const select = (param: string) => {
-        console.log(param);
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue7,
-        select
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date7: [],
+  isVisible7: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue7 = (chooseData) => {
+  let dateArr = chooseData.map((item) => {
+    return item[3];
+  });
+  state.date7 = [...dateArr];
+};
+const select = (param) => {
+  console.log(param);
+};
 </script>
 ```
 
@@ -200,18 +168,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="选择周"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="week"
     :start-date="`2019-12-22`"
     :end-date="`2021-01-08`"
@@ -221,41 +189,30 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: ['2019-12-23', '2019-12-26'],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        let { weekDate } = param;
-        state.date = [weekDate[0].date[3], weekDate[1].date[3]];
-      };
-      const select = (param: string) => {
-        console.log(param);
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue,
-        select
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: ['2019-12-23', '2019-12-26'],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  let { weekDate } = param;
+  state.date = [weekDate[0].date[3], weekDate[1].date[3]];
+};
+const select = (param) => {
+  console.log(param);
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -265,46 +222,41 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :showIcon="true" title="选择单个日期" :desc="date ? date : '请选择'" @click="openSwitch('isVisible')">
+  <nut-cell
+    :showIcon="true"
+    title="选择单个日期"
+    :desc="state.date ? state.date : '请选择'"
+    @click="openSwitch('isVisible')"
+  >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
+    v-model:visible="state.isVisible"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
-    :default-value="date"
+    :default-value="state.date"
     :start-date="null"
     :end-date="null"
     :is-auto-back-fill="true"
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: '',
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: '',
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 ```
 
@@ -314,18 +266,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="选择日期范围"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     :start-date="`2022-01-01`"
     :end-date="`2022-12-31`"
@@ -335,36 +287,26 @@ app.use(Calendar);
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: ['2021-12-23', '2021-12-26'],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = [...[param[0][3], param[1][3]]];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: ['2021-12-23', '2021-12-26'],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = [...[param[0][3], param[1][3]]];
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
@@ -374,30 +316,34 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="自定义按钮"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
     ref="calendarRef"
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
-    :start-date="null"
-    :end-date="null"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
   >
     <template #btn>
       <div class="wrapper">
-        <div class="d_div"> <span class="d_btn" @click="goDate">去某个时间</span></div>
-        <div class="d_div"> <span class="d_btn" @click="clickBtn">最近七天</span></div>
-        <div class="d_div"> <span class="d_btn" @click="clickBtn1">当月</span></div>
+        <div class="d_div">
+          <span class="d_btn" @click="goDate">去某个时间</span>
+        </div>
+        <div class="d_div">
+          <span class="d_btn" @click="clickBtn">最近七天</span>
+        </div>
+        <div class="d_div">
+          <span class="d_btn" @click="clickBtn1">当月</span>
+        </div>
       </div>
     </template>
     <template #day="date">
@@ -406,106 +352,92 @@ app.use(Calendar);
   </nut-calendar>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs, ref } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: [],
-        isVisible: false
-      });
-      const calendarRef = ref(null);
-      const getNumTwoBit = function (n: number): string {
-        n = Number(n);
-        return (n > 9 ? '' : '0') + n;
-      };
-      const date2Str = function (date: Date, split?: string): string {
-        split = split || '-';
-        const y = date.getFullYear();
-        const m = getNumTwoBit(date.getMonth() + 1);
-        const d = getNumTwoBit(date.getDate());
-        return [y, m, d].join(split);
-      };
-      const getDay = function (i: number): string {
-        i = i || 0;
-        let date = new Date();
-        const diff = i * (1000 * 60 * 60 * 24);
-        date = new Date(date.getTime() + diff);
-        return date2Str(date);
-      };
-      const isLeapYear = function (y: number): boolean {
-        return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
-      };
-      const getMonthDays = function (year: string, month: string): number {
-        if (/^0/.test(month)) {
-          month = month.split('')[1];
-        }
-        return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
-          month as any
-        ];
-      };
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      const clickBtn = (param: string) => {
-        let date = [date2Str(new Date()), getDay(6)];
-        state.date = date;
-      };
-      const clickBtn1 = (param: string) => {
-        let date = new Date();
-        let year = date.getFullYear();
-        let month: any = date.getMonth() + 1;
-        month = month < 10 ? '0' + month : month + '';
-        let yearMonth = `${year}-${month}`;
-        let currMonthDays = getMonthDays(year + '', month + '');
-        state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
-      };
-      const goDate = () => {
-        if (calendarRef.value) {
-          var date1 = new Date();
-          date1.setDate(date1.getDate() + 30);
-          calendarRef.value.scrollToDate(date2Str(date1));
-        }
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch,
-        clickBtn,
-        clickBtn1,
-        calendarRef,
-        goDate
-      };
-    }
-  };
-</script>
-<style>
-  .nut-cell__value {
-    flex: initial;
-  }
-  .wrapper {
-    display: flex;
-    padding: 0 40px;
-    justify-content: center;
-  }
-  .d_div {
-    margin: 0px 5px;
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  date: [],
+  isVisible: false
+});
+const calendarRef = ref(null);
+const getNumTwoBit = function (n) {
+  n = Number(n);
+  return (n > 9 ? '' : '0') + n;
+};
+const date2Str = function (date, split) {
+  split = split || '-';
+  const y = date.getFullYear();
+  const m = getNumTwoBit(date.getMonth() + 1);
+  const d = getNumTwoBit(date.getDate());
+  return [y, m, d].join(split);
+};
+const getDay = function (i) {
+  i = i || 0;
+  let date = new Date();
+  const diff = i * (1000 * 60 * 60 * 24);
+  date = new Date(date.getTime() + diff);
+  return date2Str(date);
+};
+const isLeapYear = function (y) {
+  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
+};
+const getMonthDays = function (year, month) {
+  if (/^0/.test(month)) {
+    month = month.split('')[1];
   }
-  .d_btn {
-    background: #fa3f19;
-    color: #fff;
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    display: inline-block;
+  return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
+    month as any
+  ];
+};
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
+const clickBtn = () => {
+  let date = [date2Str(new Date()), getDay(6)];
+  state.date = date;
+};
+const clickBtn1 = () => {
+  let date = new Date();
+  let year = date.getFullYear();
+  let month: any = date.getMonth() + 1;
+  month = month < 10 ? '0' + month : month + '';
+  let yearMonth = `${year}-${month}`;
+  let currMonthDays = getMonthDays(year + '', month + '');
+  state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
+};
+const goDate = () => {
+  if (calendarRef.value) {
+    var date1 = new Date();
+    date1.setDate(date1.getDate() + 30);
+    calendarRef.value.scrollToDate(date2Str(date1));
   }
+};
+</script>
+<style>
+.nut-cell__value {
+  flex: initial;
+}
+.wrapper {
+  display: flex;
+  padding: 0 40px;
+  justify-content: center;
+}
+.d_div {
+  margin: 0px 5px;
+}
+.d_btn {
+  background: #fa3f19;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
 </style>
 ```
 
@@ -515,18 +447,18 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="自定义时间文案"
-    :desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
+    :desc="state.date && state.date[0] ? `${state.date[0]}至${state.date[1]}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     type="range"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
@@ -545,89 +477,128 @@ app.use(Calendar);
     </template>
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: [],
-        isVisible: false
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue,
-        openSwitch,
-        closeSwitch
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  date: [],
+  isVisible: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 <style>
-  .nut-cell__value {
-    flex: initial;
-  }
+.nut-cell__value {
+  flex: initial;
+}
 </style>
 ```
 
 :::
 
+### 自定义底部区域 v4.1.6
+
+:::demo
+
+```vue
+<template>
+  <nut-cell
+    :show-icon="true"
+    title="自定义底部区域"
+    :desc="state.date ? `${state.date}` : '请选择'"
+    @click="openSwitch('isVisible')"
+  >
+  </nut-cell>
+  <nut-calendar
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
+    :poppable="true"
+    :is-auto-back-fill="false"
+    @close="closeSwitch('isVisible')"
+    @select="setSelectalue"
+  >
+    <template #footer-info="dateInfo">
+      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)">{{
+        disabled ? '偶数的日期不能选择' : '奇数的日期可以选择'
+      }}</nut-button>
+    </template>
+  </nut-calendar>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  date: '2023-09-03',
+  isVisible: false,
+  disabled: false
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setSelectalue = (param) => {
+  state.disabled = param[2] % 2 === 0;
+};
+const clickBtn = (dateInfo) => {
+  state.date = dateInfo.date[3];
+  state.isVisible = false;
+};
+</script>
+```
+
+:::
+
 ### 自定义周起始日
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     :showIcon="true"
     title="自定义周起始日"
-    :desc="date ? `${date}` : '请选择'"
+    :desc="state.date ? `${state.date}` : '请选择'"
     @click="openSwitch('isVisible')"
   >
   </nut-cell>
   <nut-calendar
-    v-model:visible="isVisible"
-    :default-value="date"
+    v-model:visible="state.isVisible"
+    :default-value="state.date"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
     :first-day-of-week="2"
   >
   </nut-calendar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        date: ''
-      });
-      const openSwitch = (param) => {
-        state[`${param}`] = true;
-      };
-      const closeSwitch = (param) => {
-        state[`${param}`] = false;
-      };
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        openSwitch,
-        closeSwitch,
-        setChooseValue
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  isVisible: false,
+  date: ''
+});
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
+<style>
+.nut-cell__value {
+  flex: initial;
+}
+</style>
 ```
 
 :::
@@ -636,12 +607,12 @@ app.use(Calendar);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="test-calendar-wrapper">
     <nut-calendar
       :poppable="false"
-      :default-value="date"
+      :default-value="state.date"
       :is-auto-back-fill="true"
       @choose="setChooseValue"
       :start-date="`2020-02-01`"
@@ -650,30 +621,22 @@ app.use(Calendar);
     </nut-calendar>
   </div>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        date: '2020-07-08'
-      });
-      const setChooseValue = (param) => {
-        state.date = param[3];
-      };
-      return {
-        ...toRefs(state),
-        setChooseValue
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs } from 'vue';
+const state = reactive({
+  date: '2020-07-08'
+});
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
 </script>
 <style>
-  .test-calendar-wrapper {
-    display: flex;
-    width: 100%;
-    height: 560px;
-    overflow: hidden;
-  }
+.test-calendar-wrapper {
+  display: flex;
+  width: 100%;
+  height: 560px;
+  overflow: hidden;
+}
 </style>
 ```
 
@@ -683,51 +646,51 @@ app.use(Calendar);
 
 ### Props
 
-| 参数              | 说明                                                                           | 类型               | 默认值            |
-| ----------------- | ------------------------------------------------------------------------------ | ------------------ | ----------------- |
-| v-model:visible   | 是否可见                                                                       | boolean            | `false`           |
-| type `v4.0.1`     | 类型，日期单择`one`，区间选择`range`,日期多选`multiple`,周选择`week`(`v4.0.1`) | string             | '`one`'           |
-| poppable          | 是否弹窗状态展示                                                               | boolean            | `true`            |
-| is-auto-back-fill | 自动回填                                                                       | boolean            | `false`           |
-| title             | 显示标题                                                                       | string             | `日期选择`        |
-| default-value     | 默认值，单个日期选择 `string`，其他为 `string[]`                               | string \| string[] | `null`            |
-| start-date        | 开始日期                                                                       | string             | `今天`            |
-| end-date          | 结束日期                                                                       | string             | `距离今天 365 天` |
-| show-today        | 是否展示今天标记                                                               | boolean            | `true`            |
-| start-text        | 范围选择，开始信息文案                                                         | string             | `开始`            |
-| end-text          | 范围选择，结束信息文案                                                         | string             | `结束`            |
-| confirm-text      | 底部确认按钮文案                                                               | string             | `确认`            |
-| show-title        | 是否在展示日历标题                                                             | boolean            | `true`            |
-| show-sub-title    | 是否展示日期标题                                                               | boolean            | `true`            |
-| to-date-animation | 是否启动滚动动画                                                               | boolean            | `true`            |
-| first-day-of-week | 设置周起始日                                                                   | 0-6                | `0`               |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:visible | 是否可见 | boolean | `false` |
+| type | 类型，日期单择`one`，区间选择`range`,日期多选`multiple`,周选择`week`(`v4.0.1`) | string | '`one`' |
+| poppable | 是否弹窗状态展示 | boolean | `true` |
+| is-auto-back-fill | 自动回填 | boolean | `false` |
+| title | 显示标题 | string | `日期选择` |
+| default-value | 默认值，单个日期选择 `string`，其他为 `string[]` | string \| string[] | `null` |
+| start-date | 开始日期 | string | `今天` |
+| end-date | 结束日期 | string | `距离今天 365 天` |
+| show-today | 是否展示今天标记 | boolean | `true` |
+| start-text | 范围选择，开始信息文案 | string | `开始` |
+| end-text | 范围选择，结束信息文案 | string | `结束` |
+| confirm-text | 底部确认按钮文案 | string | `确认` |
+| show-title | 是否在展示日历标题 | boolean | `true` |
+| show-sub-title | 是否展示日期标题 | boolean | `true` |
+| to-date-animation | 是否启动滚动动画 | boolean | `true` |
+| first-day-of-week | 设置周起始日 | 0-6 | `0` |
 
 ### Events
 
-| 事件名 | 说明                                                      | 回调参数                 |
-| ------ | --------------------------------------------------------- | ------------------------ |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | choose | 选择之后或是点击确认按钮触发,日期数组（包含年月日和星期） | `(string \| string[])[]` |
-| close  | 关闭时触发                                                | -                        |
-| select | 点击/选择后触发                                           | `(string \| string[])[]` |
+| close | 关闭时触发 | - |
+| select | 点击/选择后触发 | `(string \| string[])[]` |
 
 ### Slots
 
-| 名称                | 说明                                     |
-| ------------------- | ---------------------------------------- |
-| btn                 | 自定义日历标题下部，可用以添加自定义操作 |
-| day                 | 日期信息                                 |
-| top-info            | 日期顶部信息                             |
-| bottom-info         | 日期底部信息                             |
-| footer-info`v4.1.6` | 日历自定义底部，替代confirm按钮          |
+| 名称 | 说明 |
+| --- | --- |
+| btn | 自定义日历标题下部，可用以添加自定义操作 |
+| day | 日期信息 |
+| top-info | 日期顶部信息 |
+| bottom-info | 日期底部信息 |
+| footer-info`v4.1.6` | 日历自定义底部，替代confirm按钮 |
 
 ### Methods
 
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 `Calendar` 实例并调用实例方法。
 
-| 方法名                | 说明                                  | 参数     |
-| --------------------- | ------------------------------------- | -------- |
-| scrollToDate          | 滚动到指定日期所在月,如：'2021-12-30' | `string` |
-| initPosition `v4.0.1` | 初始化滚动位置                        | 无       |
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| scrollToDate | 滚动到指定日期所在月,如：'2021-12-30' | `string` |
+| initPosition `v4.0.1` | 初始化滚动位置 | 无 |
 
 ## 主题定制
 
@@ -735,20 +698,20 @@ app.use(Calendar);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                    | 默认值                     |
-| --------------------------------------- | -------------------------- |
-| --nut-calendar-primary-color            | _var(--nut-primary-color)_ |
-| --nut-calendar-choose-color             | _var(--nut-primary-color)_ |
-| --nut-calendar-choose-font-color        | _var(--nut-primary-color)_ |
-| --nut-calendar-base-color               | _#333333_                  |
-| --nut-calendar-disable-color            | _#d1d0d0_                  |
-| --nut-calendar-base-font                | _var(--nut-font-size-3)_   |
-| --nut-calendar-title-font               | _var(--nut-font-size-4)_   |
-| --nut-calendar-title-font-weight        | _500_                      |
-| --nut-calendar-sub-title-font           | _var(--nut-font-size-2)_   |
-| --nut-calendar-text-font                | _var(--nut-font-size-1)_   |
-| --nut-calendar-day-font                 | _16px_                     |
-| --nut-calendar-day-active-border-radius | _0px_                      |
-| --nut-calendar-day-font-weight          | _500_                      |
-| --nut-calendar-day67-font-color         | _var(--nut-primary-color)_ |
-| --nut-calendar-month-title-font-size    | _inherit_                  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-calendar-primary-color | _var(--nut-primary-color)_ |
+| --nut-calendar-choose-color | _var(--nut-primary-color)_ |
+| --nut-calendar-choose-font-color | _var(--nut-primary-color)_ |
+| --nut-calendar-base-color | _#333333_ |
+| --nut-calendar-disable-color | _#d1d0d0_ |
+| --nut-calendar-base-font | _var(--nut-font-size-3)_ |
+| --nut-calendar-title-font | _var(--nut-font-size-4)_ |
+| --nut-calendar-title-font-weight | _500_ |
+| --nut-calendar-sub-title-font | _var(--nut-font-size-2)_ |
+| --nut-calendar-text-font | _var(--nut-font-size-1)_ |
+| --nut-calendar-day-font | _16px_ |
+| --nut-calendar-day-active-border-radius | _0px_ |
+| --nut-calendar-day-font-weight | _500_ |
+| --nut-calendar-day67-font-color | _var(--nut-primary-color)_ |
+| --nut-calendar-month-title-font-size | _inherit_ |
diff --git a/src/packages/__VUE/cascader/demo.vue b/src/packages/__VUE/cascader/demo.vue
index bb4e615ea6..0405f060be 100644
--- a/src/packages/__VUE/cascader/demo.vue
+++ b/src/packages/__VUE/cascader/demo.vue
@@ -90,8 +90,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('cascader');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -116,196 +116,181 @@ const initTranslate = () =>
       addressTip1: 'Please select an address'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    // 基础用法
-    const demo1 = reactive({
-      visible: false,
-      // value: ['湖南'],
-      value: [],
-      options: [
+initTranslate();
+// 基础用法
+const demo1 = reactive({
+  visible: false,
+  // value: ['湖南'],
+  value: [],
+  options: [
+    {
+      value: '浙江',
+      text: '浙江',
+      children: [
         {
-          value: '浙江',
-          text: '浙江',
+          value: '杭州',
+          text: '杭州',
+          disabled: true,
           children: [
-            {
-              value: '杭州',
-              text: '杭州',
-              disabled: true,
-              children: [
-                { value: '西湖区', text: '西湖区' },
-                { value: '余杭区', text: '余杭区' }
-              ]
-            },
-            {
-              value: '温州',
-              text: '温州',
-              children: [
-                { value: '鹿城区', text: '鹿城区' },
-                { value: '瓯海区', text: '瓯海区' }
-              ]
-            }
+            { value: '西湖区', text: '西湖区' },
+            { value: '余杭区', text: '余杭区' }
           ]
         },
         {
-          value: '湖南',
-          text: '湖南',
-          disabled: true
-        },
+          value: '温州',
+          text: '温州',
+          children: [
+            { value: '鹿城区', text: '鹿城区' },
+            { value: '瓯海区', text: '瓯海区' }
+          ]
+        }
+      ]
+    },
+    {
+      value: '湖南',
+      text: '湖南',
+      disabled: true
+    },
+    {
+      value: '福建',
+      text: '福建',
+      children: [
         {
-          value: '福建',
-          text: '福建',
+          value: '福州',
+          text: '福州',
           children: [
-            {
-              value: '福州',
-              text: '福州',
-              children: [
-                { value: '鼓楼区', text: '鼓楼区' },
-                { value: '台江区', text: '台江区' }
-              ]
-            }
+            { value: '鼓楼区', text: '鼓楼区' },
+            { value: '台江区', text: '台江区' }
           ]
         }
       ]
-    });
+    }
+  ]
+});
 
-    // 自定义属性名称
-    const demo2 = reactive({
-      visible: false,
-      value: ['福建', '福州', '台江区'],
-      options: [
+// 自定义属性名称
+const demo2 = reactive({
+  visible: false,
+  value: ['福建', '福州', '台江区'],
+  options: [
+    {
+      text: '浙江',
+      items: [
         {
-          text: '浙江',
-          items: [
-            {
-              text: '杭州',
-              disabled: true,
-              items: [{ text: '西湖区' }, { text: '余杭区' }]
-            },
-            {
-              text: '温州',
-              items: [{ text: '鹿城区' }, { text: '瓯海区' }]
-            }
-          ]
+          text: '杭州',
+          disabled: true,
+          items: [{ text: '西湖区' }, { text: '余杭区' }]
         },
         {
-          text: '福建',
-          items: [
-            {
-              text: '福州',
-              items: [{ text: '鼓楼区' }, { text: '台江区' }]
-            }
-          ]
+          text: '温州',
+          items: [{ text: '鹿城区' }, { text: '瓯海区' }]
         }
       ]
-    });
-
-    // 动态加载
-    const demo3 = reactive({
-      visible: false,
-      value: ['A0', 'A12', 'A23', 'A32'],
-      lazyLoad(node: any, resolve: (children: any) => void) {
-        setTimeout(() => {
-          // root表示第一层数据
-          if (node.root) {
-            resolve([
-              { value: 'A0', text: 'A0' },
-              { value: 'B0', text: 'B0' },
-              { value: 'C0', text: 'C0' }
-            ]);
-          } else {
-            const { value, level } = node;
-            const text = value.substring(0, 1);
-            const value1 = `${text}${level + 1}1`;
-            const value2 = `${text}${level + 1}2`;
-            const value3 = `${text}${level + 1}3`;
-            resolve([
-              { value: value1, text: value1, leaf: level >= 6 },
-              { value: value2, text: value2, leaf: level >= 6 },
-              { value: value3, text: value3, leaf: level >= 6 }
-            ]);
-          }
-        }, 2000);
-      }
-    });
-
-    // 部分数据动态加载
-    const demo4 = reactive({
-      visible: false,
-      value: [],
-      options: [
-        { value: 'A0', text: 'A0' },
+    },
+    {
+      text: '福建',
+      items: [
         {
-          value: 'B0',
-          text: 'B0',
-          children: [
-            { value: 'B11', text: 'B11', leaf: true },
-            { value: 'B12', text: 'B12' }
-          ]
-        },
-        { value: 'C0', text: 'C0' }
-      ],
-      lazyLoad(node: any, resolve: (children: any) => void) {
-        setTimeout(() => {
-          const { value, level } = node;
-          const text = value.substring(0, 1);
-          const value1 = `${text}${level + 1}1`;
-          const value2 = `${text}${level + 1}2`;
-          resolve([
-            { value: value1, text: value1, leaf: level >= 2 },
-            { value: value2, text: value2, leaf: level >= 1 }
-          ]);
-        }, 500);
+          text: '福州',
+          items: [{ text: '鼓楼区' }, { text: '台江区' }]
+        }
+      ]
+    }
+  ]
+});
+
+// 动态加载
+const demo3 = reactive({
+  visible: false,
+  value: ['A0', 'A12', 'A23', 'A32'],
+  lazyLoad(node: any, resolve: (children: any) => void) {
+    setTimeout(() => {
+      // root表示第一层数据
+      if (node.root) {
+        resolve([
+          { value: 'A0', text: 'A0' },
+          { value: 'B0', text: 'B0' },
+          { value: 'C0', text: 'C0' }
+        ]);
+      } else {
+        const { value, level } = node;
+        const text = value.substring(0, 1);
+        const value1 = `${text}${level + 1}1`;
+        const value2 = `${text}${level + 1}2`;
+        const value3 = `${text}${level + 1}3`;
+        resolve([
+          { value: value1, text: value1, leaf: level >= 6 },
+          { value: value2, text: value2, leaf: level >= 6 },
+          { value: value3, text: value3, leaf: level >= 6 }
+        ]);
       }
-    });
+    }, 2000);
+  }
+});
 
-    const demo5 = reactive({
-      visible: false,
-      value: ['广东省', '广州市'],
-      convertConfig: {
-        topId: null,
-        idKey: 'id',
-        pidKey: 'pid',
-        sortKey: ''
-      },
-      options: [
-        { value: '北京', text: '北京', id: 1, pid: null },
-        { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
-        { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
-        { value: '广东省', text: '广东省', id: 2, pid: null },
-        { value: '广州市', text: '广州市', id: 21, pid: 2 }
+// 部分数据动态加载
+const demo4 = reactive({
+  visible: false,
+  value: [],
+  options: [
+    { value: 'A0', text: 'A0' },
+    {
+      value: 'B0',
+      text: 'B0',
+      children: [
+        { value: 'B11', text: 'B11', leaf: true },
+        { value: 'B12', text: 'B12' }
       ]
-    });
+    },
+    { value: 'C0', text: 'C0' }
+  ],
+  lazyLoad(node: any, resolve: (children: any) => void) {
+    setTimeout(() => {
+      const { value, level } = node;
+      const text = value.substring(0, 1);
+      const value1 = `${text}${level + 1}1`;
+      const value2 = `${text}${level + 1}2`;
+      resolve([
+        { value: value1, text: value1, leaf: level >= 2 },
+        { value: value2, text: value2, leaf: level >= 1 }
+      ]);
+    }, 500);
+  }
+});
 
-    // onMounted(() => {
-    //   setTimeout(() => {
-    //     demo1.value = ['浙江', '温州', '瓯海区'];
-    //     setTimeout(() => {
-    //       demo1.value = ['浙江', '杭州', '西湖区'];
-    //     }, 2000);
-    //   }, 2000);
-    // });
+const demo5 = reactive({
+  visible: false,
+  value: ['广东省', '广州市'],
+  convertConfig: {
+    topId: null,
+    idKey: 'id',
+    pidKey: 'pid',
+    sortKey: ''
+  },
+  options: [
+    { value: '北京', text: '北京', id: 1, pid: null },
+    { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
+    { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
+    { value: '广东省', text: '广东省', id: 2, pid: null },
+    { value: '广州市', text: '广州市', id: 21, pid: 2 }
+  ]
+});
 
-    const events = {
-      change(...args: any) {
-        console.log('change', ...args);
-      },
-      pathChange(...args: any) {
-        console.log('pathChange', ...args);
-      }
-    };
+// onMounted(() => {
+//   setTimeout(() => {
+//     demo1.value = ['浙江', '温州', '瓯海区'];
+//     setTimeout(() => {
+//       demo1.value = ['浙江', '杭州', '西湖区'];
+//     }, 2000);
+//   }, 2000);
+// });
 
-    return {
-      demo1,
-      demo2,
-      demo3,
-      demo4,
-      demo5,
-      events,
-      translate
-    };
+const events = {
+  change(...args: any) {
+    console.log('change', ...args);
+  },
+  pathChange(...args: any) {
+    console.log('pathChange', ...args);
   }
-});
+};
 </script>
diff --git a/src/packages/__VUE/cascader/doc.en-US.md b/src/packages/__VUE/cascader/doc.en-US.md
index 231467edbe..165d82c98b 100644
--- a/src/packages/__VUE/cascader/doc.en-US.md
+++ b/src/packages/__VUE/cascader/doc.en-US.md
@@ -19,7 +19,7 @@ app.use(Cascader);
 Pass in the `options` list.
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     title="select address"
@@ -36,74 +36,64 @@ Pass in the `options` list.
     :options="demo1.options"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      // 基础用法
-      const demo1 = reactive({
-        visible: false,
-        value: ['湖南'],
-        options: [
-          {
-            value: '浙江',
-            text: '浙江',
-            children: [
-              {
-                value: '杭州',
-                text: '杭州',
-                disabled: true,
-                children: [
-                  { value: '西湖区', text: '西湖区' },
-                  { value: '余杭区', text: '余杭区' }
-                ]
-              },
-              {
-                value: '温州',
-                text: '温州',
-                children: [
-                  { value: '鹿城区', text: '鹿城区' },
-                  { value: '瓯海区', text: '瓯海区' }
-                ]
-              }
-            ]
-          },
-          {
-            value: '湖南',
-            text: '湖南',
-            disabled: true
-          },
-          {
-            value: '福建',
-            text: '福建',
-            children: [
-              {
-                value: '福州',
-                text: '福州',
-                children: [
-                  { value: '鼓楼区', text: '鼓楼区' },
-                  { value: '台江区', text: '台江区' }
-                ]
-              }
-            ]
-          }
-        ]
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
+<script setup>
+import { reactive } from 'vue';
+const demo1 = reactive({
+  visible: false,
+  value: ['湖南'],
+  options: [
+    {
+      value: '浙江',
+      text: '浙江',
+      children: [
+        {
+          value: '杭州',
+          text: '杭州',
+          disabled: true,
+          children: [
+            { value: '西湖区', text: '西湖区' },
+            { value: '余杭区', text: '余杭区' }
+          ]
         },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
+        {
+          value: '温州',
+          text: '温州',
+          children: [
+            { value: '鹿城区', text: '鹿城区' },
+            { value: '瓯海区', text: '瓯海区' }
+          ]
         }
-      };
-
-      return {
-        demo1,
-        events
-      };
+      ]
+    },
+    {
+      value: '湖南',
+      text: '湖南',
+      disabled: true
+    },
+    {
+      value: '福建',
+      text: '福建',
+      children: [
+        {
+          value: '福州',
+          text: '福州',
+          children: [
+            { value: '鼓楼区', text: '鼓楼区' },
+            { value: '台江区', text: '台江区' }
+          ]
+        }
+      ]
     }
-  };
+  ]
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -114,7 +104,7 @@ Pass in the `options` list.
 use `textKey`、`valueKey`、`childrenKey`Specify the property name.
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     title="select address"
@@ -134,52 +124,45 @@ use `textKey`、`valueKey`、`childrenKey`Specify the property name.
     :options="demo2.options"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      // 自定义属性名称
-      const demo2 = reactive({
-        visible: false,
-        value: ['福建', '福州', '台江区'],
-        options: [
-          {
-            text: '浙江',
-            items: [
-              {
-                text: '杭州',
-                disabled: true,
-                items: [{ text: '西湖区' }, { text: '余杭区' }]
-              },
-              {
-                text: '温州',
-                items: [{ text: '鹿城区' }, { text: '瓯海区' }]
-              }
-            ]
-          },
-          {
-            text: '福建',
-            items: [
-              {
-                text: '福州',
-                items: [{ text: '鼓楼区' }, { text: '台江区' }]
-              }
-            ]
-          }
-        ]
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
+<script setup>
+import { reactive } from 'vue';
+const demo2 = reactive({
+  visible: false,
+  value: ['福建', '福州', '台江区'],
+  options: [
+    {
+      text: '浙江',
+      items: [
+        {
+          text: '杭州',
+          disabled: true,
+          items: [{ text: '西湖区' }, { text: '余杭区' }]
         },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
+        {
+          text: '温州',
+          items: [{ text: '鹿城区' }, { text: '瓯海区' }]
         }
-      };
-
-      return { demo2, events };
+      ]
+    },
+    {
+      text: '福建',
+      items: [
+        {
+          text: '福州',
+          items: [{ text: '鼓楼区' }, { text: '台江区' }]
+        }
+      ]
     }
-  };
+  ]
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -190,7 +173,7 @@ use `textKey`、`valueKey`、`childrenKey`Specify the property name.
 Use `lazy` to identify whether data needs to be obtained dynamically. At this time, not transmitting `options` means that all data needs to be loaded through `lazyload` . The first loading is distinguished by the `root` attribute. When a non leaf node is encountered, the `lazyload` method will be called. The parameters are the current node and the `resolve` method. Note that the `resolve` method must be called. If it is not transmitted to a child node, it will be treated as a leaf node.
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     title="select address"
@@ -208,49 +191,43 @@ Use `lazy` to identify whether data needs to be obtained dynamically. At this ti
     :lazyLoad="demo3.lazyLoad"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const demo3 = reactive({
-        visible: false,
-        value: ['A0', 'A12', 'A23', 'A32'],
-        lazyLoad(node: any, resolve: (children: any) => void) {
-          setTimeout(() => {
-            // root表示第一层数据
-            if (node.root) {
-              resolve([
-                { value: 'A0', text: 'A0' },
-                { value: 'B0', text: 'B0' },
-                { value: 'C0', text: 'C0' }
-              ]);
-            } else {
-              const { value, level } = node;
-              const text = value.substring(0, 1);
-              const value1 = `${text}${level + 1}1`;
-              const value2 = `${text}${level + 1}2`;
-              const value3 = `${text}${level + 1}3`;
-              resolve([
-                { value: value1, text: value1, leaf: level >= 6 },
-                { value: value2, text: value2, leaf: level >= 6 },
-                { value: value3, text: value3, leaf: level >= 6 }
-              ]);
-            }
-          }, 2000);
-        }
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
-        },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
-        }
-      };
-
-      return { demo3, events };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const demo3 = reactive({
+  visible: false,
+  value: ['A0', 'A12', 'A23', 'A32'],
+  lazyLoad(node, resolve) {
+    setTimeout(() => {
+      // root表示第一层数据
+      if (node.root) {
+        resolve([
+          { value: 'A0', text: 'A0' },
+          { value: 'B0', text: 'B0' },
+          { value: 'C0', text: 'C0' }
+        ]);
+      } else {
+        const { value, level } = node;
+        const text = value.substring(0, 1);
+        const value1 = `${text}${level + 1}1`;
+        const value2 = `${text}${level + 1}2`;
+        const value3 = `${text}${level + 1}3`;
+        resolve([
+          { value: value1, text: value1, leaf: level >= 6 },
+          { value: value2, text: value2, leaf: level >= 6 },
+          { value: value3, text: value3, leaf: level >= 6 }
+        ]);
+      }
+    }, 2000);
+  }
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -260,7 +237,7 @@ Use `lazy` to identify whether data needs to be obtained dynamically. At this ti
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     title="select address"
@@ -279,50 +256,44 @@ Use `lazy` to identify whether data needs to be obtained dynamically. At this ti
     :lazyLoad="demo4.lazyLoad"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const demo4 = reactive({
-        visible: false,
-        value: [],
-        options: [
-          { value: 'A0', text: 'A0' },
-          {
-            value: 'B0',
-            text: 'B0',
-            children: [
-              { value: 'B11', text: 'B11', leaf: true },
-              { value: 'B12', text: 'B12' }
-            ]
-          },
-          { value: 'C0', text: 'C0' }
-        ],
-        lazyLoad(node: any, resolve: (children: any) => void) {
-          setTimeout(() => {
-            const { value, level } = node;
-            const text = value.substring(0, 1);
-            const value1 = `${text}${level + 1}1`;
-            const value2 = `${text}${level + 1}2`;
-            resolve([
-              { value: value1, text: value1, leaf: level >= 2 },
-              { value: value2, text: value2, leaf: level >= 1 }
-            ]);
-          }, 500);
-        }
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
-        },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
-        }
-      };
-
-      return { demo4, events };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const demo4 = reactive({
+  visible: false,
+  value: [],
+  options: [
+    { value: 'A0', text: 'A0' },
+    {
+      value: 'B0',
+      text: 'B0',
+      children: [
+        { value: 'B11', text: 'B11', leaf: true },
+        { value: 'B12', text: 'B12' }
+      ]
+    },
+    { value: 'C0', text: 'C0' }
+  ],
+  lazyLoad(node, resolve) {
+    setTimeout(() => {
+      const { value, level } = node;
+      const text = value.substring(0, 1);
+      const value1 = `${text}${level + 1}1`;
+      const value2 = `${text}${level + 1}2`;
+      resolve([
+        { value: value1, text: value1, leaf: level >= 2 },
+        { value: value2, text: value2, leaf: level >= 1 }
+      ]);
+    }, 500);
+  }
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -334,7 +305,7 @@ If your data is a flat structure that can be converted into a tree structure, yo
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell
     title="select address"
@@ -352,39 +323,33 @@ If your data is a flat structure that can be converted into a tree structure, yo
     :convertConfig="demo5.convertConfig"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const demo5 = reactive({
-        visible: false,
-        value: ['广东省', '广州市'],
-        convertConfig: {
-          topId: null,
-          idKey: 'id',
-          pidKey: 'pid',
-          sortKey: ''
-        },
-        options: [
-          { value: '北京', text: '北京', id: 1, pid: null },
-          { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
-          { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
-          { value: '广东省', text: '广东省', id: 2, pid: null },
-          { value: '广州市', text: '广州市', id: 21, pid: 2 }
-        ]
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
-        },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
-        }
-      };
-
-      return { demo5, events };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const demo5 = reactive({
+  visible: false,
+  value: ['广东省', '广州市'],
+  convertConfig: {
+    topId: null,
+    idKey: 'id',
+    pidKey: 'pid',
+    sortKey: ''
+  },
+  options: [
+    { value: '北京', text: '北京', id: 1, pid: null },
+    { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
+    { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
+    { value: '广东省', text: '广东省', id: 2, pid: null },
+    { value: '广州市', text: '广州市', id: 21, pid: 2 }
+  ]
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -394,28 +359,28 @@ If your data is a flat structure that can be converted into a tree structure, yo
 
 ### Props
 
-| Attribute           | Description                                                                                                  | Type     | Default       |
-| ------------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------------- |
-| v-model             | Selected value, bidirectional binding                                                                        | Array    | -             |
-| v-model:visible     | selected layer                                                                                               | boolean  | `false`       |
-| options             | Cascade data                                                                                                 | Array    | -             |
-| lazy                | Whether to enable dynamic loading                                                                            | boolean  | -             |
-| lazy-load           | Dynamic loading callback, which takes effect when dynamic loading is enabled                                 | Function | -             |
-| value-key           | Customize the field of `value` in the `options` structure                                                    | string   | -             |
-| text-key            | Customize the fields of `text` in the `options` structure                                                    | string   | -             |
-| children-key        | Customize the fields of `children` in the `options` structure                                                | string   | -             |
-| convert-config      | When options is a flat structure that can be converted into a tree structure, configure the conversion rules | object   | -             |
-| title               | Title                                                                                                        | string   | `''`          |
-| close-icon-position | Cancel the button position and inherit the popup component                                                   | string   | `"top-right"` |
-| closeable           | Whether to display the close button and inherit the popup component                                          | boolean  | `false`       |
-| poppable            | Whether to display the popup（After setting to false, the title is invalid）                                 | boolean  | `true`        |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Selected value, bidirectional binding | Array | - |
+| v-model:visible | selected layer | boolean | `false` |
+| options | Cascade data | Array | - |
+| lazy | Whether to enable dynamic loading | boolean | - |
+| lazy-load | Dynamic loading callback, which takes effect when dynamic loading is enabled | Function | - |
+| value-key | Customize the field of `value` in the `options` structure | string | - |
+| text-key | Customize the fields of `text` in the `options` structure | string | - |
+| children-key | Customize the fields of `children` in the `options` structure | string | - |
+| convert-config | When options is a flat structure that can be converted into a tree structure, configure the conversion rules | object | - |
+| title | Title | string | `''` |
+| close-icon-position | Cancel the button position and inherit the popup component | string | `"top-right"` |
+| closeable | Whether to display the close button and inherit the popup component | boolean | `false` |
+| poppable | Whether to display the popup（After setting to false, the title is invalid） | boolean | `true` |
 
 ### Events
 
-| Event       | Description                               | Arguments            |
-| ----------- | ----------------------------------------- | -------------------- |
-| change      | Triggered when the selected value changes | `(value, pathNodes)` |
-| path-change | Triggered when the selected item changes  | `(pathNodes) `       |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| change | Triggered when the selected value changes | `(value, pathNodes)` |
+| path-change | Triggered when the selected item changes | `(pathNodes) ` |
 
 ## Theming
 
@@ -423,16 +388,16 @@ If your data is a flat structure that can be converted into a tree structure, yo
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                             | Default Value              |
-| -------------------------------- | -------------------------- |
-| --nut-cascader-font-size         | _var(--nut-font-size-2)_   |
-| --nut-cascader-line-height       | _22px_                     |
-| --nut-cascader-tabs-item-padding | _0 10px_                   |
-| --nut-cascader-bar-padding       | _24px 20px 17px_           |
-| --nut-cascader-bar-font-size     | _var(--nut-font-size-4)_   |
-| --nut-cascader-bar-line-height   | _20px_                     |
-| --nut-cascader-bar-color         | _var(--nut-title-color)_   |
-| --nut-cascader-item-padding      | _10px 20px_                |
-| --nut-cascader-item-color        | _var(--nut-title-color)_   |
-| --nut-cascader-item-font-size    | _var(--nut-font-size-2)_   |
+| Name | Default Value |
+| --- | --- |
+| --nut-cascader-font-size | _var(--nut-font-size-2)_ |
+| --nut-cascader-line-height | _22px_ |
+| --nut-cascader-tabs-item-padding | _0 10px_ |
+| --nut-cascader-bar-padding | _24px 20px 17px_ |
+| --nut-cascader-bar-font-size | _var(--nut-font-size-4)_ |
+| --nut-cascader-bar-line-height | _20px_ |
+| --nut-cascader-bar-color | _var(--nut-title-color)_ |
+| --nut-cascader-item-padding | _10px 20px_ |
+| --nut-cascader-item-color | _var(--nut-title-color)_ |
+| --nut-cascader-item-font-size | _var(--nut-font-size-2)_ |
 | --nut-cascader-item-active-color | _var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/cascader/doc.md b/src/packages/__VUE/cascader/doc.md
index 004cd74dc5..33e3392361 100644
--- a/src/packages/__VUE/cascader/doc.md
+++ b/src/packages/__VUE/cascader/doc.md
@@ -19,7 +19,7 @@ app.use(Cascader);
 传入`options`列表。
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo1.value.toString() || '请选择地址'" @click="demo1.visible = true"> </nut-cell>
   <nut-cascader
@@ -31,74 +31,64 @@ app.use(Cascader);
     :options="demo1.options"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      // 基础用法
-      const demo1 = reactive({
-        visible: false,
-        value: ['湖南'],
-        options: [
-          {
-            value: '浙江',
-            text: '浙江',
-            children: [
-              {
-                value: '杭州',
-                text: '杭州',
-                disabled: true,
-                children: [
-                  { value: '西湖区', text: '西湖区' },
-                  { value: '余杭区', text: '余杭区' }
-                ]
-              },
-              {
-                value: '温州',
-                text: '温州',
-                children: [
-                  { value: '鹿城区', text: '鹿城区' },
-                  { value: '瓯海区', text: '瓯海区' }
-                ]
-              }
-            ]
-          },
-          {
-            value: '湖南',
-            text: '湖南',
-            disabled: true
-          },
-          {
-            value: '福建',
-            text: '福建',
-            children: [
-              {
-                value: '福州',
-                text: '福州',
-                children: [
-                  { value: '鼓楼区', text: '鼓楼区' },
-                  { value: '台江区', text: '台江区' }
-                ]
-              }
-            ]
-          }
-        ]
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
+<script setup>
+import { reactive } from 'vue';
+const demo1 = reactive({
+  visible: false,
+  value: ['湖南'],
+  options: [
+    {
+      value: '浙江',
+      text: '浙江',
+      children: [
+        {
+          value: '杭州',
+          text: '杭州',
+          disabled: true,
+          children: [
+            { value: '西湖区', text: '西湖区' },
+            { value: '余杭区', text: '余杭区' }
+          ]
         },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
+        {
+          value: '温州',
+          text: '温州',
+          children: [
+            { value: '鹿城区', text: '鹿城区' },
+            { value: '瓯海区', text: '瓯海区' }
+          ]
         }
-      };
-
-      return {
-        demo1,
-        events
-      };
+      ]
+    },
+    {
+      value: '湖南',
+      text: '湖南',
+      disabled: true
+    },
+    {
+      value: '福建',
+      text: '福建',
+      children: [
+        {
+          value: '福州',
+          text: '福州',
+          children: [
+            { value: '鼓楼区', text: '鼓楼区' },
+            { value: '台江区', text: '台江区' }
+          ]
+        }
+      ]
     }
-  };
+  ]
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -109,7 +99,7 @@ app.use(Cascader);
 可通过`textKey`、`valueKey`、`childrenKey`指定属性名。
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo2.value.toString() || '请选择地址'" @click="demo2.visible = true"> </nut-cell>
   <nut-cascader
@@ -124,52 +114,45 @@ app.use(Cascader);
     :options="demo2.options"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      // 自定义属性名称
-      const demo2 = reactive({
-        visible: false,
-        value: ['福建', '福州', '台江区'],
-        options: [
-          {
-            text: '浙江',
-            items: [
-              {
-                text: '杭州',
-                disabled: true,
-                items: [{ text: '西湖区' }, { text: '余杭区' }]
-              },
-              {
-                text: '温州',
-                items: [{ text: '鹿城区' }, { text: '瓯海区' }]
-              }
-            ]
-          },
-          {
-            text: '福建',
-            items: [
-              {
-                text: '福州',
-                items: [{ text: '鼓楼区' }, { text: '台江区' }]
-              }
-            ]
-          }
-        ]
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
+<script setup>
+import { reactive } from 'vue';
+const demo2 = reactive({
+  visible: false,
+  value: ['福建', '福州', '台江区'],
+  options: [
+    {
+      text: '浙江',
+      items: [
+        {
+          text: '杭州',
+          disabled: true,
+          items: [{ text: '西湖区' }, { text: '余杭区' }]
         },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
+        {
+          text: '温州',
+          items: [{ text: '鹿城区' }, { text: '瓯海区' }]
         }
-      };
-
-      return { demo2, events };
+      ]
+    },
+    {
+      text: '福建',
+      items: [
+        {
+          text: '福州',
+          items: [{ text: '鼓楼区' }, { text: '台江区' }]
+        }
+      ]
     }
-  };
+  ]
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -180,7 +163,7 @@ app.use(Cascader);
 使用`lazy`标识是否需要动态获取数据，此时不传`options`代表所有数据都需要通过`lazyLoad`加载，首次加载通过`root`属性区分，当遇到非叶子节点时会调用`lazyLoad`方法，参数为当前节点和`resolve`方法，注意`resolve`方法必须调用，不传子节点时会被当做叶子节点处理。
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo3.value.toString() || '请选择地址'" @click="demo3.visible = true"> </nut-cell>
   <nut-cascader
@@ -193,49 +176,43 @@ app.use(Cascader);
     :lazyLoad="demo3.lazyLoad"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const demo3 = reactive({
-        visible: false,
-        value: ['A0', 'A12', 'A23', 'A32'],
-        lazyLoad(node: any, resolve: (children: any) => void) {
-          setTimeout(() => {
-            // root表示第一层数据
-            if (node.root) {
-              resolve([
-                { value: 'A0', text: 'A0' },
-                { value: 'B0', text: 'B0' },
-                { value: 'C0', text: 'C0' }
-              ]);
-            } else {
-              const { value, level } = node;
-              const text = value.substring(0, 1);
-              const value1 = `${text}${level + 1}1`;
-              const value2 = `${text}${level + 1}2`;
-              const value3 = `${text}${level + 1}3`;
-              resolve([
-                { value: value1, text: value1, leaf: level >= 6 },
-                { value: value2, text: value2, leaf: level >= 6 },
-                { value: value3, text: value3, leaf: level >= 6 }
-              ]);
-            }
-          }, 2000);
-        }
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
-        },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
-        }
-      };
-
-      return { demo3, events };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const demo3 = reactive({
+  visible: false,
+  value: ['A0', 'A12', 'A23', 'A32'],
+  lazyLoad(node, resolve) {
+    setTimeout(() => {
+      // root表示第一层数据
+      if (node.root) {
+        resolve([
+          { value: 'A0', text: 'A0' },
+          { value: 'B0', text: 'B0' },
+          { value: 'C0', text: 'C0' }
+        ]);
+      } else {
+        const { value, level } = node;
+        const text = value.substring(0, 1);
+        const value1 = `${text}${level + 1}1`;
+        const value2 = `${text}${level + 1}2`;
+        const value3 = `${text}${level + 1}3`;
+        resolve([
+          { value: value1, text: value1, leaf: level >= 6 },
+          { value: value2, text: value2, leaf: level >= 6 },
+          { value: value3, text: value3, leaf: level >= 6 }
+        ]);
+      }
+    }, 2000);
+  }
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -245,7 +222,7 @@ app.use(Cascader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo4.value.toString() || '请选择地址'" @click="demo4.visible = true"> </nut-cell>
   <nut-cascader
@@ -259,50 +236,44 @@ app.use(Cascader);
     :lazyLoad="demo4.lazyLoad"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const demo4 = reactive({
-        visible: false,
-        value: [],
-        options: [
-          { value: 'A0', text: 'A0' },
-          {
-            value: 'B0',
-            text: 'B0',
-            children: [
-              { value: 'B11', text: 'B11', leaf: true },
-              { value: 'B12', text: 'B12' }
-            ]
-          },
-          { value: 'C0', text: 'C0' }
-        ],
-        lazyLoad(node: any, resolve: (children: any) => void) {
-          setTimeout(() => {
-            const { value, level } = node;
-            const text = value.substring(0, 1);
-            const value1 = `${text}${level + 1}1`;
-            const value2 = `${text}${level + 1}2`;
-            resolve([
-              { value: value1, text: value1, leaf: level >= 2 },
-              { value: value2, text: value2, leaf: level >= 1 }
-            ]);
-          }, 500);
-        }
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
-        },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
-        }
-      };
-
-      return { demo4, events };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const demo4 = reactive({
+  visible: false,
+  value: [],
+  options: [
+    { value: 'A0', text: 'A0' },
+    {
+      value: 'B0',
+      text: 'B0',
+      children: [
+        { value: 'B11', text: 'B11', leaf: true },
+        { value: 'B12', text: 'B12' }
+      ]
+    },
+    { value: 'C0', text: 'C0' }
+  ],
+  lazyLoad(node, resolve) {
+    setTimeout(() => {
+      const { value, level } = node;
+      const text = value.substring(0, 1);
+      const value1 = `${text}${level + 1}1`;
+      const value2 = `${text}${level + 1}2`;
+      resolve([
+        { value: value1, text: value1, leaf: level >= 2 },
+        { value: value2, text: value2, leaf: level >= 1 }
+      ]);
+    }, 500);
+  }
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -314,7 +285,7 @@ app.use(Cascader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo5.value.toString() || '请选择地址'" @click="demo5.visible = true"> </nut-cell>
   <nut-cascader
@@ -327,39 +298,33 @@ app.use(Cascader);
     :convertConfig="demo5.convertConfig"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const demo5 = reactive({
-        visible: false,
-        value: ['广东省', '广州市'],
-        convertConfig: {
-          topId: null,
-          idKey: 'id',
-          pidKey: 'pid',
-          sortKey: ''
-        },
-        options: [
-          { value: '北京', text: '北京', id: 1, pid: null },
-          { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
-          { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
-          { value: '广东省', text: '广东省', id: 2, pid: null },
-          { value: '广州市', text: '广州市', id: 21, pid: 2 }
-        ]
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
-        },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
-        }
-      };
-
-      return { demo5, events };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const demo5 = reactive({
+  visible: false,
+  value: ['广东省', '广州市'],
+  convertConfig: {
+    topId: null,
+    idKey: 'id',
+    pidKey: 'pid',
+    sortKey: ''
+  },
+  options: [
+    { value: '北京', text: '北京', id: 1, pid: null },
+    { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
+    { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
+    { value: '广东省', text: '广东省', id: 2, pid: null },
+    { value: '广州市', text: '广州市', id: 21, pid: 2 }
+  ]
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -369,28 +334,28 @@ app.use(Cascader);
 
 ### Props
 
-| 参数                | 说明                                                      | 类型     | 默认值        |
-| ------------------- | --------------------------------------------------------- | -------- | ------------- |
-| v-model             | 选中值，双向绑定                                          | Array    | -             |
-| v-model:visible     | 显示选择层                                                | boolean  | `false`       |
-| options             | 级联数据                                                  | Array    | -             |
-| lazy                | 是否开启动态加载                                          | boolean  | -             |
-| lazy-load           | 动态加载回调，开启动态加载时生效                          | Function | -             |
-| value-key           | 自定义 `options` 结构中 `value` 的字段                    | string   | -             |
-| text-key            | 自定义 `options` 结构中 `text` 的字段                     | string   | -             |
-| children-key        | 自定义 `options` 结构中 `children` 的字段                 | string   | -             |
-| convert-config      | 当 `options` 为可转换为树形结构的扁平结构时，配置转换规则 | object   | -             |
-| title               | 标题                                                      | string   | `''`          |
-| close-icon-position | 取消按钮位置，继承 `Popup` 组件                           | string   | `"top-right"` |
-| closeable           | 是否显示关闭按钮，继承 `Popup` 组件                       | boolean  | `false`       |
-| poppable            | 是否需要弹层展示（设置为 `false` 后，`title` 失效）       | boolean  | `true`        |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 选中值，双向绑定 | Array | - |
+| v-model:visible | 显示选择层 | boolean | `false` |
+| options | 级联数据 | Array | - |
+| lazy | 是否开启动态加载 | boolean | - |
+| lazy-load | 动态加载回调，开启动态加载时生效 | Function | - |
+| value-key | 自定义 `options` 结构中 `value` 的字段 | string | - |
+| text-key | 自定义 `options` 结构中 `text` 的字段 | string | - |
+| children-key | 自定义 `options` 结构中 `children` 的字段 | string | - |
+| convert-config | 当 `options` 为可转换为树形结构的扁平结构时，配置转换规则 | object | - |
+| title | 标题 | string | `''` |
+| close-icon-position | 取消按钮位置，继承 `Popup` 组件 | string | `"top-right"` |
+| closeable | 是否显示关闭按钮，继承 `Popup` 组件 | boolean | `false` |
+| poppable | 是否需要弹层展示（设置为 `false` 后，`title` 失效） | boolean | `true` |
 
 ### Events
 
-| 事件名      | 说明             | 回调参数             |
-| ----------- | ---------------- | -------------------- |
-| change      | 选中值改变时触发 | `(value, pathNodes)` |
-| path-change | 选中项改变时触发 | `(pathNodes)`        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 选中值改变时触发 | `(value, pathNodes)` |
+| path-change | 选中项改变时触发 | `(pathNodes)` |
 
 ## 主题定制
 
@@ -398,16 +363,16 @@ app.use(Cascader);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                             | 默认值                     |
-| -------------------------------- | -------------------------- |
-| --nut-cascader-font-size         | _var(--nut-font-size-2)_   |
-| --nut-cascader-line-height       | _22px_                     |
-| --nut-cascader-tabs-item-padding | _0 10px_                   |
-| --nut-cascader-bar-padding       | _24px 20px 17px_           |
-| --nut-cascader-bar-font-size     | _var(--nut-font-size-4)_   |
-| --nut-cascader-bar-line-height   | _20px_                     |
-| --nut-cascader-bar-color         | _var(--nut-title-color)_   |
-| --nut-cascader-item-padding      | _10px 20px_                |
-| --nut-cascader-item-color        | _var(--nut-title-color)_   |
-| --nut-cascader-item-font-size    | _var(--nut-font-size-2)_   |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-cascader-font-size | _var(--nut-font-size-2)_ |
+| --nut-cascader-line-height | _22px_ |
+| --nut-cascader-tabs-item-padding | _0 10px_ |
+| --nut-cascader-bar-padding | _24px 20px 17px_ |
+| --nut-cascader-bar-font-size | _var(--nut-font-size-4)_ |
+| --nut-cascader-bar-line-height | _20px_ |
+| --nut-cascader-bar-color | _var(--nut-title-color)_ |
+| --nut-cascader-item-padding | _10px 20px_ |
+| --nut-cascader-item-color | _var(--nut-title-color)_ |
+| --nut-cascader-item-font-size | _var(--nut-font-size-2)_ |
 | --nut-cascader-item-active-color | _var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/cascader/doc.taro.md b/src/packages/__VUE/cascader/doc.taro.md
index ea2bbd3c24..b3ca19a8aa 100644
--- a/src/packages/__VUE/cascader/doc.taro.md
+++ b/src/packages/__VUE/cascader/doc.taro.md
@@ -19,7 +19,7 @@ app.use(Cascader);
 传入`options`列表。
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo1.value.toString() || '请选择地址'" @click="demo1.visible = true"> </nut-cell>
   <nut-cascader
@@ -31,74 +31,64 @@ app.use(Cascader);
     :options="demo1.options"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      // 基础用法
-      const demo1 = reactive({
-        visible: false,
-        value: ['湖南'],
-        options: [
-          {
-            value: '浙江',
-            text: '浙江',
-            children: [
-              {
-                value: '杭州',
-                text: '杭州',
-                disabled: true,
-                children: [
-                  { value: '西湖区', text: '西湖区' },
-                  { value: '余杭区', text: '余杭区' }
-                ]
-              },
-              {
-                value: '温州',
-                text: '温州',
-                children: [
-                  { value: '鹿城区', text: '鹿城区' },
-                  { value: '瓯海区', text: '瓯海区' }
-                ]
-              }
-            ]
-          },
-          {
-            value: '湖南',
-            text: '湖南',
-            disabled: true
-          },
-          {
-            value: '福建',
-            text: '福建',
-            children: [
-              {
-                value: '福州',
-                text: '福州',
-                children: [
-                  { value: '鼓楼区', text: '鼓楼区' },
-                  { value: '台江区', text: '台江区' }
-                ]
-              }
-            ]
-          }
-        ]
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
+<script setup>
+import { reactive } from 'vue';
+const demo1 = reactive({
+  visible: false,
+  value: ['湖南'],
+  options: [
+    {
+      value: '浙江',
+      text: '浙江',
+      children: [
+        {
+          value: '杭州',
+          text: '杭州',
+          disabled: true,
+          children: [
+            { value: '西湖区', text: '西湖区' },
+            { value: '余杭区', text: '余杭区' }
+          ]
         },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
+        {
+          value: '温州',
+          text: '温州',
+          children: [
+            { value: '鹿城区', text: '鹿城区' },
+            { value: '瓯海区', text: '瓯海区' }
+          ]
         }
-      };
-
-      return {
-        demo1,
-        events
-      };
+      ]
+    },
+    {
+      value: '湖南',
+      text: '湖南',
+      disabled: true
+    },
+    {
+      value: '福建',
+      text: '福建',
+      children: [
+        {
+          value: '福州',
+          text: '福州',
+          children: [
+            { value: '鼓楼区', text: '鼓楼区' },
+            { value: '台江区', text: '台江区' }
+          ]
+        }
+      ]
     }
-  };
+  ]
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -109,7 +99,7 @@ app.use(Cascader);
 可通过`textKey`、`valueKey`、`childrenKey`指定属性名。
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo2.value.toString() || '请选择地址'" @click="demo2.visible = true"> </nut-cell>
   <nut-cascader
@@ -124,52 +114,45 @@ app.use(Cascader);
     :options="demo2.options"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      // 自定义属性名称
-      const demo2 = reactive({
-        visible: false,
-        value: ['福建', '福州', '台江区'],
-        options: [
-          {
-            text: '浙江',
-            items: [
-              {
-                text: '杭州',
-                disabled: true,
-                items: [{ text: '西湖区' }, { text: '余杭区' }]
-              },
-              {
-                text: '温州',
-                items: [{ text: '鹿城区' }, { text: '瓯海区' }]
-              }
-            ]
-          },
-          {
-            text: '福建',
-            items: [
-              {
-                text: '福州',
-                items: [{ text: '鼓楼区' }, { text: '台江区' }]
-              }
-            ]
-          }
-        ]
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
+<script setup>
+import { reactive } from 'vue';
+const demo2 = reactive({
+  visible: false,
+  value: ['福建', '福州', '台江区'],
+  options: [
+    {
+      text: '浙江',
+      items: [
+        {
+          text: '杭州',
+          disabled: true,
+          items: [{ text: '西湖区' }, { text: '余杭区' }]
         },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
+        {
+          text: '温州',
+          items: [{ text: '鹿城区' }, { text: '瓯海区' }]
         }
-      };
-
-      return { demo2, events };
+      ]
+    },
+    {
+      text: '福建',
+      items: [
+        {
+          text: '福州',
+          items: [{ text: '鼓楼区' }, { text: '台江区' }]
+        }
+      ]
     }
-  };
+  ]
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -180,7 +163,7 @@ app.use(Cascader);
 使用`lazy`标识是否需要动态获取数据，此时不传`options`代表所有数据都需要通过`lazyLoad`加载，首次加载通过`root`属性区分，当遇到非叶子节点时会调用`lazyLoad`方法，参数为当前节点和`resolve`方法，注意`resolve`方法必须调用，不传子节点时会被当做叶子节点处理。
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo3.value.toString() || '请选择地址'" @click="demo3.visible = true"> </nut-cell>
   <nut-cascader
@@ -193,49 +176,43 @@ app.use(Cascader);
     :lazyLoad="demo3.lazyLoad"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const demo3 = reactive({
-        visible: false,
-        value: ['A0', 'A12', 'A23', 'A32'],
-        lazyLoad(node: any, resolve: (children: any) => void) {
-          setTimeout(() => {
-            // root表示第一层数据
-            if (node.root) {
-              resolve([
-                { value: 'A0', text: 'A0' },
-                { value: 'B0', text: 'B0' },
-                { value: 'C0', text: 'C0' }
-              ]);
-            } else {
-              const { value, level } = node;
-              const text = value.substring(0, 1);
-              const value1 = `${text}${level + 1}1`;
-              const value2 = `${text}${level + 1}2`;
-              const value3 = `${text}${level + 1}3`;
-              resolve([
-                { value: value1, text: value1, leaf: level >= 6 },
-                { value: value2, text: value2, leaf: level >= 6 },
-                { value: value3, text: value3, leaf: level >= 6 }
-              ]);
-            }
-          }, 2000);
-        }
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
-        },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
-        }
-      };
-
-      return { demo3, events };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const demo3 = reactive({
+  visible: false,
+  value: ['A0', 'A12', 'A23', 'A32'],
+  lazyLoad(node, resolve) {
+    setTimeout(() => {
+      // root表示第一层数据
+      if (node.root) {
+        resolve([
+          { value: 'A0', text: 'A0' },
+          { value: 'B0', text: 'B0' },
+          { value: 'C0', text: 'C0' }
+        ]);
+      } else {
+        const { value, level } = node;
+        const text = value.substring(0, 1);
+        const value1 = `${text}${level + 1}1`;
+        const value2 = `${text}${level + 1}2`;
+        const value3 = `${text}${level + 1}3`;
+        resolve([
+          { value: value1, text: value1, leaf: level >= 6 },
+          { value: value2, text: value2, leaf: level >= 6 },
+          { value: value3, text: value3, leaf: level >= 6 }
+        ]);
+      }
+    }, 2000);
+  }
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -245,7 +222,7 @@ app.use(Cascader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo4.value.toString() || '请选择地址'" @click="demo4.visible = true"> </nut-cell>
   <nut-cascader
@@ -259,50 +236,44 @@ app.use(Cascader);
     :lazyLoad="demo4.lazyLoad"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const demo4 = reactive({
-        visible: false,
-        value: [],
-        options: [
-          { value: 'A0', text: 'A0' },
-          {
-            value: 'B0',
-            text: 'B0',
-            children: [
-              { value: 'B11', text: 'B11', leaf: true },
-              { value: 'B12', text: 'B12' }
-            ]
-          },
-          { value: 'C0', text: 'C0' }
-        ],
-        lazyLoad(node: any, resolve: (children: any) => void) {
-          setTimeout(() => {
-            const { value, level } = node;
-            const text = value.substring(0, 1);
-            const value1 = `${text}${level + 1}1`;
-            const value2 = `${text}${level + 1}2`;
-            resolve([
-              { value: value1, text: value1, leaf: level >= 2 },
-              { value: value2, text: value2, leaf: level >= 1 }
-            ]);
-          }, 500);
-        }
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
-        },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
-        }
-      };
-
-      return { demo4, events };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const demo4 = reactive({
+  visible: false,
+  value: [],
+  options: [
+    { value: 'A0', text: 'A0' },
+    {
+      value: 'B0',
+      text: 'B0',
+      children: [
+        { value: 'B11', text: 'B11', leaf: true },
+        { value: 'B12', text: 'B12' }
+      ]
+    },
+    { value: 'C0', text: 'C0' }
+  ],
+  lazyLoad(node, resolve) {
+    setTimeout(() => {
+      const { value, level } = node;
+      const text = value.substring(0, 1);
+      const value1 = `${text}${level + 1}1`;
+      const value2 = `${text}${level + 1}2`;
+      resolve([
+        { value: value1, text: value1, leaf: level >= 2 },
+        { value: value2, text: value2, leaf: level >= 1 }
+      ]);
+    }, 500);
+  }
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -314,7 +285,7 @@ app.use(Cascader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="demo5.value.toString() || '请选择地址'" @click="demo5.visible = true"> </nut-cell>
   <nut-cascader
@@ -327,39 +298,33 @@ app.use(Cascader);
     :convertConfig="demo5.convertConfig"
   ></nut-cascader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const demo5 = reactive({
-        visible: false,
-        value: ['广东省', '广州市'],
-        convertConfig: {
-          topId: null,
-          idKey: 'id',
-          pidKey: 'pid',
-          sortKey: ''
-        },
-        options: [
-          { value: '北京', text: '北京', id: 1, pid: null },
-          { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
-          { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
-          { value: '广东省', text: '广东省', id: 2, pid: null },
-          { value: '广州市', text: '广州市', id: 21, pid: 2 }
-        ]
-      });
-      const events = {
-        change(...args: any) {
-          console.log('change', ...args);
-        },
-        pathChange(...args: any) {
-          console.log('pathChange', ...args);
-        }
-      };
-
-      return { demo5, events };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const demo5 = reactive({
+  visible: false,
+  value: ['广东省', '广州市'],
+  convertConfig: {
+    topId: null,
+    idKey: 'id',
+    pidKey: 'pid',
+    sortKey: ''
+  },
+  options: [
+    { value: '北京', text: '北京', id: 1, pid: null },
+    { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },
+    { value: '亦庄', text: '亦庄', id: 111, pid: 11 },
+    { value: '广东省', text: '广东省', id: 2, pid: null },
+    { value: '广州市', text: '广州市', id: 21, pid: 2 }
+  ]
+});
+const events = {
+  change(...args) {
+    console.log('change', ...args);
+  },
+  pathChange(...args) {
+    console.log('pathChange', ...args);
+  }
+};
 </script>
 ```
 
@@ -369,28 +334,28 @@ app.use(Cascader);
 
 ### Props
 
-| 参数                | 说明                                                      | 类型     | 默认值        |
-| ------------------- | --------------------------------------------------------- | -------- | ------------- |
-| v-model             | 选中值，双向绑定                                          | Array    | -             |
-| v-model:visible     | 显示选择层                                                | boolean  | `false`       |
-| options             | 级联数据                                                  | Array    | -             |
-| lazy                | 是否开启动态加载                                          | boolean  | -             |
-| lazy-load           | 动态加载回调，开启动态加载时生效                          | Function | -             |
-| value-key           | 自定义 `options` 结构中 `value` 的字段                    | string   | -             |
-| text-key            | 自定义 `options` 结构中 `text` 的字段                     | string   | -             |
-| children-key        | 自定义 `options` 结构中 `children` 的字段                 | string   | -             |
-| convert-config      | 当 `options` 为可转换为树形结构的扁平结构时，配置转换规则 | object   | -             |
-| title               | 标题                                                      | string   | `''`          |
-| close-icon-position | 取消按钮位置，继承 `Popup` 组件                           | string   | `"top-right"` |
-| closeable           | 是否显示关闭按钮，继承 `Popup` 组件                       | boolean  | `false`       |
-| poppable            | 是否需要弹层展示（设置为 `false` 后，`title` 失效）       | boolean  | `true`        |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 选中值，双向绑定 | Array | - |
+| v-model:visible | 显示选择层 | boolean | `false` |
+| options | 级联数据 | Array | - |
+| lazy | 是否开启动态加载 | boolean | - |
+| lazy-load | 动态加载回调，开启动态加载时生效 | Function | - |
+| value-key | 自定义 `options` 结构中 `value` 的字段 | string | - |
+| text-key | 自定义 `options` 结构中 `text` 的字段 | string | - |
+| children-key | 自定义 `options` 结构中 `children` 的字段 | string | - |
+| convert-config | 当 `options` 为可转换为树形结构的扁平结构时，配置转换规则 | object | - |
+| title | 标题 | string | `''` |
+| close-icon-position | 取消按钮位置，继承 `Popup` 组件 | string | `"top-right"` |
+| closeable | 是否显示关闭按钮，继承 `Popup` 组件 | boolean | `false` |
+| poppable | 是否需要弹层展示（设置为 `false` 后，`title` 失效） | boolean | `true` |
 
 ### Events
 
-| 事件名      | 说明             | 回调参数             |
-| ----------- | ---------------- | -------------------- |
-| change      | 选中值改变时触发 | `(value, pathNodes)` |
-| path-change | 选中项改变时触发 | `(pathNodes) `       |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 选中值改变时触发 | `(value, pathNodes)` |
+| path-change | 选中项改变时触发 | `(pathNodes)` |
 
 ## 主题定制
 
@@ -398,16 +363,16 @@ app.use(Cascader);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                             | 默认值                     |
-| -------------------------------- | -------------------------- |
-| --nut-cascader-font-size         | _var(--nut-font-size-2)_   |
-| --nut-cascader-line-height       | _22px_                     |
-| --nut-cascader-tabs-item-padding | _0 10px_                   |
-| --nut-cascader-bar-padding       | _24px 20px 17px_           |
-| --nut-cascader-bar-font-size     | _var(--nut-font-size-4)_   |
-| --nut-cascader-bar-line-height   | _20px_                     |
-| --nut-cascader-bar-color         | _var(--nut-title-color)_   |
-| --nut-cascader-item-padding      | _10px 20px_                |
-| --nut-cascader-item-color        | _var(--nut-title-color)_   |
-| --nut-cascader-item-font-size    | _var(--nut-font-size-2)_   |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-cascader-font-size | _var(--nut-font-size-2)_ |
+| --nut-cascader-line-height | _22px_ |
+| --nut-cascader-tabs-item-padding | _0 10px_ |
+| --nut-cascader-bar-padding | _24px 20px 17px_ |
+| --nut-cascader-bar-font-size | _var(--nut-font-size-4)_ |
+| --nut-cascader-bar-line-height | _20px_ |
+| --nut-cascader-bar-color | _var(--nut-title-color)_ |
+| --nut-cascader-item-padding | _10px 20px_ |
+| --nut-cascader-item-color | _var(--nut-title-color)_ |
+| --nut-cascader-item-font-size | _var(--nut-font-size-2)_ |
 | --nut-cascader-item-active-color | _var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/checkbox/demo.vue b/src/packages/__VUE/checkbox/demo.vue
index c48e3d3500..a984504d92 100644
--- a/src/packages/__VUE/checkbox/demo.vue
+++ b/src/packages/__VUE/checkbox/demo.vue
@@ -2,42 +2,42 @@
   <div class="demo">
     <nut-cell-group :title="translate('basic')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox1" :label="translate('checkbox')" @change="changeBox1">
+        <nut-checkbox v-model="state.checkbox1" :label="translate('checkbox')" @change="changeBox1">
           {{ translate('checkbox') }}
         </nut-checkbox>
       </nut-cell>
       <nut-cell>
-        <nut-checkbox v-model="checkbox2" text-position="left" @change="checkbox2">
+        <nut-checkbox v-model="state.checkbox2" text-position="left" @change="changeBox2">
           {{ translate('checkbox') }}
         </nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('semi')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox9" :indeterminate="true" :label="translate('checkbox')">
+        <nut-checkbox v-model="state.checkbox9" :indeterminate="true" :label="translate('checkbox')">
           {{ translate('checkbox') }}
         </nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('disable')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox3" disabled>{{ translate('unselectDisable') }}</nut-checkbox>
+        <nut-checkbox v-model="state.checkbox3" disabled>{{ translate('unselectDisable') }}</nut-checkbox>
       </nut-cell>
       <nut-cell>
-        <nut-checkbox v-model="checkbox4" disabled>{{ translate('selectedDisable') }}</nut-checkbox>
+        <nut-checkbox v-model="state.checkbox4" disabled>{{ translate('selectedDisable') }}</nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('size')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox5" icon-size="25">{{ translate('size') }}25</nut-checkbox>
+        <nut-checkbox v-model="state.checkbox5" icon-size="25">{{ translate('size') }}25</nut-checkbox>
       </nut-cell>
       <nut-cell>
-        <nut-checkbox v-model="checkbox6" icon-size="10">{{ translate('size') }} 10</nut-checkbox>
+        <nut-checkbox v-model="state.checkbox6" icon-size="10">{{ translate('size') }} 10</nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('icon')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox7">
+        <nut-checkbox v-model="state.checkbox7">
           {{ translate('icon') }}
           <template #icon>
             <Checklist />
@@ -50,12 +50,12 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('change')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox8" @change="changeBox3">change {{ translate('checkbox') }}</nut-checkbox>
+        <nut-checkbox v-model="state.checkbox8" @change="changeBox3">change {{ translate('checkbox') }}</nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('useGroup')">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup1">
+        <nut-checkbox-group v-model="state.checkboxgroup1">
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="3" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
@@ -64,12 +64,12 @@
       </nut-cell>
       <nut-cell>
         <div class="demo-check">{{ translate('selected') }}</div>
-        <div>{{ checkboxgroup1 }}</div>
+        <div>{{ state.checkboxgroup1 }}</div>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('disableGroup')">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup2" disabled>
+        <nut-checkbox-group v-model="state.checkboxgroup2" disabled>
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="3" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
@@ -79,8 +79,8 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('selectGroup')">
       <nut-cell>
-        <nut-checkbox-group ref="group" v-model="checkboxgroup3" @change="changeBox4">
-          <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">
+        <nut-checkbox-group ref="group" v-model="state.checkboxgroup3" @change="changeBox4">
+          <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">
             {{ item.value }}
           </nut-checkbox>
         </nut-checkbox-group>
@@ -97,7 +97,7 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('useGroupLimit')">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup4" :max="2">
+        <nut-checkbox-group v-model="state.checkboxgroup4" :max="2">
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
           <nut-checkbox label="3" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
@@ -106,16 +106,16 @@
       </nut-cell>
       <nut-cell>
         <div class="demo-check">{{ translate('selected') }}</div>
-        <div>{{ checkboxgroup4 }}</div>
+        <div>{{ state.checkboxgroup4 }}</div>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('useGroupInte')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox10" :indeterminate="indeterminate" @change="changeBox5">{{
+        <nut-checkbox v-model="state.checkbox10" :indeterminate="state.indeterminate" @change="changeBox5">{{
           translate('selectAll')
         }}</nut-checkbox>
       </nut-cell>
-      <nut-checkbox-group ref="group2" v-model="checkboxgroup5" @change="changeBox6">
+      <nut-checkbox-group ref="group2" v-model="state.checkboxgroup5" @change="changeBox6">
         <nut-cell>
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
         </nut-cell>
@@ -132,7 +132,7 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('useShape')">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup6">
+        <nut-checkbox-group v-model="state.checkboxgroup6">
           <nut-checkbox label="1" shape="button">{{ translate('useShape') }}</nut-checkbox>
           <nut-checkbox label="2" shape="button">{{ translate('useShape') }}</nut-checkbox>
         </nut-checkbox-group>
@@ -140,8 +140,8 @@
     </nut-cell-group>
   </div>
 </template>
-<script lang="ts">
-import { reactive, ref, toRefs, Ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, ref, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
 const { translate } = createComponent('checkbox');
@@ -196,99 +196,77 @@ const initTranslate = () =>
       useShape: 'Button shape'
     }
   });
-export default defineComponent({
-  components: {
-    Checklist
-  },
-  setup() {
-    initTranslate();
-    const group = ref(null) as Ref;
-    const group2 = ref(null) as Ref;
-    const data = reactive({
-      checkbox1: true,
-      checkbox2: false,
-      checkbox3: false,
-      checkbox4: true,
-      checkbox5: false,
-      checkbox6: false,
-      checkbox7: false,
-      checkbox8: false,
-      checkbox9: true,
-      checkbox10: false,
-      checkboxgroup1: ['2', '3'],
-      checkboxgroup2: ['2'],
-      checkboxgroup3: ['2'],
-      checkboxgroup4: ['2'],
-      checkboxgroup5: [],
-      checkboxgroup6: [],
-      checkboxsource: [
-        { label: '1', value: translate('combine') },
-        { label: '2', value: translate('combine') },
-        { label: '3', value: translate('combine') },
-        { label: '4', value: translate('combine') },
-        { label: '5', value: translate('combine') },
-        { label: '6', value: translate('combine') }
-      ],
-      indeterminate: false
-    });
-    const changeBox1 = (state: boolean, label: string) => {
-      console.log(state, label);
-    };
-
-    const changeBox2 = (state: boolean, label: string) => {
-      console.log(state, label);
-    };
+initTranslate();
+const group = ref(null) as Ref;
+const group2 = ref(null) as Ref;
+const state = reactive({
+  checkbox1: true,
+  checkbox2: false,
+  checkbox3: false,
+  checkbox4: true,
+  checkbox5: false,
+  checkbox6: false,
+  checkbox7: false,
+  checkbox8: false,
+  checkbox9: true,
+  checkbox10: false,
+  checkboxgroup1: ['2', '3'],
+  checkboxgroup2: ['2'],
+  checkboxgroup3: ['2'],
+  checkboxgroup4: ['2'],
+  checkboxgroup5: [],
+  checkboxgroup6: [],
+  checkboxsource: [
+    { label: '1', value: translate('combine') },
+    { label: '2', value: translate('combine') },
+    { label: '3', value: translate('combine') },
+    { label: '4', value: translate('combine') },
+    { label: '5', value: translate('combine') },
+    { label: '6', value: translate('combine') }
+  ],
+  indeterminate: false
+});
+const changeBox1 = (state: boolean, label: string) => {
+  console.log(state, label);
+};
 
-    const changeBox3 = (state: boolean, label: string) => {
-      showToast.text(`${state ? translate('select') : translate('cancel')} ${label}`);
-    };
+const changeBox2 = (state: boolean, label: string) => {
+  console.log(state, label);
+};
 
-    const changeBox4 = (label: any[]) => {
-      console.log(label);
-    };
+const changeBox3 = (state: boolean, label: string) => {
+  showToast.text(`${state ? translate('select') : translate('cancel')} ${label}`);
+};
 
-    const changeBox5 = (value: boolean) => {
-      group2.value.toggleAll(value);
-    };
+const changeBox4 = (label: any[]) => {
+  console.log(label);
+};
 
-    const changeBox6 = (label: string[]) => {
-      if (label.length === 4) {
-        data.indeterminate = false;
-        data.checkbox10 = true;
-      } else if (label.length && label.length < 4) {
-        data.indeterminate = true;
-      } else {
-        data.indeterminate = false;
-        data.checkbox10 = false;
-      }
-    };
+const changeBox5 = (value: boolean) => {
+  group2.value.toggleAll(value);
+};
 
-    const toggleAll = (f: boolean) => {
-      showToast.text(`${f ? translate('selectAll') : translate('cancel')}`);
-      group.value.toggleAll(f);
-    };
+const changeBox6 = (label: string[]) => {
+  if (label.length === 4) {
+    state.indeterminate = false;
+    state.checkbox10 = true;
+  } else if (label.length && label.length < 4) {
+    state.indeterminate = true;
+  } else {
+    state.indeterminate = false;
+    state.checkbox10 = false;
+  }
+};
 
-    const toggleReverse = () => {
-      showToast.text(`反选`);
-      group.value.toggleReverse();
-    };
+const toggleAll = (f: boolean) => {
+  showToast.text(`${f ? translate('selectAll') : translate('cancel')}`);
+  group.value.toggleAll(f);
+};
 
-    return {
-      changeBox1,
-      changeBox2,
-      changeBox3,
-      changeBox4,
-      changeBox5,
-      changeBox6,
-      toggleAll,
-      toggleReverse,
-      group,
-      group2,
-      translate,
-      ...toRefs(data)
-    };
-  }
-});
+const toggleReverse = () => {
+  showToast.text(`反选`);
+  group.value.toggleReverse();
+};
 </script>
 <style lang="scss" scoped>
 .demo-check {
diff --git a/src/packages/__VUE/checkbox/doc.en-US.md b/src/packages/__VUE/checkbox/doc.en-US.md
index b0addbdb4a..3041eeca52 100644
--- a/src/packages/__VUE/checkbox/doc.en-US.md
+++ b/src/packages/__VUE/checkbox/doc.en-US.md
@@ -6,7 +6,7 @@ The multiple selection button is used to select.
 
 ### Install
 
-```ts
+```js
 import { createApp } from 'vue';
 import { Checkbox, CheckboxGroup } from '@nutui/nutui';
 
@@ -19,32 +19,24 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox1" label="check box">check box</nut-checkbox>
   <nut-checkbox v-model="checkbox2" text-position="left">check box</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox1: false,
-        checkbox2: false
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox1 = ref(false);
+const checkbox2 = ref(false);
 </script>
 <style>
-  .nut-checkbox {
-    display: flex;
-    margin-right: 20px;
-    .nut-checkbox__label {
-      margin-left: 10px;
-    }
-  }
+.nut-checkbox {
+  display: flex;
+  margin-right: 20px;
+}
+.nut-checkbox__label {
+  margin-left: 10px;
+}
 </style>
 ```
 
@@ -54,23 +46,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
-    <nut-checkbox v-model="checkbox9" :indeterminate="true" label="check box">check box</nut-checkbox>
+    <nut-checkbox v-model="value" :indeterminate="true" label="check box">check box</nut-checkbox>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox9: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(false);
 </script>
 ```
 
@@ -80,23 +64,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox3" disabled>Disabled when not selected</nut-checkbox>
   <nut-checkbox v-model="checkbox4" disabled>Disabled when selected</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox3: false,
-        checkbox4: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox3 = ref(false);
+const checkbox4 = ref(false);
 </script>
 ```
 
@@ -106,23 +82,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox5" icon-size="25">Custom size 25</nut-checkbox>
   <nut-checkbox v-model="checkbox6" icon-size="10">Custom size 10</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox5: true,
-        checkbox6: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox5 = ref(false);
+const checkbox6 = ref(false);
 </script>
 ```
 
@@ -134,7 +102,7 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox7">
     Custom icon
@@ -142,18 +110,9 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
     <template #checkedIcon> <Checklist color="red" /> </template>
   </nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  import { Checklist } from '@nutui/icons-vue';
-  export default {
-    components: { Checklist },
-    setup() {
-      const state = reactive({
-        checkbox7: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox7 = ref(false);
 </script>
 ```
 
@@ -165,26 +124,16 @@ When the value changes, the `change` event will be triggered
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox" @change="changeBox3">change check box</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox: false
-      });
-      const changeBox3 = (state: boolean, label: string) => {
-        showToast.text(`${state ? 'selected' : 'cancel'} ${label}`);
-      };
-      return { ...toRefs(state), changeBox3 };
-    }
-  };
+<script setup>
+import { reactive, toRefs } from 'vue';
+const checkbox = ref(false);
+const changeBox = (state, label) => {
+  console.log(`${state ? 'select' : 'cancel'} ${label}`);
+};
 </script>
 ```
 
@@ -194,7 +143,7 @@ When the value changes, the `change` event will be triggered
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox-group v-model="checkboxgroup1">
     <nut-checkbox label="1">Combined check box</nut-checkbox>
@@ -207,18 +156,9 @@ When the value changes, the `change` event will be triggered
     <div>{{ checkboxgroup1 }}</div>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup1: ['2', '3']
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkboxgroup1 = ref(['2', '3']);
 </script>
 ```
 
@@ -228,7 +168,7 @@ When the value changes, the `change` event will be triggered
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox-group v-model="checkboxgroup1" disabled>
     <nut-checkbox label="1">Combined check box</nut-checkbox>
@@ -241,18 +181,9 @@ When the value changes, the `change` event will be triggered
     <div>{{ checkboxgroup1 }}</div>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup1: ['2', '3']
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkboxgroup1 = ref(['2', '3']);
 </script>
 ```
 
@@ -262,10 +193,10 @@ When the value changes, the `change` event will be triggered
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
-    <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{item.value}}</nut-checkbox>
+    <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{ item.value }}</nut-checkbox>
   </nut-checkbox-group>
   <span class="btn">
     <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">Select all</nut-button>
@@ -273,42 +204,33 @@ When the value changes, the `change` event will be triggered
     <nut-button type="warning" @click="toggleReverse()">reverse selection</nut-button>
   </span>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup3: ['2'],
-        checkboxsource: [
-          { label: '1', value: 'Combined check box' },
-          { label: '2', value: 'Combined check box' },
-          { label: '3', value: 'Combined check box' },
-          { label: '4', value: 'Combined check box' },
-          { label: '5', value: 'Combined check box' },
-          { label: '6', value: 'Combined check box' }
-        ]
-      });
-
-      const group = ref(null);
-      const changeBox4 = (label: any[]) => {
-        showToast.text(`${label.length === state.checkboxsource.length ? 'Select all' : 'Cancel select all'}`);
-      };
-
-      const toggleAll = (f: boolean) => {
-        (group.value as any).toggleAll(f);
-      };
-
-      const toggleReverse = () => {
-        showToast.text(`reverse selection`);
-        group.value.toggleReverse();
-      };
-
-      return { ...toRefs(state), group, changeBox4, toggleAll };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  checkboxgroup3: ['2'],
+  checkboxsource: [
+    { label: '1', value: 'Combined check box' },
+    { label: '2', value: 'Combined check box' },
+    { label: '3', value: 'Combined check box' },
+    { label: '4', value: 'Combined check box' },
+    { label: '5', value: 'Combined check box' },
+    { label: '6', value: 'Combined check box' }
+  ]
+});
+
+const group = ref(null);
+const changeBox4 = (label) => {
+  console.log(`${label.length === state.checkboxsource.length ? 'Select all' : 'Cancel select all'}`);
+};
+
+const toggleAll = (f) => {
+  group.value.toggleAll(f);
+};
+
+const toggleReverse = () => {
+  console.log(`reverse selection`);
+  group.value.toggleReverse();
+};
 </script>
 ```
 
@@ -318,7 +240,7 @@ When the value changes, the `change` event will be triggered
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="use checkboxGroup, Limit the maximum number of options (2)">
     <nut-cell>
@@ -335,18 +257,9 @@ When the value changes, the `change` event will be triggered
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup4: ['2']
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkboxgroup1 = ref(['2']);
 </script>
 ```
 
@@ -356,7 +269,7 @@ When the value changes, the `change` event will be triggered
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Select all / half / cancel">
     <nut-cell>
@@ -370,39 +283,30 @@ When the value changes, the `change` event will be triggered
     </nut-checkbox-group>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, ref, Ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const group2 = ref(null) as Ref;
-      const state = reactive({
-        indeterminate: false,
-        checkbox10: false,
-        checkboxgroup5: []
-      });
-
-      const changeBox5 = (value: boolean) => {
-        group2.value.toggleAll(value);
-      };
-
-      const changeBox6 = (label: string[]) => {
-        if (label.length === 4) {
-          state.indeterminate = false;
-          state.checkbox10 = true;
-        } else if (label.length && label.length < 4) {
-          state.indeterminate = true;
-        } else {
-          data.indeterminate = false;
-          state.checkbox10 = false;
-        }
-      };
-
-      return { ...toRefs(state), group2, changeBox5, changeBox6 };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const group2 = ref(null);
+const state = reactive({
+  indeterminate: false,
+  checkbox10: false,
+  checkboxgroup5: []
+});
+
+const changeBox5 = (value) => {
+  group2.value.toggleAll(value);
+};
+
+const changeBox6 = (label) => {
+  if (label.length === 4) {
+    state.indeterminate = false;
+    state.checkbox10 = true;
+  } else if (label.length && label.length < 4) {
+    state.indeterminate = true;
+  } else {
+    data.indeterminate = false;
+    state.checkbox10 = false;
+  }
+};
 </script>
 ```
 
@@ -412,50 +316,50 @@ When the value changes, the `change` event will be triggered
 
 ### Checkbox Props
 
-| Attribute     | Description                                                                                        | Type             | Default |
-| ------------- | -------------------------------------------------------------------------------------------------- | ---------------- | ------- |
-| v-model       | If selected                                                                                        | boolean          | `false` |
-| disabled      | Disable selection                                                                                  | boolean          | `false` |
-| text-position | The position of the text, optional value：`left`,`right`                                           | string           | `right` |
-| icon-size     | [Icon Size](#/en-US/icon)                                                                          | string \| number | `18`    |
-| label         | Text content of the check box                                                                      | string           | -       |
-| indeterminate | Whether half selection status is currently supported. It is generally used in select all operation | boolean          | `false` |
-| shape         | Shape, optional values：`button`、`round`                                                          | String           | `round` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | If selected | boolean | `false` |
+| disabled | Disable selection | boolean | `false` |
+| text-position | The position of the text, optional value：`left`,`right` | string | `right` |
+| icon-size | [Icon Size](#/en-US/icon) | string \| number | `18` |
+| label | Text content of the check box | string | - |
+| indeterminate | Whether half selection status is currently supported. It is generally used in select all operation | boolean | `false` |
+| shape | Shape, optional values：`button`、`round` | String | `round` |
 
 ### Checkbox Slots
 
-| Name          | Description             |
-| ------------- | ----------------------- |
-| icon          | Icon when not selected  |
-| checkedIcon   | Icon when selected      |
+| Name | Description |
+| --- | --- |
+| icon | Icon when not selected |
+| checkedIcon | Icon when selected |
 | indeterminate | Icon when half selected |
 
 ### CheckboxGroup Props
 
-| Attribute | Description                                                                                                             | Type    | Default |
-| --------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
-| v-model   | Identifier of the currently selected item, corresponding to `label`                                                     | Array   | -       |
-| disabled  | Whether to disable the selection, which will be used for all check boxes under it                                       | boolean | `false` |
-| max       | Limit the number of choices. It cannot be used with select all / cancel / invert selection. `0 'means there is no limit | number  | `0`     |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Identifier of the currently selected item, corresponding to `label` | Array | - |
+| disabled | Whether to disable the selection, which will be used for all check boxes under it | boolean | `false` |
+| max | Limit the number of choices. It cannot be used with select all / cancel / invert selection. `0 'means there is no limit | number | `0` |
 
 ### Checkbox Events
 
-| Event  | Description                      | Arguments                                                                                           |
-| ------ | -------------------------------- | --------------------------------------------------------------------------------------------------- |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | change | Triggered when the value changes | (state, label),`state` represents the current state，`label` indicates the currently selected value |
 
 ### CheckboxGroup Events
 
-| Event  | Description                      | Arguments                                                                              |
-| ------ | -------------------------------- | -------------------------------------------------------------------------------------- |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | change | Triggered when the value changes | label,`label` returns an array representing the collection of currently selected items |
 
 ### CheckboxGroup Methods
 
-| methodName    | Description         | Arguments                                          |
-| ------------- | ------------------- | -------------------------------------------------- |
-| toggleAll     | Select all / cancel | `true`,to select all，`false`,cancel the selection |
-| toggleReverse | Reverse selection   | -                                                  |
+| methodName | Description | Arguments |
+| --- | --- | --- |
+| toggleAll | Select all / cancel | `true`,to select all，`false`,cancel the selection |
+| toggleReverse | Reverse selection | - |
 
 ## Theming
 
@@ -463,22 +367,22 @@ When the value changes, the `change` event will be triggered
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                      | Default Value              |
-| ----------------------------------------- | -------------------------- |
-| --nut-checkbox-label-color                | _#1d1e1e_                  |
-| --nut-checkbox-label-disable-color        | _#999_                     |
-| --nut-checkbox-icon-disable-color         | _#d6d6d6_                  |
-| --nut-checkbox-label-margin-left          | _15px_                     |
-| --nut-checkbox-label-font-size            | _14px_                     |
-| --nut-checkbox-icon-font-size             | _18px_                     |
-| --nut-checkbox-icon-disable-color2        | _var(--nut-help-color)_    |
-| --nut-checkbox-button-padding             | _5px 18px_                 |
-| --nut-checkbox-button-font-size           | _12px_                     |
-| --nut-checkbox-button-border-radius       | _15px_                     |
-| --nut-checkbox-button-border-color        | _#f6f7f9_                  |
-| --nut-checkbox-button-background          | _#f6f7f9_                  |
-| --nut-checkbox-button-font-color-active   | _var(--nut-primary-color)_ |
+| Name | Default Value |
+| --- | --- |
+| --nut-checkbox-label-color | _#1d1e1e_ |
+| --nut-checkbox-label-disable-color | _#999_ |
+| --nut-checkbox-icon-disable-color | _#d6d6d6_ |
+| --nut-checkbox-label-margin-left | _15px_ |
+| --nut-checkbox-label-font-size | _14px_ |
+| --nut-checkbox-icon-font-size | _18px_ |
+| --nut-checkbox-icon-disable-color2 | _var(--nut-help-color)_ |
+| --nut-checkbox-button-padding | _5px 18px_ |
+| --nut-checkbox-button-font-size | _12px_ |
+| --nut-checkbox-button-border-radius | _15px_ |
+| --nut-checkbox-button-border-color | _#f6f7f9_ |
+| --nut-checkbox-button-background | _#f6f7f9_ |
+| --nut-checkbox-button-font-color-active | _var(--nut-primary-color)_ |
 | --nut-checkbox-button-border-color-active | _var(--nut-primary-color)_ |
-| --nut-checkbox-button-background-active   | _var(--nut-primary-color)_ |
-| --nut-checkbox-display                    | _inline-flex_              |
-| --nut-checkbox-margin-right               | _20px_                     |
+| --nut-checkbox-button-background-active | _var(--nut-primary-color)_ |
+| --nut-checkbox-display | _inline-flex_ |
+| --nut-checkbox-margin-right | _20px_ |
diff --git a/src/packages/__VUE/checkbox/doc.md b/src/packages/__VUE/checkbox/doc.md
index a1937fbfaa..6a78832394 100644
--- a/src/packages/__VUE/checkbox/doc.md
+++ b/src/packages/__VUE/checkbox/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```ts
+```js
 import { createApp } from 'vue';
 import { Checkbox, CheckboxGroup } from '@nutui/nutui';
 
@@ -19,32 +19,24 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox1" label="复选框">复选框</nut-checkbox>
   <nut-checkbox v-model="checkbox2" text-position="left">复选框</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox1: false,
-        checkbox2: false
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox1 = ref(false);
+const checkbox2 = ref(false);
 </script>
 <style>
-  .nut-checkbox {
-    display: flex;
-    margin-right: 20px;
-  }
-  .nut-checkbox__label {
-    margin-left: 10px;
-  }
+.nut-checkbox {
+  display: flex;
+  margin-right: 20px;
+}
+.nut-checkbox__label {
+  margin-left: 10px;
+}
 </style>
 ```
 
@@ -54,23 +46,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
-    <nut-checkbox v-model="checkbox9" :indeterminate="true" label="复选框">复选框</nut-checkbox>
+    <nut-checkbox v-model="value" :indeterminate="true" label="复选框">复选框</nut-checkbox>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox9: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(false);
 </script>
 ```
 
@@ -80,23 +64,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>
   <nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox3: false,
-        checkbox4: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox3 = ref(false);
+const checkbox4 = ref(false);
 </script>
 ```
 
@@ -106,23 +82,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>
   <nut-checkbox v-model="checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox5: true,
-        checkbox6: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox5 = ref(false);
+const checkbox6 = ref(false);
 </script>
 ```
 
@@ -134,7 +102,7 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox7">
     自定义图标
@@ -142,18 +110,9 @@ app.use(CheckboxGroup);
     <template #checkedIcon> <Checklist color="red" /> </template>
   </nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  import { Checklist } from '@nutui/icons-vue';
-  export default {
-    components: { Checklist },
-    setup() {
-      const state = reactive({
-        checkbox7: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox7 = ref(false);
 </script>
 ```
 
@@ -165,26 +124,16 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-checkbox v-model="checkbox" @change="changeBox3">change复选框</nut-checkbox>
+  <nut-checkbox v-model="checkbox" @change="changeBox">change复选框</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox: false
-      });
-      const changeBox3 = (state: boolean, label: string) => {
-        showToast.text(`${state ? '选中' : '取消'} ${label}`);
-      };
-      return { ...toRefs(state), changeBox3 };
-    }
-  };
+<script setup>
+import { reactive, toRefs } from 'vue';
+const checkbox = ref(false);
+const changeBox = (state, label) => {
+  console.log(`${state ? '选中' : '取消'} ${label}`);
+};
 </script>
 ```
 
@@ -194,7 +143,7 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox-group v-model="checkboxgroup1">
     <nut-checkbox label="1">组合复选框</nut-checkbox>
@@ -207,18 +156,9 @@ app.use(CheckboxGroup);
     <div>{{ checkboxgroup1 }}</div>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup1: ['2', '3']
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkboxgroup1 = ref(['2', '3']);
 </script>
 ```
 
@@ -228,7 +168,7 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox-group v-model="checkboxgroup1" disabled>
     <nut-checkbox label="1">组合复选框</nut-checkbox>
@@ -241,18 +181,9 @@ app.use(CheckboxGroup);
     <div>{{ checkboxgroup1 }}</div>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup1: ['2', '3']
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkboxgroup1 = ref(['2', '3']);
 </script>
 ```
 
@@ -262,53 +193,46 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
-    <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{item.value}}</nut-checkbox>
+  <nut-checkbox-group v-model="state.checkboxgroup3" ref="group" @change="changeBox4">
+    <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">{{
+      item.value
+    }}</nut-checkbox>
   </nut-checkbox-group>
   <span class="btn">
     <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">全选</nut-button>
     <nut-button type="primary" @click="toggleAll(false)" style="margin: 0 20px 0 0">取消</nut-button>
-    <nut-button type="warning" @click="toggleReverse()">反选</nut-button>
+    <nut-button type="warning" @click="toggleReverse">反选</nut-button>
   </span>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup3: ['2'],
-        checkboxsource: [
-          { label: '1', value: '组合复选框' },
-          { label: '2', value: '组合复选框' },
-          { label: '3', value: '组合复选框' },
-          { label: '4', value: '组合复选框' },
-          { label: '5', value: '组合复选框' },
-          { label: '6', value: '组合复选框' }
-        ]
-      });
-
-      const group = ref(null);
-      const changeBox4 = (label: any[]) => {
-        showToast.text(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
-      };
-
-      const toggleAll = (f: boolean) => {
-        (group.value as any).toggleAll(f);
-      };
-
-      const toggleReverse = () => {
-        showToast.text(`反选`);
-        group.value.toggleReverse();
-      };
-
-      return { ...toRefs(state), group, changeBox4, toggleAll };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  checkboxgroup3: ['2'],
+  checkboxsource: [
+    { label: '1', value: '组合复选框' },
+    { label: '2', value: '组合复选框' },
+    { label: '3', value: '组合复选框' },
+    { label: '4', value: '组合复选框' },
+    { label: '5', value: '组合复选框' },
+    { label: '6', value: '组合复选框' }
+  ]
+});
+
+const group = ref(null);
+const changeBox4 = (label) => {
+  console.log(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
+};
+
+const toggleAll = (f) => {
+  group.value.toggleAll(f);
+};
+
+const toggleReverse = () => {
+  console.log(`反选`);
+  group.value.toggleReverse();
+};
 </script>
 ```
 
@@ -318,7 +242,7 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="checkboxGroup使用，限制最大可选数（2个）">
     <nut-cell>
@@ -335,18 +259,9 @@ app.use(CheckboxGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup4: ['2']
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkboxgroup1 = ref(['2']);
 </script>
 ```
 
@@ -356,13 +271,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="全选/半选/取消">
     <nut-cell>
-      <nut-checkbox :indeterminate="indeterminate" v-model="checkbox10" @change="changeBox5">全选</nut-checkbox>
+      <nut-checkbox :indeterminate="state.indeterminate" v-model="state.checkbox10" @change="changeBox5"
+        >全选</nut-checkbox
+      >
     </nut-cell>
-    <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+    <nut-checkbox-group v-model="state.checkboxgroup5" ref="group2" @change="changeBox6">
       <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="2">组合复选框</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="3">组合复选框</nut-checkbox></nut-cell>
@@ -370,39 +287,30 @@ app.use(CheckboxGroup);
     </nut-checkbox-group>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, ref, Ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const group2 = ref(null) as Ref;
-      const state = reactive({
-        indeterminate: false,
-        checkbox10: false,
-        checkboxgroup5: []
-      });
-
-      const changeBox5 = (value: boolean) => {
-        group2.value.toggleAll(value);
-      };
-
-      const changeBox6 = (label: string[]) => {
-        if (label.length === 4) {
-          state.indeterminate = false;
-          state.checkbox10 = true;
-        } else if (label.length && label.length < 4) {
-          state.indeterminate = true;
-        } else {
-          data.indeterminate = false;
-          state.checkbox10 = false;
-        }
-      };
-
-      return { ...toRefs(state), group2, changeBox5, changeBox6 };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const group2 = ref(null);
+const state = reactive({
+  indeterminate: false,
+  checkbox10: false,
+  checkboxgroup5: []
+});
+
+const changeBox5 = (value) => {
+  group2.value.toggleAll(value);
+};
+
+const changeBox6 = (label) => {
+  if (label.length === 4) {
+    state.indeterminate = false;
+    state.checkbox10 = true;
+  } else if (label.length && label.length < 4) {
+    state.indeterminate = true;
+  } else {
+    data.indeterminate = false;
+    state.checkbox10 = false;
+  }
+};
 </script>
 ```
 
@@ -412,50 +320,50 @@ app.use(CheckboxGroup);
 
 ### Checkbox Props
 
-| 参数          | 说明                                     | 类型             | 默认值  |
-| ------------- | ---------------------------------------- | ---------------- | ------- |
-| v-model       | 是否处于选中状态                         | boolean          | `false` |
-| disabled      | 是否禁用选择                             | boolean          | `false` |
-| text-position | 文本所在的位置，可选值：`left`,`right`   | string           | `right` |
-| icon-size     | [图标尺寸](#/zh-CN/component/icon)       | string \| number | `18`    |
-| label         | 复选框的文本内容                         | string           | -       |
-| indeterminate | 当前是否支持半选状态，一般用在全选操作中 | boolean          | `false` |
-| shape         | 形状，可选值：`button`、`round`          | String           | `round` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 是否处于选中状态 | boolean | `false` |
+| disabled | 是否禁用选择 | boolean | `false` |
+| text-position | 文本所在的位置，可选值：`left`,`right` | string | `right` |
+| icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18` |
+| label | 复选框的文本内容 | string | - |
+| indeterminate | 当前是否支持半选状态，一般用在全选操作中 | boolean | `false` |
+| shape | 形状，可选值：`button`、`round` | String | `round` |
 
 ### Checkbox Slots
 
-| 名称          | 说明           |
-| ------------- | -------------- |
-| icon          | 未选中时的图标 |
-| checkedIcon   | 选中时的图标   |
-| indeterminate | 半选时的图标   |
+| 名称 | 说明 |
+| --- | --- |
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
+| indeterminate | 半选时的图标 |
 
 ### CheckboxGroup Props
 
-| 参数     | 说明                                                            | 类型    | 默认值  |
-| -------- | --------------------------------------------------------------- | ------- | ------- |
-| v-model  | 当前选中项的标识符，和 `label` 相对应                           | Array   | -       |
-| disabled | 是否禁用选择,将用于其下的全部复选框                             | boolean | `false` |
-| max      | 限制选择的数量，不能和`全选/取消/反选`一起使用, `0`表示没有限制 | number  | `0`     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前选中项的标识符，和 `label` 相对应 | Array | - |
+| disabled | 是否禁用选择,将用于其下的全部复选框 | boolean | `false` |
+| max | 限制选择的数量，不能和`全选/取消/反选`一起使用, `0`表示没有限制 | number | `0` |
 
 ### Checkbox Events
 
-| 事件名 | 说明         | 回调参数                                                       |
-| ------ | ------------ | -------------------------------------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 值变化时触发 | (state, label), `state` 代表当前状态，`label` 表示当前选中的值 |
 
 ### CheckboxGroup Events
 
-| 事件名 | 说明         | 回调参数                                           |
-| ------ | ------------ | -------------------------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 值变化时触发 | `label`,`label` 返回一个数组，表示当前选中项的集合 |
 
 ### CheckboxGroup Methods
 
-| 方法名        | 说明      | 参数                                        |
-| ------------- | --------- | ------------------------------------------- |
-| toggleAll     | 全选/取消 | 传 `true`,表示全选，传 `false`,表示取消全选 |
-| toggleReverse | 反选      | -                                           |
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| toggleAll | 全选/取消 | 传 `true`,表示全选，传 `false`,表示取消全选 |
+| toggleReverse | 反选 | - |
 
 ## 主题定制
 
@@ -463,22 +371,22 @@ app.use(CheckboxGroup);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                      | 默认值                     |
-| ----------------------------------------- | -------------------------- |
-| --nut-checkbox-label-color                | _#1d1e1e_                  |
-| --nut-checkbox-label-disable-color        | _#999_                     |
-| --nut-checkbox-icon-disable-color         | _#d6d6d6_                  |
-| --nut-checkbox-label-margin-left          | _15px_                     |
-| --nut-checkbox-label-font-size            | _14px_                     |
-| --nut-checkbox-icon-font-size             | _18px_                     |
-| --nut-checkbox-icon-disable-color2        | _var(--nut-help-color)_    |
-| --nut-checkbox-button-padding             | _5px 18px_                 |
-| --nut-checkbox-button-font-size           | _12px_                     |
-| --nut-checkbox-button-border-radius       | _15px_                     |
-| --nut-checkbox-button-border-color        | _#f6f7f9_                  |
-| --nut-checkbox-button-background          | _#f6f7f9_                  |
-| --nut-checkbox-button-font-color-active   | _var(--nut-primary-color)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-checkbox-label-color | _#1d1e1e_ |
+| --nut-checkbox-label-disable-color | _#999_ |
+| --nut-checkbox-icon-disable-color | _#d6d6d6_ |
+| --nut-checkbox-label-margin-left | _15px_ |
+| --nut-checkbox-label-font-size | _14px_ |
+| --nut-checkbox-icon-font-size | _18px_ |
+| --nut-checkbox-icon-disable-color2 | _var(--nut-help-color)_ |
+| --nut-checkbox-button-padding | _5px 18px_ |
+| --nut-checkbox-button-font-size | _12px_ |
+| --nut-checkbox-button-border-radius | _15px_ |
+| --nut-checkbox-button-border-color | _#f6f7f9_ |
+| --nut-checkbox-button-background | _#f6f7f9_ |
+| --nut-checkbox-button-font-color-active | _var(--nut-primary-color)_ |
 | --nut-checkbox-button-border-color-active | _var(--nut-primary-color)_ |
-| --nut-checkbox-button-background-active   | _var(--nut-primary-color)_ |
-| --nut-checkbox-display                    | _inline-flex_              |
-| --nut-checkbox-margin-right               | _20px_                     |
+| --nut-checkbox-button-background-active | _var(--nut-primary-color)_ |
+| --nut-checkbox-display | _inline-flex_ |
+| --nut-checkbox-margin-right | _20px_ |
diff --git a/src/packages/__VUE/checkbox/doc.taro.md b/src/packages/__VUE/checkbox/doc.taro.md
index 54612fe3d8..9be9b92b04 100644
--- a/src/packages/__VUE/checkbox/doc.taro.md
+++ b/src/packages/__VUE/checkbox/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```ts
+```js
 import { createApp } from 'vue';
 import { Checkbox, CheckboxGroup } from '@nutui/nutui-taro';
 
@@ -19,32 +19,24 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox1" label="复选框">复选框</nut-checkbox>
   <nut-checkbox v-model="checkbox2" text-position="left">复选框</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox1: false,
-        checkbox2: false
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox1 = ref(false);
+const checkbox2 = ref(false);
 </script>
 <style>
-  .nut-checkbox {
-    display: flex;
-    margin-right: 20px;
-  }
-  .nut-checkbox__label {
-    margin-left: 10px;
-  }
+.nut-checkbox {
+  display: flex;
+  margin-right: 20px;
+}
+.nut-checkbox__label {
+  margin-left: 10px;
+}
 </style>
 ```
 
@@ -54,23 +46,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
-    <nut-checkbox v-model="checkbox9" :indeterminate="true" label="复选框">复选框</nut-checkbox>
+    <nut-checkbox v-model="value" :indeterminate="true" label="复选框">复选框</nut-checkbox>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox9: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(false);
 </script>
 ```
 
@@ -80,23 +64,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>
   <nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox3: false,
-        checkbox4: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox3 = ref(false);
+const checkbox4 = ref(false);
 </script>
 ```
 
@@ -106,23 +82,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>
   <nut-checkbox v-model="checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox5: true,
-        checkbox6: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox5 = ref(false);
+const checkbox6 = ref(false);
 </script>
 ```
 
@@ -134,7 +102,7 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox v-model="checkbox7">
     自定义图标
@@ -142,18 +110,9 @@ app.use(CheckboxGroup);
     <template #checkedIcon> <Checklist color="red" /> </template>
   </nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  import { Checklist } from '@nutui/icons-vue-taro';
-  export default {
-    components: { Checklist },
-    setup() {
-      const state = reactive({
-        checkbox7: true
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkbox7 = ref(false);
 </script>
 ```
 
@@ -165,24 +124,16 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-checkbox v-model="checkbox" @change="changeBox3">change复选框</nut-checkbox>
+  <nut-checkbox v-model="checkbox" @change="changeBox">change复选框</nut-checkbox>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkbox: false
-      });
-      const changeBox3 = (checked: boolean, label: string) => {
-        console.log('change事件触发' + checked, label);
-      };
-      return { ...toRefs(state), changeBox3 };
-    }
-  };
+<script setup>
+import { reactive, toRefs } from 'vue';
+const checkbox = ref(false);
+const changeBox = (state, label) => {
+  console.log(`${state ? '选中' : '取消'} ${label}`);
+};
 </script>
 ```
 
@@ -192,7 +143,7 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-checkbox-group v-model="checkboxgroup1">
     <nut-checkbox label="1">组合复选框</nut-checkbox>
@@ -205,18 +156,34 @@ app.use(CheckboxGroup);
     <div>{{ checkboxgroup1 }}</div>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup1: ['2', '3']
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkboxgroup1 = ref(['2', '3']);
+</script>
+```
+
+:::
+
+### checkboxGroup 禁用
+
+:::demo
+
+```vue
+<template>
+  <nut-checkbox-group v-model="checkboxgroup1" disabled>
+    <nut-checkbox label="1">组合复选框</nut-checkbox>
+    <nut-checkbox label="2">组合复选框</nut-checkbox>
+    <nut-checkbox label="3">组合复选框</nut-checkbox>
+    <nut-checkbox label="4">组合复选框</nut-checkbox>
+  </nut-checkbox-group>
+  <nut-cell>
+    <div class="demo-check">当前选中值</div>
+    <div>{{ checkboxgroup1 }}</div>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const checkboxgroup1 = ref(['2', '3']);
 </script>
 ```
 
@@ -226,51 +193,46 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
-    <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{item.value}}</nut-checkbox>
+  <nut-checkbox-group v-model="state.checkboxgroup3" ref="group" @change="changeBox4">
+    <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">{{
+      item.value
+    }}</nut-checkbox>
   </nut-checkbox-group>
   <span class="btn">
     <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">全选</nut-button>
     <nut-button type="primary" @click="toggleAll(false)" style="margin: 0 20px 0 0">取消</nut-button>
-    <nut-button type="warning" @click="toggleReverse()">反选</nut-button>
+    <nut-button type="warning" @click="toggleReverse">反选</nut-button>
   </span>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup3: ['2'],
-        checkboxsource: [
-          { label: '1', value: '组合复选框' },
-          { label: '2', value: '组合复选框' },
-          { label: '3', value: '组合复选框' },
-          { label: '4', value: '组合复选框' },
-          { label: '5', value: '组合复选框' },
-          { label: '6', value: '组合复选框' }
-        ]
-      });
-
-      const group = ref(null);
-      const changeBox4 = (label: any[]) => {
-        console.log(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
-      };
-
-      const toggleAll = (f: boolean) => {
-        (group.value as any).toggleAll(f);
-      };
-
-      const toggleReverse = () => {
-        console.log(`反选`);
-        group.value.toggleReverse();
-      };
-
-      return { ...toRefs(state), group, changeBox4, toggleAll };
-    }
-  };
+<script setup>
+import { reactive, toRefs, ref } from 'vue';
+const state = reactive({
+  checkboxgroup3: ['2'],
+  checkboxsource: [
+    { label: '1', value: '组合复选框' },
+    { label: '2', value: '组合复选框' },
+    { label: '3', value: '组合复选框' },
+    { label: '4', value: '组合复选框' },
+    { label: '5', value: '组合复选框' },
+    { label: '6', value: '组合复选框' }
+  ]
+});
+
+const group = ref(null);
+const changeBox4 = (label) => {
+  console.log(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
+};
+
+const toggleAll = (f) => {
+  group.value.toggleAll(f);
+};
+
+const toggleReverse = () => {
+  console.log(`反选`);
+  group.value.toggleReverse();
+};
 </script>
 ```
 
@@ -280,7 +242,7 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="checkboxGroup使用，限制最大可选数（2个）">
     <nut-cell>
@@ -297,18 +259,9 @@ app.use(CheckboxGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        checkboxgroup4: ['2']
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkboxgroup1 = ref(['2']);
 </script>
 ```
 
@@ -318,13 +271,15 @@ app.use(CheckboxGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="全选/半选/取消">
     <nut-cell>
-      <nut-checkbox :indeterminate="indeterminate" v-model="checkbox10" @change="changeBox5">全选</nut-checkbox>
+      <nut-checkbox :indeterminate="state.indeterminate" v-model="state.checkbox10" @change="changeBox5"
+        >全选</nut-checkbox
+      >
     </nut-cell>
-    <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+    <nut-checkbox-group v-model="state.checkboxgroup5" ref="group2" @change="changeBox6">
       <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="2">组合复选框</nut-checkbox></nut-cell>
       <nut-cell><nut-checkbox label="3">组合复选框</nut-checkbox></nut-cell>
@@ -332,37 +287,30 @@ app.use(CheckboxGroup);
     </nut-checkbox-group>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, ref, Ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const group2 = ref(null) as Ref;
-      const state = reactive({
-        indeterminate: false,
-        checkbox10: false,
-        checkboxgroup5: []
-      });
-
-      const changeBox5 = (value: boolean) => {
-        group2.value.toggleAll(value);
-      };
-
-      const changeBox6 = (label: string[]) => {
-        if (label.length === 4) {
-          state.indeterminate = false;
-          state.checkbox10 = true;
-        } else if (label.length && label.length < 4) {
-          state.indeterminate = true;
-        } else {
-          data.indeterminate = false;
-          state.checkbox10 = false;
-        }
-      };
-
-      return { ...toRefs(state), group2, changeBox5, changeBox6 };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const group2 = ref(null);
+const state = reactive({
+  indeterminate: false,
+  checkbox10: false,
+  checkboxgroup5: []
+});
+
+const changeBox5 = (value) => {
+  group2.value.toggleAll(value);
+};
+
+const changeBox6 = (label) => {
+  if (label.length === 4) {
+    state.indeterminate = false;
+    state.checkbox10 = true;
+  } else if (label.length && label.length < 4) {
+    state.indeterminate = true;
+  } else {
+    data.indeterminate = false;
+    state.checkbox10 = false;
+  }
+};
 </script>
 ```
 
@@ -372,50 +320,50 @@ app.use(CheckboxGroup);
 
 ### Checkbox Props
 
-| 参数          | 说明                                     | 类型             | 默认值  |
-| ------------- | ---------------------------------------- | ---------------- | ------- |
-| v-model       | 是否处于选中状态                         | boolean          | `false` |
-| disabled      | 是否禁用选择                             | boolean          | `false` |
-| text-position | 文本所在的位置，可选值：`left`,`right`   | string           | `right` |
-| icon-size     | [图标尺寸](#/zh-CN/component/icon)       | string \| number | `18`    |
-| label         | 复选框的文本内容                         | string           | -       |
-| indeterminate | 当前是否支持半选状态，一般用在全选操作中 | boolean          | `false` |
-| shape         | 形状，可选值：`button`、`round`          | String           | `round` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 是否处于选中状态 | boolean | `false` |
+| disabled | 是否禁用选择 | boolean | `false` |
+| text-position | 文本所在的位置，可选值：`left`,`right` | string | `right` |
+| icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18` |
+| label | 复选框的文本内容 | string | - |
+| indeterminate | 当前是否支持半选状态，一般用在全选操作中 | boolean | `false` |
+| shape | 形状，可选值：`button`、`round` | String | `round` |
 
 ### Checkbox Slots
 
-| 名称          | 说明           |
-| ------------- | -------------- |
-| icon          | 未选中时的图标 |
-| checkedIcon   | 选中时的图标   |
-| indeterminate | 半选时的图标   |
+| 名称 | 说明 |
+| --- | --- |
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
+| indeterminate | 半选时的图标 |
 
 ### CheckboxGroup Props
 
-| 参数     | 说明                                                            | 类型    | 默认值  |
-| -------- | --------------------------------------------------------------- | ------- | ------- |
-| v-model  | 当前选中项的标识符，和 `label` 相对应                           | Array   | -       |
-| disabled | 是否禁用选择,将用于其下的全部复选框                             | boolean | `false` |
-| max      | 限制选择的数量，不能和`全选/取消/反选`一起使用, `0`表示没有限制 | number  | `0`     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前选中项的标识符，和 `label` 相对应 | Array | - |
+| disabled | 是否禁用选择,将用于其下的全部复选框 | boolean | `false` |
+| max | 限制选择的数量，不能和`全选/取消/反选`一起使用, `0`表示没有限制 | number | `0` |
 
 ### Checkbox Events
 
-| 事件名 | 说明         | 回调参数                                                       |
-| ------ | ------------ | -------------------------------------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 值变化时触发 | (state, label), `state` 代表当前状态，`label` 表示当前选中的值 |
 
 ### CheckboxGroup Events
 
-| 事件名 | 说明         | 回调参数                                           |
-| ------ | ------------ | -------------------------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 值变化时触发 | `label`,`label` 返回一个数组，表示当前选中项的集合 |
 
 ### CheckboxGroup Methods
 
-| 方法名        | 说明      | 参数                                        |
-| ------------- | --------- | ------------------------------------------- |
-| toggleAll     | 全选/取消 | 传 `true`,表示全选，传 `false`,表示取消全选 |
-| toggleReverse | 反选      | -                                           |
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| toggleAll | 全选/取消 | 传 `true`,表示全选，传 `false`,表示取消全选 |
+| toggleReverse | 反选 | - |
 
 ## 主题定制
 
@@ -423,22 +371,22 @@ app.use(CheckboxGroup);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                      | 默认值                     | 描述 |
-| ----------------------------------------- | -------------------------- | ---- |
-| --nut-checkbox-label-color                | _#1d1e1e_                  | -    |
-| --nut-checkbox-label-disable-color        | _#999_                     | -    |
-| --nut-checkbox-icon-disable-color         | _#d6d6d6_                  | -    |
-| --nut-checkbox-label-margin-left          | _15px_                     | -    |
-| --nut-checkbox-label-font-size            | _14px_                     | -    |
-| --nut-checkbox-icon-font-size             | _18px_                     | -    |
-| --nut-checkbox-icon-disable-color2        | _var(--nut-help-color)_    | -    |
-| --nut-checkbox-button-padding             | _5px 18px_                 |
-| --nut-checkbox-button-font-size           | _12px_                     |
-| --nut-checkbox-button-border-radius       | _15px_                     |
-| --nut-checkbox-button-border-color        | _#f6f7f9_                  |
-| --nut-checkbox-button-background          | _#f6f7f9_                  |
-| --nut-checkbox-button-font-color-active   | _var(--nut-primary-color)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-checkbox-label-color | _#1d1e1e_ |
+| --nut-checkbox-label-disable-color | _#999_ |
+| --nut-checkbox-icon-disable-color | _#d6d6d6_ |
+| --nut-checkbox-label-margin-left | _15px_ |
+| --nut-checkbox-label-font-size | _14px_ |
+| --nut-checkbox-icon-font-size | _18px_ |
+| --nut-checkbox-icon-disable-color2 | _var(--nut-help-color)_ |
+| --nut-checkbox-button-padding | _5px 18px_ |
+| --nut-checkbox-button-font-size | _12px_ |
+| --nut-checkbox-button-border-radius | _15px_ |
+| --nut-checkbox-button-border-color | _#f6f7f9_ |
+| --nut-checkbox-button-background | _#f6f7f9_ |
+| --nut-checkbox-button-font-color-active | _var(--nut-primary-color)_ |
 | --nut-checkbox-button-border-color-active | _var(--nut-primary-color)_ |
-| --nut-checkbox-button-background-active   | _var(--nut-primary-color)_ |
-| --nut-checkbox-display                    | _inline-flex_              |
-| --nut-checkbox-margin-right               | _20px_                     |
+| --nut-checkbox-button-background-active | _var(--nut-primary-color)_ |
+| --nut-checkbox-display | _inline-flex_ |
+| --nut-checkbox-margin-right | _20px_ |
diff --git a/src/packages/__VUE/datepicker/demo.vue b/src/packages/__VUE/datepicker/demo.vue
index a2ef8ef3b6..38610e5676 100644
--- a/src/packages/__VUE/datepicker/demo.vue
+++ b/src/packages/__VUE/datepicker/demo.vue
@@ -3,7 +3,7 @@
     <h2>{{ translate('basic') }}</h2>
     <!-- 选择年月日 -->
     <nut-date-picker
-      v-model="currentDate"
+      v-model="state.currentDate"
       :min-date="minDate"
       :max-date="maxDate"
       :is-show-chinese="true"
@@ -15,7 +15,7 @@
     <nut-cell :title="translate('basic')" :desc="popupDesc" @click="show = true"></nut-cell>
     <nut-popup v-model:visible="show" position="bottom">
       <nut-date-picker
-        v-model="currentDate"
+        v-model="state.currentDate"
         :min-date="minDate"
         :max-date="maxDate"
         :is-show-chinese="true"
@@ -28,7 +28,7 @@
     <h2>{{ translate('mmdd') }}</h2>
     <!-- 选择月日 -->
     <nut-date-picker
-      v-model="currentDate2"
+      v-model="state.currentDate2"
       type="month-day"
       :title="translate('basic')"
       :min-date="new Date(2022, 0, 1)"
@@ -39,7 +39,7 @@
 
     <!-- 选择年月日时分 -->
     <nut-date-picker
-      v-model="currentDate3"
+      v-model="state.currentDate3"
       :title="translate('chooseDate')"
       type="datetime"
       :min-date="minDate"
@@ -50,7 +50,7 @@
 
     <!-- 选择时分秒 -->
     <nut-date-picker
-      v-model="currentDate4"
+      v-model="state.currentDate4"
       :title="translate('chooseTime')"
       type="time"
       :min-date="minDate"
@@ -61,7 +61,7 @@
 
     <!-- 选择时分 -->
     <nut-date-picker
-      v-model="currentDate4"
+      v-model="state.currentDate4"
       :title="translate('chooseTime')"
       type="hour-minute"
       :min-date="minDate"
@@ -72,7 +72,7 @@
 
     <!-- 格式化选项 -->
     <nut-date-picker
-      v-model="currentDate5"
+      v-model="state.currentDate5"
       :title="translate('chooseTime')"
       type="datetime"
       :min-date="new Date(2022, 0, 1)"
@@ -84,7 +84,7 @@
 
     <!-- 分钟数递增步长设置 -->
     <nut-date-picker
-      v-model="currentDate6"
+      v-model="state.currentDate6"
       :title="translate('chooseTime')"
       type="time"
       :min-date="minDate"
@@ -95,7 +95,7 @@
     <h2>{{ translate('filter') }}</h2>
     <!-- 过滤选项 -->
     <nut-date-picker
-      v-model="currentDate7"
+      v-model="state.currentDate7"
       :title="translate('chooseTime')"
       type="datehour"
       :min-date="minDate"
@@ -107,8 +107,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { toRefs, ref, reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('date-picker');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -160,131 +160,109 @@ const initTranslate = () =>
       popupDesc: 'With Popup'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const show = ref(false);
-    const popupDesc = ref();
+initTranslate();
+const show = ref(false);
+const popupDesc = ref();
 
-    const CurrentDate = reactive({
-      currentDate: new Date(2022, 4, 10, 10, 10),
-      currentDate2: new Date(2022, 4, 10, 10, 10),
-      currentDate3: new Date(2022, 4, 10, 10, 10),
-      currentDate4: new Date(2022, 4, 10, 10, 10),
-      currentDate5: new Date(2022, 4, 10, 10, 10),
-      currentDate6: new Date(2022, 4, 10, 10, 10),
-      currentDate7: new Date(2022, 4, 10, 0, 0)
-    });
+const state = reactive({
+  currentDate: new Date(2022, 4, 10, 10, 10),
+  currentDate2: new Date(2022, 4, 10, 10, 10),
+  currentDate3: new Date(2022, 4, 10, 10, 10),
+  currentDate4: new Date(2022, 4, 10, 10, 10),
+  currentDate5: new Date(2022, 4, 10, 10, 10),
+  currentDate6: new Date(2022, 4, 10, 10, 10),
+  currentDate7: new Date(2022, 4, 10, 0, 0)
+});
 
-    const formatter = (type: string, option: any) => {
-      switch (type) {
-        case 'year':
-          option.text += '';
-          break;
-        case 'month':
-          option.text += `${translate('month')}`;
-          break;
-        case 'day':
-          option.text += `${translate('day')}`;
-          break;
-        case 'hour':
-          option.text += `${translate('hour')}`;
-          break;
-        case 'minute':
-          option.text += `${translate('min')}`;
-          break;
-        default:
-          option.text += '';
-      }
-      return option;
-    };
+const formatter = (type: string, option: any) => {
+  switch (type) {
+    case 'year':
+      option.text += '';
+      break;
+    case 'month':
+      option.text += `${translate('month')}`;
+      break;
+    case 'day':
+      option.text += `${translate('day')}`;
+      break;
+    case 'hour':
+      option.text += `${translate('hour')}`;
+      break;
+    case 'minute':
+      option.text += `${translate('min')}`;
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
 
-    const formatter1 = (type: string, option: any) => {
-      switch (type) {
-        case 'year':
-          option.text += `${translate('year')}`;
-          break;
-        case 'month':
-          option.text += `${translate('month')}`;
-          break;
-        case 'day':
-          option.text += `${translate('day')}`;
-          break;
-        case 'hour':
-          option.text += `${translate('hour')}`;
-          break;
-        default:
-          option.text += '';
-      }
-      return option;
-    };
+const formatter1 = (type: string, option: any) => {
+  switch (type) {
+    case 'year':
+      option.text += `${translate('year')}`;
+      break;
+    case 'month':
+      option.text += `${translate('month')}`;
+      break;
+    case 'day':
+      option.text += `${translate('day')}`;
+      break;
+    case 'hour':
+      option.text += `${translate('hour')}`;
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
 
-    const filter = (type: string, options: any) => {
-      if (type == 'hour') {
-        return options.filter((option: any) => Number(option.value) % 6 === 0);
-      }
-      return options;
-    };
+const filter = (type: string, options: any) => {
+  if (type == 'hour') {
+    return options.filter((option: any) => Number(option.value) % 6 === 0);
+  }
+  return options;
+};
 
-    const confirm = ({ selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-      showToast.text(selectedOptions.map((val: any) => val.text).join(''));
-    };
+const confirm = ({ selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
+  showToast.text(selectedOptions.map((val: any) => val.text).join(''));
+};
 
-    const confirm2 = ({ selectedValue }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-      const date = selectedValue.slice(0, 3).join('-');
-      const time = selectedValue.slice(3).join(':');
-      showToast.text(date + ' ' + time);
-    };
+const confirm2 = ({ selectedValue }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
+  const date = selectedValue.slice(0, 3).join('-');
+  const time = selectedValue.slice(3).join(':');
+  showToast.text(date + ' ' + time);
+};
 
-    const confirm3 = ({ selectedValue }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-      showToast.text(selectedValue.join(':'));
-    };
+const confirm3 = ({ selectedValue }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
+  showToast.text(selectedValue.join(':'));
+};
 
-    const confirm4 = ({ selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-      const date = selectedOptions
-        .slice(1, 3)
-        .map((op: any) => op.text)
-        .join('');
-      const time = selectedOptions
-        .slice(3)
-        .map((op: any) => op.value)
-        .join(':');
-      showToast.text(selectedOptions[0].text + translate('year') + date + ' ' + time);
-    };
+const confirm4 = ({ selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
+  const date = selectedOptions
+    .slice(1, 3)
+    .map((op: any) => op.text)
+    .join('');
+  const time = selectedOptions
+    .slice(3)
+    .map((op: any) => op.value)
+    .join(':');
+  showToast.text(selectedOptions[0].text + translate('year') + date + ' ' + time);
+};
 
-    const confirm5 = ({ selectedValue }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
-      showToast.text(selectedValue.join('-'));
-    };
+const confirm5 = ({ selectedValue }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
+  showToast.text(selectedValue.join('-'));
+};
 
-    const popupConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
-      popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
-      show.value = false;
-    };
+const popupConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
+  popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
+  show.value = false;
+};
 
-    const alwaysFun = () => {
-      popupDesc.value = '永远有效';
-      show.value = false;
-    };
-    return {
-      show,
-      popupDesc,
-      ...toRefs(CurrentDate),
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      confirm,
-      formatter,
-      formatter1,
-      filter,
-      alwaysFun,
-      translate,
-      popupConfirm,
-      confirm2,
-      confirm3,
-      confirm4,
-      confirm5
-    };
-  }
-});
+const alwaysFun = () => {
+  popupDesc.value = '永远有效';
+  show.value = false;
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
-<style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/datepicker/doc.en-US.md b/src/packages/__VUE/datepicker/doc.en-US.md
index fa0fc9e232..fe55e758b0 100644
--- a/src/packages/__VUE/datepicker/doc.en-US.md
+++ b/src/packages/__VUE/datepicker/doc.en-US.md
@@ -6,7 +6,7 @@ Used to select time, support date and time dimensions, usually used with the Pop
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { DatePicker } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -30,26 +30,15 @@ app.use(DatePicker);
   ></nut-date-picker>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const minDate = new Date(2020, 0, 1);
-      const maxDate = new Date(2025, 10, 1);
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedOptions.map((val: any) => val.text).join(''));
-      };
-      return {
-        currentDate,
-        minDate,
-        maxDate,
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const minDate = new Date(2020, 0, 1);
+const maxDate = new Date(2025, 10, 1);
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedOptions.map((val) => val.text).join(''));
+};
 </script>
 ```
 
@@ -59,7 +48,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
   <nut-popup position="bottom" v-model:visible="show">
@@ -76,34 +65,21 @@ app.use(DatePicker);
   </nut-popup>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const show = ref(false);
-      const popupDesc = ref();
-      const minDate = new Date(2020, 0, 1);
-      const maxDate = new Date(2025, 10, 1);
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const popupConfirm = ({ selectedValue, selectedOptions }) => {
-        popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
-        show.value = false;
-      };
-      const alwaysFun = () => {
-        popupDesc.value = 'Always';
-        show.value = false;
-      };
-      return {
-        show,
-        popupDesc,
-        currentDate,
-        minDate,
-        maxDate,
-        alwaysFun,
-        popupConfirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const popupDesc = ref();
+const minDate = new Date(2020, 0, 1);
+const maxDate = new Date(2025, 10, 1);
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const popupConfirm = ({ selectedValue, selectedOptions }) => {
+  popupDesc.value = selectedOptions.map((val) => val.text).join('');
+  show.value = false;
+};
+const alwaysFun = () => {
+  popupDesc.value = 'Always';
+  show.value = false;
+};
 </script>
 ```
 
@@ -113,7 +89,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -125,22 +101,13 @@ app.use(DatePicker);
   ></nut-date-picker>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedOptions.map((val: any) => val.text).join('-'));
-      };
-      return {
-        currentDate,
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedOptions.map((val) => val.text).join('-'));
+};
 </script>
 ```
 
@@ -150,7 +117,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -161,26 +128,16 @@ app.use(DatePicker);
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        date = selectedValue.slice(0, 3).join('-');
-        time = selectedValue.slice(3).join(':');
-        showToast.text(date + ' ' + time);
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  date = selectedValue.slice(0, 3).join('-');
+  time = selectedValue.slice(3).join(':');
+  showToast.text(date + ' ' + time);
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -190,7 +147,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -201,24 +158,13 @@ app.use(DatePicker);
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedValue.join(':'));
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedValue.join(':'));
+};
 </script>
 ```
 
@@ -228,7 +174,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -239,24 +185,15 @@ app.use(DatePicker);
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedValue.join(':'));
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedValue.join(':'));
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -266,7 +203,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -278,54 +215,43 @@ app.use(DatePicker);
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        const date = selectedOptions
-          .slice(1, 3)
-          .map((op) => op.text)
-          .join('');
-        const time = selectedOptions
-          .slice(3)
-          .map((op) => op.value)
-          .join(':');
-        showToast.text(selectedOptions[0].text + 'Year' + date + ' ' + time);
-      };
-      const formatter = (type: string, option) => {
-        switch (type) {
-          case 'year':
-            option.text += '';
-            break;
-          case 'month':
-            option.text += 'Month';
-            break;
-          case 'day':
-            option.text += 'Day';
-            break;
-          case 'hour':
-            option.text += 'Hour';
-            break;
-          case 'minute':
-            option.text += 'Minute';
-            break;
-          default:
-            option.text += '';
-        }
-        return option;
-      };
-
-      return {
-        currentDate,
-        confirm,
-        formatter
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  const date = selectedOptions
+    .slice(1, 3)
+    .map((op) => op.text)
+    .join('');
+  const time = selectedOptions
+    .slice(3)
+    .map((op) => op.value)
+    .join(':');
+  showToast.text(selectedOptions[0].text + 'Year' + date + ' ' + time);
+};
+const formatter = (type, option) => {
+  switch (type) {
+    case 'year':
+      option.text += '';
+      break;
+    case 'month':
+      option.text += 'Month';
+      break;
+    case 'day':
+      option.text += 'Day';
+      break;
+    case 'hour':
+      option.text += 'Hour';
+      break;
+    case 'minute':
+      option.text += 'Minute';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
 </script>
 ```
 
@@ -335,7 +261,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -346,24 +272,15 @@ app.use(DatePicker);
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedValue.join(':'));
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedValue.join(':'));
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -373,7 +290,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -386,52 +303,41 @@ app.use(DatePicker);
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 0, 0);
-      const formatter = (type: string, option) => {
-        switch (type) {
-          case 'year':
-            option.text += 'Year';
-            break;
-          case 'month':
-            option.text += 'Month';
-            break;
-          case 'day':
-            option.text += 'Day';
-            break;
-          case 'hour':
-            option.text += 'Hour';
-            break;
-          default:
-            option.text += '';
-        }
-        return option;
-      };
-
-      const filter = (type: string, options) => {
-        if (type == 'hour') {
-          return options.filter((option) => Number(option.value) % 6 === 0);
-        }
-        return options;
-      };
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedOptions.map((option) => option.text).join(''));
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm,
-        formatter,
-        filter
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 0, 0);
+const formatter = (type, option) => {
+  switch (type) {
+    case 'year':
+      option.text += 'Year';
+      break;
+    case 'month':
+      option.text += 'Month';
+      break;
+    case 'day':
+      option.text += 'Day';
+      break;
+    case 'hour':
+      option.text += 'Hour';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
+
+const filter = (type, options) => {
+  if (type == 'hour') {
+    return options.filter((option) => Number(option.value) % 6 === 0);
+  }
+  return options;
+};
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedOptions.map((option) => option.text).join(''));
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -441,48 +347,48 @@ app.use(DatePicker);
 
 ### Props
 
-| Attribute          | Description                                                                             | Type                                                   | Default                          |
-| ------------------ | --------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------------------------------- |
-| v-model            | Default Date                                                                            | date                                                   | `null`                           |
-| type               | Can be set to `date` `time` `year-month` `month-day` `datehour` `hour-minute`(`v4.0.5`) | string                                                 | `date`                           |
-| minute-step        | Option minute step                                                                      | number                                                 | `1`                              |
-| is-show-chinese    | Show Chinese                                                                            | boolean                                                | `false`                          |
-| min-date           | Start date                                                                              | date                                                   | `Ten years ago on January 1`     |
-| max-date           | End date                                                                                | date                                                   | `Ten years later on December 31` |
-| formatter          | Option text formatter                                                                   | (type: string, option: PickerOption) => PickerOption   |                                  |
-| filter             | Option filter                                                                           | (type: string, option: PickerOption) => PickerOption[] |                                  |
-| title              | Title                                                                                   | string                                                 | `null`                           |
-| ok-text            | Text of confirm button                                                                  | string                                                 | `confirm`                        |
-| cancel-text        | Text of cancel button                                                                   | string                                                 | `cancel`                         |
-| three-dimensional  | Turn on 3D effects                                                                      | boolean                                                | `true`                           |
-| swipe-duration     | Duration of the momentum animation                                                      | number \| string                                       | `1000`                           |
-| visible-option-num | Count of visible columns                                                                | number \| string                                       | `7`                              |
-| option-height      | Option height                                                                           | number \| string                                       | `36`                             |
-| show-toolbar       | Whether to show toolbar                                                                 | boolean                                                | `true`                           |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Default Date | date | `null` |
+| type | Can be set to `date` `time` `year-month` `month-day` `datehour` `hour-minute`(`v4.0.5`) | string | `date` |
+| minute-step | Option minute step | number | `1` |
+| is-show-chinese | Show Chinese | boolean | `false` |
+| min-date | Start date | date | `Ten years ago on January 1` |
+| max-date | End date | date | `Ten years later on December 31` |
+| formatter | Option text formatter | (type: string, option: PickerOption) => PickerOption |  |
+| filter | Option filter | (type: string, option: PickerOption) => PickerOption[] |  |
+| title | Title | string | `null` |
+| ok-text | Text of confirm button | string | `confirm` |
+| cancel-text | Text of cancel button | string | `cancel` |
+| three-dimensional | Turn on 3D effects | boolean | `true` |
+| swipe-duration | Duration of the momentum animation | number \| string | `1000` |
+| visible-option-num | Count of visible columns | number \| string | `7` |
+| option-height | Option height | number \| string | `36` |
+| show-toolbar | Whether to show toolbar | boolean | `true` |
 
 ### Events
 
-| Event   | Description                          | Arguments                                         |
-| ------- | ------------------------------------ | ------------------------------------------------- |
-| confirm | Emitted when click confirm button.   | `{ selectedValue, selectedOptions }`              |
-| cancel  | Emitted when click cancel button.    | `{ selectedValue, selectedOptions }`              |
-| change  | Emitted when current option changed. | `{ columnIndex, selectedValue, selectedOptions }` |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| confirm | Emitted when click confirm button. | `{ selectedValue, selectedOptions }` |
+| cancel | Emitted when click cancel button. | `{ selectedValue, selectedOptions }` |
+| change | Emitted when current option changed. | `{ columnIndex, selectedValue, selectedOptions }` |
 
 ### Slots
 
-| Name    | Description                   |
-| ------- | ----------------------------- |
+| Name | Description |
+| --- | --- |
 | default | Custom content bottom columns |
-| top     | Custom content top columns    |
+| top | Custom content top columns |
 
 ### Data Structure of PickerOption
 
-| Key       | Description     | Type             | Default |
-| --------- | --------------- | ---------------- | ------- |
-| text      | Text of column  | string \| number | -       |
-| value     | Value of column | string \| number | -       |
-| children  | Cascader Option | Array            | -       |
-| className | Extra CalssName | string           | -       |
+| Key | Description | Type | Default |
+| --- | --- | --- | --- |
+| text | Text of column | string \| number | - |
+| value | Value of column | string \| number | - |
+| children | Cascader Option | Array | - |
+| className | Extra CalssName | string | - |
 
 ## Theming
 
@@ -490,17 +396,17 @@ app.use(DatePicker);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                 | Default Value              |
-| ------------------------------------ | -------------------------- |
-| --nut-picker-cancel-color            | _#808080_                  |
-| --nut-picker-ok-color                | _var(--nut-primary-color)_ |
-| --nut-picker-bar-cancel-font-size    | _14px_                     |
-| --nut-picker-bar-ok-font-size        | _14px_                     |
-| --nut-picker-bar-button-padding      | _0 15px_                   |
-| --nut-picker-bar-title-font-size     | _16px_                     |
-| --nut-picker-bar-title-color         | _var(--nut-title-color)_   |
-| --nut-picker-bar-title-font-weight   | _normal_                   |
-| --nut-picker-item-height             | _36px_                     |
-| --nut-picker-item-text-color         | _var(--nut-title-color)_   |
-| --nut-picker-item-text-font-size     | _14px_                     |
-| --nut-picker-item-active-line-border | _1px solid #d8d8d8_        |
+| Name | Default Value |
+| --- | --- |
+| --nut-picker-cancel-color | _#808080_ |
+| --nut-picker-ok-color | _var(--nut-primary-color)_ |
+| --nut-picker-bar-cancel-font-size | _14px_ |
+| --nut-picker-bar-ok-font-size | _14px_ |
+| --nut-picker-bar-button-padding | _0 15px_ |
+| --nut-picker-bar-title-font-size | _16px_ |
+| --nut-picker-bar-title-color | _var(--nut-title-color)_ |
+| --nut-picker-bar-title-font-weight | _normal_ |
+| --nut-picker-item-height | _36px_ |
+| --nut-picker-item-text-color | _var(--nut-title-color)_ |
+| --nut-picker-item-text-font-size | _14px_ |
+| --nut-picker-item-active-line-border | _1px solid #d8d8d8_ |
diff --git a/src/packages/__VUE/datepicker/doc.md b/src/packages/__VUE/datepicker/doc.md
index f25a112b83..13d59a483c 100644
--- a/src/packages/__VUE/datepicker/doc.md
+++ b/src/packages/__VUE/datepicker/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { DatePicker } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -30,26 +30,15 @@ app.use(DatePicker);
   ></nut-date-picker>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const minDate = new Date(2020, 0, 1);
-      const maxDate = new Date(2025, 10, 1);
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedOptions.map((val: any) => val.text).join(''));
-      };
-      return {
-        currentDate,
-        minDate,
-        maxDate,
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const minDate = new Date(2020, 0, 1);
+const maxDate = new Date(2025, 10, 1);
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedOptions.map((val) => val.text).join(''));
+};
 </script>
 ```
 
@@ -59,7 +48,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
   <nut-popup position="bottom" v-model:visible="show">
@@ -76,34 +65,21 @@ app.use(DatePicker);
   </nut-popup>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const show = ref(false);
-      const popupDesc = ref();
-      const minDate = new Date(2020, 0, 1);
-      const maxDate = new Date(2025, 10, 1);
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const popupConfirm = ({ selectedValue, selectedOptions }) => {
-        popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
-        show.value = false;
-      };
-      const alwaysFun = () => {
-        popupDesc.value = '永远有效';
-        show.value = false;
-      };
-      return {
-        show,
-        popupDesc,
-        currentDate,
-        minDate,
-        maxDate,
-        alwaysFun,
-        popupConfirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const popupDesc = ref();
+const minDate = new Date(2020, 0, 1);
+const maxDate = new Date(2025, 10, 1);
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const popupConfirm = ({ selectedValue, selectedOptions }) => {
+  popupDesc.value = selectedOptions.map((val) => val.text).join('');
+  show.value = false;
+};
+const alwaysFun = () => {
+  popupDesc.value = '永远有效';
+  show.value = false;
+};
 </script>
 ```
 
@@ -115,7 +91,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -127,22 +103,13 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
   ></nut-date-picker>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedOptions.map((val: any) => val.text).join('-'));
-      };
-      return {
-        currentDate,
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedOptions.map((val) => val.text).join('-'));
+};
 </script>
 ```
 
@@ -154,7 +121,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -165,25 +132,16 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        date = selectedValue.slice(0, 3).join('-');
-        time = selectedValue.slice(3).join(':');
-        showToast.text(date + ' ' + time);
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  date = selectedValue.slice(0, 3).join('-');
+  time = selectedValue.slice(3).join(':');
+  showToast.text(date + ' ' + time);
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -193,7 +151,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -204,24 +162,13 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedValue.join(':'));
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedValue.join(':'));
+};
 </script>
 ```
 
@@ -231,7 +178,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -242,24 +189,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedValue.join(':'));
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedValue.join(':'));
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -271,7 +209,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -283,53 +221,43 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        const date = selectedOptions
-          .slice(1, 3)
-          .map((op) => op.text)
-          .join('');
-        const time = selectedOptions
-          .slice(3)
-          .map((op) => op.value)
-          .join(':');
-        showToast.text(selectedOptions[0].text + '年' + date + ' ' + time);
-      };
-      const formatter = (type: string, option) => {
-        switch (type) {
-          case 'year':
-            option.text += '';
-            break;
-          case 'month':
-            option.text += '月';
-            break;
-          case 'day':
-            option.text += '日';
-            break;
-          case 'hour':
-            option.text += '时';
-            break;
-          case 'minute':
-            option.text += '分';
-            break;
-          default:
-            option.text += '';
-        }
-        return option;
-      };
-      return {
-        currentDate,
-        confirm,
-        formatter
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  const date = selectedOptions
+    .slice(1, 3)
+    .map((op) => op.text)
+    .join('');
+  const time = selectedOptions
+    .slice(3)
+    .map((op) => op.value)
+    .join(':');
+  showToast.text(selectedOptions[0].text + '年' + date + ' ' + time);
+};
+const formatter = (type, option) => {
+  switch (type) {
+    case 'year':
+      option.text += '';
+      break;
+    case 'month':
+      option.text += '月';
+      break;
+    case 'day':
+      option.text += '日';
+      break;
+    case 'hour':
+      option.text += '时';
+      break;
+    case 'minute':
+      option.text += '分';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
 </script>
 ```
 
@@ -339,7 +267,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -350,24 +278,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedValue.join(':'));
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedValue.join(':'));
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -379,7 +298,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -392,52 +311,41 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 0, 0);
-      const formatter = (type: string, option) => {
-        switch (type) {
-          case 'year':
-            option.text += '年';
-            break;
-          case 'month':
-            option.text += '月';
-            break;
-          case 'day':
-            option.text += '月';
-            break;
-          case 'hour':
-            option.text += '时';
-            break;
-          default:
-            option.text += '';
-        }
-        return option;
-      };
-
-      const filter = (type: string, options) => {
-        if (type == 'hour') {
-          return options.filter((option) => Number(option.value) % 6 === 0);
-        }
-        return options;
-      };
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        showToast.text(selectedOptions.map((option) => option.text).join(''));
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm,
-        formatter,
-        filter
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const currentDate = new Date(2022, 4, 10, 0, 0);
+const formatter = (type, option) => {
+  switch (type) {
+    case 'year':
+      option.text += '年';
+      break;
+    case 'month':
+      option.text += '月';
+      break;
+    case 'day':
+      option.text += '月';
+      break;
+    case 'hour':
+      option.text += '时';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
+
+const filter = (type, options) => {
+  if (type == 'hour') {
+    return options.filter((option) => Number(option.value) % 6 === 0);
+  }
+  return options;
+};
+const confirm = ({ selectedValue, selectedOptions }) => {
+  showToast.text(selectedOptions.map((option) => option.text).join(''));
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -447,48 +355,48 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 ### Props
 
-| 参数               | 说明                                                                                                                                 | 类型                                                   | 默认值   |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------- |
-| v-model            | 初始值                                                                                                                               | date                                                   | `null`   |
-| type               | 时间类型，可选值 `date`(年月日) `time`(时分秒) `year-month`(年月) `month-day`(月日) `datehour`(年月日时) `hour-minute`(时分`v4.0.5`) | string                                                 | `date`   |
-| minute-step        | 分钟步进值                                                                                                                           | number                                                 | `1`      |
-| is-show-chinese    | 每列是否展示中文                                                                                                                     | boolean                                                | `false`  |
-| min-date           | 开始日期                                                                                                                             | date                                                   | `十年前` |
-| max-date           | 结束日期                                                                                                                             | date                                                   | `十年后` |
-| formatter          | 选项格式化函数                                                                                                                       | (type: string, option: PickerOption) => PickerOption   |          |
-| filter             | 选项过滤函数                                                                                                                         | (type: string, option: PickerOption) => PickerOption[] |          |
-| title              | 设置标题                                                                                                                             | string                                                 | `null`   |
-| ok-text            | 确定按钮文案                                                                                                                         | string                                                 | `确定`   |
-| cancel-text        | 取消按钮文案                                                                                                                         | string                                                 | `取消`   |
-| three-dimensional  | 是否开启 3D 效果                                                                                                                     | boolean                                                | `true`   |
-| swipe-duration     | 惯性滚动时长                                                                                                                         | number \| string                                       | `1000`   |
-| visible-option-num | 可见的选项个数                                                                                                                       | number \| string                                       | `7`      |
-| option-height      | 选项高度                                                                                                                             | number \| string                                       | `36`     |
-| show-toolbar       | 是否显示顶部导航                                                                                                                     | boolean                                                | `true`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 初始值 | date | `null` |
+| type | 时间类型，可选值 `date`(年月日) `time`(时分秒) `year-month`(年月) `month-day`(月日) `datehour`(年月日时) `hour-minute`(时分`v4.0.5`) | string | `date` |
+| minute-step | 分钟步进值 | number | `1` |
+| is-show-chinese | 每列是否展示中文 | boolean | `false` |
+| min-date | 开始日期 | date | `十年前` |
+| max-date | 结束日期 | date | `十年后` |
+| formatter | 选项格式化函数 | (type: string, option: PickerOption) => PickerOption |  |
+| filter | 选项过滤函数 | (type: string, option: PickerOption) => PickerOption[] |  |
+| title | 设置标题 | string | `null` |
+| ok-text | 确定按钮文案 | string | `确定` |
+| cancel-text | 取消按钮文案 | string | `取消` |
+| three-dimensional | 是否开启 3D 效果 | boolean | `true` |
+| swipe-duration | 惯性滚动时长 | number \| string | `1000` |
+| visible-option-num | 可见的选项个数 | number \| string | `7` |
+| option-height | 选项高度 | number \| string | `36` |
+| show-toolbar | 是否显示顶部导航 | boolean | `true` |
 
 ### Events
 
-| 事件名  | 说明               | 回调参数                                          |
-| ------- | ------------------ | ------------------------------------------------- |
-| confirm | 点击确定按钮时触发 | `{ selectedValue, selectedOptions }`              |
-| cancel  | 点击取消按钮时触发 | `{ selectedValue, selectedOptions }`              |
-| change  | 选项改变时触发     | `{ columnIndex, selectedValue, selectedOptions }` |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| confirm | 点击确定按钮时触发 | `{ selectedValue, selectedOptions }` |
+| cancel | 点击取消按钮时触发 | `{ selectedValue, selectedOptions }` |
+| change | 选项改变时触发 | `{ columnIndex, selectedValue, selectedOptions }` |
 
 ### Slots
 
-| 名称    | 说明                   |
-| ------- | ---------------------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 自定义滑动数据底部区域 |
-| top     | 自定义滑动数据顶部区域 |
+| top | 自定义滑动数据顶部区域 |
 
 ### PickerOption 数据结构
 
-| 键名      | 说明                 | 类型             | 默认值 |
-| --------- | -------------------- | ---------------- | ------ |
-| text      | 选项的文字内容       | string \| number | -      |
-| value     | 选项对应的值，且唯一 | string \| number | -      |
-| children  | 用于级联选项         | Array            | -      |
-| className | 添加额外的类名       | string           | -      |
+| 键名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 选项的文字内容 | string \| number | - |
+| value | 选项对应的值，且唯一 | string \| number | - |
+| children | 用于级联选项 | Array | - |
+| className | 添加额外的类名 | string | - |
 
 ## 主题定制
 
@@ -496,17 +404,17 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值                     |
-| ------------------------------------ | -------------------------- |
-| --nut-picker-cancel-color            | _#808080_                  |
-| --nut-picker-ok-color                | _var(--nut-primary-color)_ |
-| --nut-picker-bar-cancel-font-size    | _14px_                     |
-| --nut-picker-bar-ok-font-size        | _14px_                     |
-| --nut-picker-bar-button-padding      | _0 15px_                   |
-| --nut-picker-bar-title-font-size     | _16px_                     |
-| --nut-picker-bar-title-color         | _var(--nut-title-color)_   |
-| --nut-picker-bar-title-font-weight   | _normal_                   |
-| --nut-picker-item-height             | _36px_                     |
-| --nut-picker-item-text-color         | _var(--nut-title-color)_   |
-| --nut-picker-item-text-font-size     | _14px_                     |
-| --nut-picker-item-active-line-border | _1px solid #d8d8d8_        |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-picker-cancel-color | _#808080_ |
+| --nut-picker-ok-color | _var(--nut-primary-color)_ |
+| --nut-picker-bar-cancel-font-size | _14px_ |
+| --nut-picker-bar-ok-font-size | _14px_ |
+| --nut-picker-bar-button-padding | _0 15px_ |
+| --nut-picker-bar-title-font-size | _16px_ |
+| --nut-picker-bar-title-color | _var(--nut-title-color)_ |
+| --nut-picker-bar-title-font-weight | _normal_ |
+| --nut-picker-item-height | _36px_ |
+| --nut-picker-item-text-color | _var(--nut-title-color)_ |
+| --nut-picker-item-text-font-size | _14px_ |
+| --nut-picker-item-active-line-border | _1px solid #d8d8d8_ |
diff --git a/src/packages/__VUE/datepicker/doc.taro.md b/src/packages/__VUE/datepicker/doc.taro.md
index 23da9e7cb3..eb95f9f099 100644
--- a/src/packages/__VUE/datepicker/doc.taro.md
+++ b/src/packages/__VUE/datepicker/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { DatePicker } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -29,28 +29,14 @@ app.use(DatePicker);
   ></nut-date-picker>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup(props) {
-      const minDate = new Date(2020, 0, 1);
-      const maxDate = new Date(2025, 10, 1);
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        Taro.showToast({
-          title: selectedOptions.map((val: any) => val.text).join(''),
-          icon: 'none'
-        });
-      };
-      return {
-        currentDate,
-        minDate,
-        maxDate,
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const minDate = new Date(2020, 0, 1);
+const maxDate = new Date(2025, 10, 1);
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  console.log(selectedOptions.map((val) => val.text).join(''));
+};
 </script>
 ```
 
@@ -60,7 +46,7 @@ app.use(DatePicker);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
   <nut-popup position="bottom" v-model:visible="show">
@@ -76,34 +62,21 @@ app.use(DatePicker);
   </nut-popup>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const show = ref(false);
-      const popupDesc = ref();
-      const minDate = new Date(2020, 0, 1);
-      const maxDate = new Date(2025, 10, 1);
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const popupConfirm = ({ selectedValue, selectedOptions }) => {
-        popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
-        show.value = false;
-      };
-      const alwaysFun = () => {
-        popupDesc.value = '永远有效';
-        show.value = false;
-      };
-      return {
-        show,
-        popupDesc,
-        currentDate,
-        minDate,
-        maxDate,
-        alwaysFun,
-        popupConfirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const popupDesc = ref();
+const minDate = new Date(2020, 0, 1);
+const maxDate = new Date(2025, 10, 1);
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const popupConfirm = ({ selectedValue, selectedOptions }) => {
+  popupDesc.value = selectedOptions.map((val) => val.text).join('');
+  show.value = false;
+};
+const alwaysFun = () => {
+  popupDesc.value = '永远有效';
+  show.value = false;
+};
 </script>
 ```
 
@@ -115,7 +88,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -127,24 +100,12 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
   ></nut-date-picker>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        Taro.showToast({
-          title: selectedOptions.map((val: any) => val.text).join('-'),
-          icon: 'none'
-        });
-      };
-      return {
-        currentDate,
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  console.log(selectedOptions.map((val) => val.text).join('-'));
+};
 </script>
 ```
 
@@ -156,7 +117,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -167,28 +128,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup() {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        date = selectedValue.slice(0, 3).join('-');
-        time = selectedValue.slice(3).join(':');
-        Taro.showToast({
-          title: date + ' ' + time,
-          icon: 'none'
-        });
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  date = selectedValue.slice(0, 3).join('-');
+  time = selectedValue.slice(3).join(':');
+  console.log(date + ' ' + time);
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -198,7 +146,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -209,26 +157,12 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        Taro.showToast({
-          title: selectedValue.join(':'),
-          icon: 'none'
-        });
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  console.log(selectedValue.join(':'));
+};
 </script>
 ```
 
@@ -238,7 +172,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -249,26 +183,14 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        Taro.showToast({
-          title: selectedValue.join(':'),
-          icon: 'none'
-        });
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  console.log(selectedValue.join(':'));
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -280,7 +202,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -292,55 +214,42 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        const date = selectedOptions
-          .slice(1, 3)
-          .map((op) => op.text)
-          .join('');
-        const time = selectedOptions
-          .slice(3)
-          .map((op) => op.value)
-          .join(':');
-        Taro.showToast({
-          title: selectedOptions[0].text + '年' + date + ' ' + time,
-          icon: 'none'
-        });
-      };
-      const formatter = (type: string, option) => {
-        switch (type) {
-          case 'year':
-            option.text += '';
-            break;
-          case 'month':
-            option.text += '月';
-            break;
-          case 'day':
-            option.text += '日';
-            break;
-          case 'hour':
-            option.text += '时';
-            break;
-          case 'minute':
-            option.text += '分';
-            break;
-          default:
-            option.text += '';
-        }
-        return option;
-      };
-      return {
-        currentDate,
-        confirm,
-        formatter
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  const date = selectedOptions
+    .slice(1, 3)
+    .map((op) => op.text)
+    .join('');
+  const time = selectedOptions
+    .slice(3)
+    .map((op) => op.value)
+    .join(':');
+  console.log(selectedOptions[0].text + '年' + date + ' ' + time);
+};
+const formatter = (type, option) => {
+  switch (type) {
+    case 'year':
+      option.text += '';
+      break;
+    case 'month':
+      option.text += '月';
+      break;
+    case 'day':
+      option.text += '日';
+      break;
+    case 'hour':
+      option.text += '时';
+      break;
+    case 'minute':
+      option.text += '分';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
 </script>
 ```
 
@@ -350,7 +259,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -361,26 +270,14 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 10, 10);
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        Taro.showToast({
-          title: selectedValue.join(':'),
-          icon: 'none'
-        });
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const currentDate = new Date(2022, 4, 10, 10, 10);
+const confirm = ({ selectedValue, selectedOptions }) => {
+  console.log(selectedValue.join(':'));
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -392,7 +289,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-date-picker
     v-model="currentDate"
@@ -405,54 +302,40 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     @confirm="confirm"
   ></nut-date-picker>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup(props) {
-      const currentDate = new Date(2022, 4, 10, 0, 0);
-      const formatter = (type: string, option) => {
-        switch (type) {
-          case 'year':
-            option.text += '年';
-            break;
-          case 'month':
-            option.text += '月';
-            break;
-          case 'day':
-            option.text += '月';
-            break;
-          case 'hour':
-            option.text += '时';
-            break;
-          default:
-            option.text += '';
-        }
-        return option;
-      };
-
-      const filter = (type: string, options) => {
-        if (type == 'hour') {
-          return options.filter((option) => Number(option.value) % 6 === 0);
-        }
-        return options;
-      };
-      const confirm = ({ selectedValue, selectedOptions }) => {
-        Taro.showToast({
-          title: selectedOptions.map((option) => option.text).join(''),
-          icon: 'none'
-        });
-      };
-      return {
-        currentDate,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        confirm,
-        formatter,
-        filter
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const currentDate = new Date(2022, 4, 10, 0, 0);
+const formatter = (type, option) => {
+  switch (type) {
+    case 'year':
+      option.text += '年';
+      break;
+    case 'month':
+      option.text += '月';
+      break;
+    case 'day':
+      option.text += '月';
+      break;
+    case 'hour':
+      option.text += '时';
+      break;
+    default:
+      option.text += '';
+  }
+  return option;
+};
+
+const filter = (type, options) => {
+  if (type == 'hour') {
+    return options.filter((option) => Number(option.value) % 6 === 0);
+  }
+  return options;
+};
+const confirm = ({ selectedValue, selectedOptions }) => {
+  console.log(selectedOptions.map((option) => option.text).join(''));
+};
+const maxDate = new Date(2025, 10, 1);
+const minDate = new Date(2020, 0, 1);
 </script>
 ```
 
@@ -462,47 +345,47 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 ### Props
 
-| 参数               | 说明                                                                                                                                 | 类型                                                   | 默认值   |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------- |
-| v-model            | 初始值                                                                                                                               | date                                                   | `null`   |
-| type               | 时间类型，可选值 `date`(年月日) `time`(时分秒) `year-month`(年月) `month-day`(月日) `datehour`(年月日时) `hour-minute`(时分`v4.0.5`) | string                                                 | `date`   |
-| minute-step        | 分钟步进值                                                                                                                           | number                                                 | `1`      |
-| is-show-chinese    | 每列是否展示中文                                                                                                                     | boolean                                                | `false`  |
-| min-date           | 开始日期                                                                                                                             | date                                                   | `十年前` |
-| max-date           | 结束日期                                                                                                                             | date                                                   | `十年后` |
-| formatter          | 选项格式化函数                                                                                                                       | (type: string, option: PickerOption) => PickerOption   |          |
-| filter             | 选项过滤函数                                                                                                                         | (type: string, option: PickerOption) => PickerOption[] |          |
-| title              | 设置标题                                                                                                                             | string                                                 | `null`   |
-| ok-text            | 确定按钮文案                                                                                                                         | string                                                 | `确定`   |
-| cancel-text        | 取消按钮文案                                                                                                                         | string                                                 | `取消`   |
-| swipe-duration     | 惯性滚动时长                                                                                                                         | number \| string                                       | `1000`   |
-| visible-option-num | 可见的选项个数                                                                                                                       | number \| string                                       | `7`      |
-| option-height      | 选项高度                                                                                                                             | number \| string                                       | `36`     |
-| show-toolbar       | 是否显示顶部导航                                                                                                                     | boolean                                                | `true`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 初始值 | date | `null` |
+| type | 时间类型，可选值 `date`(年月日) `time`(时分秒) `year-month`(年月) `month-day`(月日) `datehour`(年月日时) `hour-minute`(时分`v4.0.5`) | string | `date` |
+| minute-step | 分钟步进值 | number | `1` |
+| is-show-chinese | 每列是否展示中文 | boolean | `false` |
+| min-date | 开始日期 | date | `十年前` |
+| max-date | 结束日期 | date | `十年后` |
+| formatter | 选项格式化函数 | (type: string, option: PickerOption) => PickerOption |  |
+| filter | 选项过滤函数 | (type: string, option: PickerOption) => PickerOption[] |  |
+| title | 设置标题 | string | `null` |
+| ok-text | 确定按钮文案 | string | `确定` |
+| cancel-text | 取消按钮文案 | string | `取消` |
+| swipe-duration | 惯性滚动时长 | number \| string | `1000` |
+| visible-option-num | 可见的选项个数 | number \| string | `7` |
+| option-height | 选项高度 | number \| string | `36` |
+| show-toolbar | 是否显示顶部导航 | boolean | `true` |
 
 ### Events
 
-| 事件名  | 说明               | 回调参数                                          |
-| ------- | ------------------ | ------------------------------------------------- |
-| confirm | 点击确定按钮时触发 | `{ selectedValue, selectedOptions }`              |
-| cancel  | 点击取消按钮时触发 | `{ selectedValue, selectedOptions }`              |
-| change  | 选项改变时触发     | `{ columnIndex, selectedValue, selectedOptions }` |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| confirm | 点击确定按钮时触发 | `{ selectedValue, selectedOptions }` |
+| cancel | 点击取消按钮时触发 | `{ selectedValue, selectedOptions }` |
+| change | 选项改变时触发 | `{ columnIndex, selectedValue, selectedOptions }` |
 
 ### Slots
 
-| 名称    | 说明                   |
-| ------- | ---------------------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 自定义滑动数据底部区域 |
-| top     | 自定义滑动数据顶部区域 |
+| top | 自定义滑动数据顶部区域 |
 
 ### PickerOption 数据结构
 
-| 键名      | 说明                 | 类型             | 默认值 |
-| --------- | -------------------- | ---------------- | ------ |
-| text      | 选项的文字内容       | string \| number | -      |
-| value     | 选项对应的值，且唯一 | string \| number | -      |
-| children  | 用于级联选项         | Array            | -      |
-| className | 添加额外的类名       | string           | -      |
+| 键名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 选项的文字内容 | string \| number | - |
+| value | 选项对应的值，且唯一 | string \| number | - |
+| children | 用于级联选项 | Array | - |
+| className | 添加额外的类名 | string | - |
 
 ## 主题定制
 
@@ -510,17 +393,17 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值                     |
-| ------------------------------------ | -------------------------- |
-| --nut-picker-cancel-color            | _#808080_                  |
-| --nut-picker-ok-color                | _var(--nut-primary-color)_ |
-| --nut-picker-bar-cancel-font-size    | _14px_                     |
-| --nut-picker-bar-ok-font-size        | _14px_                     |
-| --nut-picker-bar-button-padding      | _0 15px_                   |
-| --nut-picker-bar-title-font-size     | _16px_                     |
-| --nut-picker-bar-title-color         | _var(--nut-title-color)_   |
-| --nut-picker-bar-title-font-weight   | _normal_                   |
-| --nut-picker-item-height             | _36px_                     |
-| --nut-picker-item-text-color         | _var(--nut-title-color)_   |
-| --nut-picker-item-text-font-size     | _14px_                     |
-| --nut-picker-item-active-line-border | _1px solid #d8d8d8_        |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-picker-cancel-color | _#808080_ |
+| --nut-picker-ok-color | _var(--nut-primary-color)_ |
+| --nut-picker-bar-cancel-font-size | _14px_ |
+| --nut-picker-bar-ok-font-size | _14px_ |
+| --nut-picker-bar-button-padding | _0 15px_ |
+| --nut-picker-bar-title-font-size | _16px_ |
+| --nut-picker-bar-title-color | _var(--nut-title-color)_ |
+| --nut-picker-bar-title-font-weight | _normal_ |
+| --nut-picker-item-height | _36px_ |
+| --nut-picker-item-text-color | _var(--nut-title-color)_ |
+| --nut-picker-item-text-font-size | _14px_ |
+| --nut-picker-item-active-line-border | _1px solid #d8d8d8_ |
diff --git a/src/packages/__VUE/form/demo.vue b/src/packages/__VUE/form/demo.vue
index 8fd16aaf48..71f347c8ed 100644
--- a/src/packages/__VUE/form/demo.vue
+++ b/src/packages/__VUE/form/demo.vue
@@ -190,9 +190,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { showToast } from '@/packages/nutui.vue';
-import { reactive, ref, defineComponent } from 'vue';
+import { reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('form');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -278,209 +278,182 @@ const initTranslate = () =>
       asyncValidator: 'Simulating asynchronous verification'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const formData = reactive({
-      name: '',
-      age: '',
-      tel: '',
-      address: ''
-    });
-    const basicData = reactive({
-      name: '',
-      age: '',
-      tel: '',
-      address: ''
-    });
-
-    const dynamicRefForm = ref<any>(null);
-    const dynamicForm = {
-      state: reactive({
-        name: '',
-        tels: new Array({
-          key: 1,
-          value: ''
-        })
-      }),
-
-      methods: {
-        submit() {
-          dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
-            if (valid) {
-              console.log('success', dynamicForm);
-            } else {
-              showToast.warn(errors[0].message);
-              console.log('error submit!!', errors);
-            }
-          });
-        },
-        reset() {
-          dynamicRefForm.value.reset();
-        },
-        remove() {
-          dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
-        },
-        add() {
-          dynamicForm.state.tels.push({
-            key: Date.now(),
-            value: ''
-          });
-        }
-      }
-    };
-
-    const validate = (item: any) => {
-      console.log(item);
-    };
-
-    const formData2 = reactive({
-      switch: false,
-      checkbox: false,
-      radio: 0,
-      number: 0,
-      rate: 3,
-      range: 30,
-      address: '',
-      defaultFileList: [
-        {
-          name: 'file 1.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'success',
-          message: translate('success'),
-          type: 'image'
-        },
-        {
-          name: 'file 2.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'uploading',
-          message: translate('uploading'),
-          type: 'image'
-        }
-      ]
-    });
-
-    const addressModule = reactive({
-      state: {
-        show: false,
-        province: [
-          { id: 1, name: '北京' },
-          { id: 2, name: '广西' },
-          { id: 3, name: '江西' },
-          { id: 4, name: '四川' }
-        ],
-        city: [
-          { id: 7, name: '朝阳区' },
-          { id: 8, name: '崇文区' },
-          { id: 9, name: '昌平区' },
-          { id: 6, name: '石景山区' }
-        ],
-        country: [
-          { id: 3, name: '八里庄街道' },
-          { id: 9, name: '北苑' },
-          { id: 4, name: '常营乡' }
-        ],
-        town: []
-      } as any,
-      methods: {
-        show() {
-          addressModule.state.show = !addressModule.state.show;
-          if (addressModule.state.show) {
-            formData2.address = '';
-          }
-        },
-        onChange({ next, value }: any) {
-          formData2.address += value.name;
-          const name = addressModule.state[next];
-          if (name.length < 1) {
-            addressModule.state.show = false;
-          }
-        }
-      }
-    });
+initTranslate();
+const formData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
+const basicData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
 
-    const ruleForm = ref<any>(null);
+const dynamicRefForm = ref<any>(null);
+const dynamicForm = {
+  state: reactive({
+    name: '',
+    tels: new Array({
+      key: 1,
+      value: ''
+    })
+  }),
 
-    const submit = () => {
-      ruleForm.value.validate().then(({ valid, errors }: any) => {
+  methods: {
+    submit() {
+      dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
         if (valid) {
-          console.log('success', formData);
+          console.log('success', dynamicForm);
         } else {
+          showToast.warn(errors[0].message);
           console.log('error submit!!', errors);
         }
       });
-    };
-    const reset = () => {
-      ruleForm.value.reset();
-    };
-    // 失去焦点校验
-    const customBlurValidate = (prop: string) => {
-      ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
-        if (valid) {
-          console.log('success', formData);
-        } else {
-          console.log('error submit!!', errors);
-        }
+    },
+    reset() {
+      dynamicRefForm.value.reset();
+    },
+    remove() {
+      dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
+    },
+    add() {
+      dynamicForm.state.tels.push({
+        key: Date.now(),
+        value: ''
       });
-    };
-    // 函数校验
-    const customValidator = (val: string) => {
-      if (/^\d+$/.test(val)) {
-        return Promise.resolve();
-      } else {
-        return Promise.reject('必须输入数字');
-      }
-    };
-    const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
-      if ((rule?.reg as RegExp).test(val)) {
-        return Promise.resolve();
-      } else {
-        return Promise.reject('必须输入数字');
+    }
+  }
+};
+
+const formData2 = reactive({
+  switch: false,
+  checkbox: false,
+  radio: 0,
+  number: 0,
+  rate: 3,
+  range: 30,
+  address: '',
+  defaultFileList: [
+    {
+      name: 'file 1.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'success',
+      message: translate('success'),
+      type: 'image'
+    },
+    {
+      name: 'file 2.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'uploading',
+      message: translate('uploading'),
+      type: 'image'
+    }
+  ]
+});
+
+const addressModule = reactive({
+  state: {
+    show: false,
+    province: [
+      { id: 1, name: '北京' },
+      { id: 2, name: '广西' },
+      { id: 3, name: '江西' },
+      { id: 4, name: '四川' }
+    ],
+    city: [
+      { id: 7, name: '朝阳区' },
+      { id: 8, name: '崇文区' },
+      { id: 9, name: '昌平区' },
+      { id: 6, name: '石景山区' }
+    ],
+    country: [
+      { id: 3, name: '八里庄街道' },
+      { id: 9, name: '北苑' },
+      { id: 4, name: '常营乡' }
+    ],
+    town: []
+  } as any,
+  methods: {
+    show() {
+      addressModule.state.show = !addressModule.state.show;
+      if (addressModule.state.show) {
+        formData2.address = '';
       }
-    };
-    const nameLengthValidator = (val: string) => {
-      if (val.length > 2) {
-        return Promise.resolve();
-      } else {
-        return Promise.reject('名称两个字以上');
+    },
+    onChange({ next, value }: any) {
+      formData2.address += value.name;
+      const name = addressModule.state[next];
+      if (name.length < 1) {
+        addressModule.state.show = false;
       }
-    };
-    // Promise 异步校验
-    const asyncValidator = (val: string) => {
-      const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
-      return new Promise((resolve, reject) => {
-        showToast.loading('模拟异步验证中...');
-        setTimeout(() => {
-          showToast.hide();
-          if (!val) {
-            reject('请输入联系电话');
-          } else if (!telReg.test(val)) {
-            reject('联系电话格式不正确');
-          } else {
-            resolve('');
-          }
-        }, 1000);
-      });
-    };
-    return {
-      ruleForm,
-      formData,
-      validate,
-      customValidator,
-      customRulePropValidator,
-      nameLengthValidator,
-      asyncValidator,
-      customBlurValidate,
-      submit,
-      reset,
-      formData2,
-      addressModule,
-      dynamicForm,
-      dynamicRefForm,
-      basicData,
-      translate
-    };
+    }
   }
 });
+
+const ruleForm = ref<any>(null);
+
+const submit = () => {
+  ruleForm.value.validate().then(({ valid, errors }: any) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
+    }
+  });
+};
+const reset = () => {
+  ruleForm.value.reset();
+};
+// 失去焦点校验
+const customBlurValidate = (prop: string) => {
+  ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
+    }
+  });
+};
+// 函数校验
+const customValidator = (val: string) => {
+  if (/^\d+$/.test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
+  if ((rule?.reg as RegExp).test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const nameLengthValidator = (val: string) => {
+  if (val.length > 2) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('名称两个字以上');
+  }
+};
+// Promise 异步校验
+const asyncValidator = (val: string) => {
+  const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
+  return new Promise((resolve, reject) => {
+    showToast.loading('模拟异步验证中...');
+    setTimeout(() => {
+      showToast.hide();
+      if (!val) {
+        reject('请输入联系电话');
+      } else if (!telReg.test(val)) {
+        reject('联系电话格式不正确');
+      } else {
+        resolve('');
+      }
+    }, 1000);
+  });
+};
 </script>
diff --git a/src/packages/__VUE/form/doc.en-US.md b/src/packages/__VUE/form/doc.en-US.md
index ba483749e8..b411cf118f 100644
--- a/src/packages/__VUE/form/doc.en-US.md
+++ b/src/packages/__VUE/form/doc.en-US.md
@@ -6,7 +6,7 @@ It is used for data entry and verification. It supports input box, radio box, ch
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Form, FormItem } from '@nutui/nutui';
 
@@ -19,7 +19,7 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form>
     <nut-form-item label="Name">
@@ -39,19 +39,14 @@ app.use(FormItem);
     </nut-form-item>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const basicData = reactive({
-        name: '',
-        age: '',
-        tel: '',
-        address: ''
-      });
-      return { basicData };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const basicData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
 </script>
 ```
 
@@ -61,7 +56,7 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form :model-value="dynamicForm.state" ref="dynamicRefForm">
     <nut-form-item label="Name" prop="name" required :rules="[{ required: true, message: 'Please enter your name' }]">
@@ -73,14 +68,14 @@ app.use(FormItem);
       />
     </nut-form-item>
     <nut-form-item
-      :label="'Tel'+index"
+      :label="'Tel' + index"
       :prop="'tels.' + index + '.value'"
       required
-      :rules="[{ required: true, message: 'Please enter tel'+index }]"
+      :rules="[{ required: true, message: 'Please enter tel' + index }]"
       :key="item.key"
-      v-for="(item,index) in dynamicForm.state.tels"
+      v-for="(item, index) in dynamicForm.state.tels"
     >
-      <nut-input class="nut-input-text" v-model="item.value" :placeholder="'Please enter tel'+index" type="text" />
+      <nut-input class="nut-input-text" v-model="item.value" :placeholder="'Please enter tel' + index" type="text" />
     </nut-form-item>
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">Add</nut-button>
@@ -92,54 +87,44 @@ app.use(FormItem);
     </nut-cell>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const dynamicRefForm = ref<any>(null);
-      const dynamicForm = {
-        state: reactive({
-          name: '',
-          tels: new Array({
-            key: 1,
-            value: ''
-          })
-        }),
-
-        methods: {
-          submit() {
-            dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
-              if (valid) {
-                console.log('success', dynamicForm);
-              } else {
-                showToast.warn(errors[0].message);
-                console.log('error submit!!', errors);
-              }
-            });
-          },
-          reset() {
-            dynamicRefForm.value.reset();
-          },
-          remove() {
-            dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
-          },
-          add() {
-            let newIndex = dynamicForm.state.tels.length;
-            dynamicForm.state.tels.push({
-              key: Date.now(),
-              value: ''
-            });
-          }
+<script setup>
+import { ref, reactive } from 'vue';
+const dynamicRefForm = ref(null);
+const dynamicForm = {
+  state: reactive({
+    name: '',
+    tels: new Array({
+      key: 1,
+      value: ''
+    })
+  }),
+
+  methods: {
+    submit() {
+      dynamicRefForm.value.validate().then(({ valid, errors }) => {
+        if (valid) {
+          console.log('success', dynamicForm);
+        } else {
+          showToast.warn(errors[0].message);
+          console.log('error submit!!', errors);
         }
-      };
-      return {
-        dynamicForm,
-        dynamicRefForm
-      };
+      });
+    },
+    reset() {
+      dynamicRefForm.value.reset();
+    },
+    remove() {
+      dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
+    },
+    add() {
+      let newIndex = dynamicForm.state.tels.length;
+      dynamicForm.state.tels.push({
+        key: Date.now(),
+        value: ''
+      });
     }
-  };
+  }
+};
 </script>
 ```
 
@@ -153,14 +138,18 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form
     :model-value="formData"
-    :rules="{name: [{
-            message: 'Name should be at least two characters',
-            validator: nameLengthValidator
-          }]}"
+    :rules="{
+      name: [
+        {
+          message: 'Name should be at least two characters',
+          validator: nameLengthValidator
+        }
+      ]
+    }"
     ref="ruleForm"
   >
     <nut-form-item label="Name" prop="name" required :rules="[{ required: true, message: 'Please enter your name' }]">
@@ -177,11 +166,11 @@ app.use(FormItem);
       prop="age"
       required
       :rules="[
-      { required: true, message: 'Please enter age' },
-      { validator: customValidator, message: 'You must enter a number' },
-      { validator: customRulePropValidator, message: 'You must enter a number', reg: /^\d+$/ },
-      { regex: /^(\d{1,2}|1\d{2}|200)$/, message: 'The range 0-200 must be entered' }
-    ]"
+        { required: true, message: 'Please enter age' },
+        { validator: customValidator, message: 'You must enter a number' },
+        { validator: customRulePropValidator, message: 'You must enter a number', reg: /^\d+$/ },
+        { regex: /^(\d{1,2}|1\d{2}|200)$/, message: 'The range 0-200 must be entered' }
+      ]"
     >
       <nut-input
         class="nut-input-text"
@@ -195,9 +184,9 @@ app.use(FormItem);
       prop="tel"
       required
       :rules="[
-      { required: true, message: 'Please enter tel' },
-      { validator: asyncValidator, message: 'Tel format is incorrect' }
-    ]"
+        { required: true, message: 'Please enter tel' },
+        { validator: asyncValidator, message: 'Tel format is incorrect' }
+      ]"
     >
       <nut-input class="nut-input-text" v-model="formData.tel" placeholder="Async check tel format" type="text" />
     </nut-form-item>
@@ -215,75 +204,80 @@ app.use(FormItem);
     </nut-cell>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const formData = reactive({
-        name: '',
-        age: '',
-        tel: '',
-        address: ''
-      });
-      const validate = (item: any) => {
-        console.log(item);
-      };
-      const ruleForm = ref<any>(null);
-
-      const submit = () => {
-        ruleForm.value.validate().then(({ valid, errors }: any) => {
-          if (valid) {
-            console.log('success', formData);
-          } else {
-            console.log('error submit!!', errors);
-          }
-        });
-      };
-      const reset = () => {
-        ruleForm.value.reset();
-      };
-
-      const customBlurValidate = (prop: string) => {
-        ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
-          if (valid) {
-            console.log('success', formData);
-          } else {
-            console.log('error submit!!', errors);
-          }
-        });
-      };
-
-      const customValidator = (val: string) => /^\d+$/.test(val);
-      const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
-        return (rule?.reg as RegExp).test(val);
-      };
-      const nameLengthValidator = (val: string) => val?.length >= 2;
-      // Promise async validator
-      const asyncValidator = (val: string) => {
-        return new Promise((resolve) => {
-          showToast.loading('Simulating asynchronous verification');
-          setTimeout(() => {
-            showToast.hide();
-            resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
-          }, 1000);
-        });
-      };
-      return {
-        ruleForm,
-        formData,
-        validate,
-        customValidator,
-        customRulePropValidator,
-        nameLengthValidator,
-        asyncValidator,
-        customBlurValidate,
-        submit,
-        reset
-      };
+<script setup>
+import { ref, reactive } from 'vue';
+const formData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
+const reset = () => {
+  ruleForm.value.reset();
+};
+const validate = (item) => {
+  console.log(item);
+};
+const ruleForm = ref(null);
+
+const submit = () => {
+  ruleForm.value.validate().then(({ valid, errors }) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
     }
-  };
+  });
+};
+// 失去焦点校验
+const customBlurValidate = (prop) => {
+  ruleForm.value.validate(prop).then(({ valid, errors }) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
+    }
+  });
+};
+// 函数校验
+const customValidator = (val) => {
+  if (/^\d+$/.test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const customRulePropValidator = (val, rule) => {
+  if ((rule?.reg).test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const nameLengthValidator = (val) => {
+  if (val.length > 2) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('名称两个字以上');
+  }
+};
+// Promise 异步校验
+const asyncValidator = (val) => {
+  const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
+  return new Promise((resolve, reject) => {
+    showToast.loading('模拟异步验证中...');
+    setTimeout(() => {
+      showToast.hide();
+      if (!val) {
+        reject('请输入联系电话');
+      } else if (!telReg.test(val)) {
+        reject('联系电话格式不正确');
+      } else {
+        resolve('');
+      }
+    }, 1000);
+  });
+};
 </script>
 ```
 
@@ -293,7 +287,7 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form>
     <nut-form-item label="switch">
@@ -350,77 +344,72 @@ app.use(FormItem);
     </nut-form-item>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const formData2 = reactive({
-        switch: false,
-        checkbox: false,
-        radio: 0,
-        number: 0,
-        rate: 3,
-        range: 30,
-        address: '',
-        defaultFileList: [
-          {
-            name: 'file 1.png',
-            url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-            status: 'success',
-            message: 'Upload successful',
-            type: 'image'
-          },
-          {
-            name: 'file 2.png',
-            url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-            status: 'uploading',
-            message: 'Uploading...',
-            type: 'image'
-          }
-        ]
-      });
-
-      const addressModule = reactive({
-        state: {
-          show: false,
-          province: [
-            { id: 1, name: 'Beijing' },
-            { id: 2, name: 'Guangxi' },
-            { id: 3, name: 'Jiangxi' },
-            { id: 4, name: 'Sichuan' }
-          ],
-          city: [
-            { id: 7, name: 'C1' },
-            { id: 8, name: 'C2' },
-            { id: 9, name: 'C3' },
-            { id: 6, name: 'C4' }
-          ],
-          country: [
-            { id: 3, name: 'D5' },
-            { id: 9, name: 'D6' },
-            { id: 4, name: 'D7' }
-          ],
-          town: []
-        },
-        methods: {
-          show() {
-            addressModule.state.show = !addressModule.state.show;
-            if (addressModule.state.show) {
-              formData2.address = '';
-            }
-          },
-          onChange({ custom, next, value }: any) {
-            formData2.address += value.name;
-            const name = addressModule.state[next];
-            if (name.length < 1) {
-              addressModule.state.show = false;
-            }
-          }
-        }
-      });
-      return { formData2, addressModule };
+<script setup>
+import { ref, reactive } from 'vue';
+const formData2 = reactive({
+  switch: false,
+  checkbox: false,
+  radio: 0,
+  number: 0,
+  rate: 3,
+  range: 30,
+  address: '',
+  defaultFileList: [
+    {
+      name: 'file 1.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'success',
+      message: 'Upload successful',
+      type: 'image'
+    },
+    {
+      name: 'file 2.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'uploading',
+      message: 'Uploading...',
+      type: 'image'
+    }
+  ]
+});
+
+const addressModule = reactive({
+  state: {
+    show: false,
+    province: [
+      { id: 1, name: 'Beijing' },
+      { id: 2, name: 'Guangxi' },
+      { id: 3, name: 'Jiangxi' },
+      { id: 4, name: 'Sichuan' }
+    ],
+    city: [
+      { id: 7, name: 'C1' },
+      { id: 8, name: 'C2' },
+      { id: 9, name: 'C3' },
+      { id: 6, name: 'C4' }
+    ],
+    country: [
+      { id: 3, name: 'D5' },
+      { id: 9, name: 'D6' },
+      { id: 4, name: 'D7' }
+    ],
+    town: []
+  },
+  methods: {
+    show() {
+      addressModule.state.show = !addressModule.state.show;
+      if (addressModule.state.show) {
+        formData2.address = '';
+      }
+    },
+    onChange({ custom, next, value }) {
+      formData2.address += value.name;
+      const name = addressModule.state[next];
+      if (name.length < 1) {
+        addressModule.state.show = false;
+      }
     }
-  };
+  }
+});
 </script>
 ```
 
@@ -430,50 +419,50 @@ app.use(FormItem);
 
 ### Form Props
 
-| Attribute   | Description                                              | Type                     | Default |
-| ----------- | -------------------------------------------------------- | ------------------------ | ------- |
-| model-value | Form data object (required when using form verification) | object                   |         |
-| rules       | Unified configuration FormItem attr rules                | { prop: FormItemRule[] } | `{}`    |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| model-value | Form data object (required when using form verification) | object |  |
+| rules | Unified configuration FormItem attr rules | { prop: FormItemRule[] } | `{}` |
 
 ### Form Events
 
-| Event    | Description                                                | Arguments                                                                                                            |
-| -------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | validate | Triggered after any single table item fails to be verified | The `prop` value of the form item to be verified, whether the verification is passed, and the error message (if any) |
 
 ### FormItem Props
 
-| Attribute           | Description                                                                                 | Type             | Default |
-| ------------------- | ------------------------------------------------------------------------------------------- | ---------------- | ------- |
-| required            | Whether to display the red asterisk next to the label of the required field                 | boolean          | `false` |
-| prop                | The v-model field of the form field is required when the form verification function is used | string           | -       |
-| rules               | Define validation rules                                                                     | FormItemRule []  | []      |
-| label-width         | The width of the form item label. The default unit is `px`                                  | number \| string | `90`    |
-| label-align         | Form item label alignment. The optional values are `center` `right`                         | string           | `left`  |
-| body-align          | Default Solt box alignment. The optional values are `center` `right`                        | string           | `left`  |
-| error-message-align | Error prompt text alignment. The optional values are `center` and `right`                   | string           | `left`  |
-| show-error-line     | Whether to mark the input box in red when the verification fails                            | boolean          | `true`  |
-| show-error-message  | Whether to display the error prompt under the input box when the verification fails         | boolean          | `true`  |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| required | Whether to display the red asterisk next to the label of the required field | boolean | `false` |
+| prop | The v-model field of the form field is required when the form verification function is used | string | - |
+| rules | Define validation rules | FormItemRule [] | [] |
+| label-width | The width of the form item label. The default unit is `px` | number \| string | `90` |
+| label-align | Form item label alignment. The optional values are `center` `right` | string | `left` |
+| body-align | Default Solt box alignment. The optional values are `center` `right` | string | `left` |
+| error-message-align | Error prompt text alignment. The optional values are `center` and `right` | string | `left` |
+| show-error-line | Whether to mark the input box in red when the verification fails | boolean | `true` |
+| show-error-message | Whether to display the error prompt under the input box when the verification fails | boolean | `true` |
 
 ### FormItemRule data structure
 
 Use the `rules` attribute of FormItem to define verification rules. The optional attributes are as follows:
 
-| Attribute | Default                            | Type                                                    |
-| --------- | ---------------------------------- | ------------------------------------------------------- |
-| required  | Is it a required field             | boolean                                                 |
-| message   | Error prompt copy                  | string                                                  |
-| validator | Verification by function           | (value:string,rule?:FormItemRule) => boolean \| Promise |
-| regex     | Verification by regular expression | RegExp                                                  |
+| Attribute | Default | Type |
+| --- | --- | --- |
+| required | Is it a required field | boolean |
+| message | Error prompt copy | string |
+| validator | Verification by function | (value:string,rule?:FormItemRule) => boolean \| Promise |
+| regex | Verification by regular expression | RegExp |
 
 ### FormItem Slots
 
-| Name    | Description         |
-| ------- | ------------------- |
-| default | Default slot        |
-| label   | Custom `label` slot |
+| Name | Description |
+| --- | --- |
+| default | Default slot |
+| label | Custom `label` slot |
 
-```html
+```vue
 use slot
 <nut-form-item>
   <template #label>slot label</template>
@@ -484,11 +473,11 @@ use slot
 
 Use [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) to get Form instance and call instance methods.
 
-| Name     | Description                                                                                                       | Arguments                   | Return value |
-| -------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------- | ------------ |
-| submit   | Method of submitting form for verification                                                                        | -                           | -            |
-| reset    | Clear verification results                                                                                        | -                           | -            |
-| validate | Active trigger verification is used to trigger when the user customizes the scene, such as blur and change events | Same as FormItem prop value | -            |
+| Name | Description | Arguments | Return value |
+| --- | --- | --- | --- |
+| submit | Method of submitting form for verification | - | - |
+| reset | Clear verification results | - | - |
+| validate | Active trigger verification is used to trigger when the user customizes the scene, such as blur and change events | Same as FormItem prop value | - |
 
 ## Theming
 
@@ -496,18 +485,18 @@ Use [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) t
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                  | Default Value               |
-| ------------------------------------- | --------------------------- |
-| --nut-form-item-error-line-color      | _var(--nut-required-color)_ |
-| --nut-form-item-required-color        | _var(--nut-required-color)_ |
-| --nut-form-item-error-message-color   | _var(--nut-required-color)_ |
-| --nut-form-item-label-font-size       | _14px_                      |
-| --nut-form-item-label-width           | _90px_                      |
-| --nut-form-item-label-margin-right    | _10px_                      |
-| --nut-form-item-label-text-align      | _left_                      |
-| --nut-form-item-required-margin-right | _4px_                       |
-| --nut-form-item-body-font-size        | _14px_                      |
-| --nut-form-item-body-slots-text-align | _left_                      |
-| --nut-form-item-body-input-text-align | _left_                      |
-| --nut-form-item-tip-font-size         | _10px_                      |
-| --nut-form-item-tip-text-align        | _left_                      |
+| Name | Default Value |
+| --- | --- |
+| --nut-form-item-error-line-color | _var(--nut-required-color)_ |
+| --nut-form-item-required-color | _var(--nut-required-color)_ |
+| --nut-form-item-error-message-color | _var(--nut-required-color)_ |
+| --nut-form-item-label-font-size | _14px_ |
+| --nut-form-item-label-width | _90px_ |
+| --nut-form-item-label-margin-right | _10px_ |
+| --nut-form-item-label-text-align | _left_ |
+| --nut-form-item-required-margin-right | _4px_ |
+| --nut-form-item-body-font-size | _14px_ |
+| --nut-form-item-body-slots-text-align | _left_ |
+| --nut-form-item-body-input-text-align | _left_ |
+| --nut-form-item-tip-font-size | _10px_ |
+| --nut-form-item-tip-text-align | _left_ |
diff --git a/src/packages/__VUE/form/doc.md b/src/packages/__VUE/form/doc.md
index b14d8f5f4d..14e7e6f57a 100644
--- a/src/packages/__VUE/form/doc.md
+++ b/src/packages/__VUE/form/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Form, FormItem } from '@nutui/nutui';
 
@@ -19,7 +19,7 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form>
     <nut-form-item label="姓名">
@@ -39,19 +39,14 @@ app.use(FormItem);
     </nut-form-item>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const basicData = reactive({
-        name: '',
-        age: '',
-        tel: '',
-        address: ''
-      });
-      return { basicData };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const basicData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
 </script>
 ```
 
@@ -61,21 +56,21 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form :model-value="dynamicForm.state" ref="dynamicRefForm">
     <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
       <nut-input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
     </nut-form-item>
     <nut-form-item
-      :label="'联系方式'+index"
+      :label="'联系方式' + index"
       :prop="'tels.' + index + '.value'"
       required
-      :rules="[{ required: true, message: '请填写联系方式'+index }]"
+      :rules="[{ required: true, message: '请填写联系方式' + index }]"
       :key="item.key"
-      v-for="(item,index) in dynamicForm.state.tels"
+      v-for="(item, index) in dynamicForm.state.tels"
     >
-      <nut-input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式'+index" type="text" />
+      <nut-input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式' + index" type="text" />
     </nut-form-item>
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
@@ -87,54 +82,44 @@ app.use(FormItem);
     </nut-cell>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const dynamicRefForm = ref<any>(null);
-      const dynamicForm = {
-        state: reactive({
-          name: '',
-          tels: new Array({
-            key: 1,
-            value: ''
-          })
-        }),
-
-        methods: {
-          submit() {
-            dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
-              if (valid) {
-                console.log('success', dynamicForm);
-              } else {
-                showToast.warn(errors[0].message);
-                console.log('error submit!!', errors);
-              }
-            });
-          },
-          reset() {
-            dynamicRefForm.value.reset();
-          },
-          remove() {
-            dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
-          },
-          add() {
-            let newIndex = dynamicForm.state.tels.length;
-            dynamicForm.state.tels.push({
-              key: Date.now(),
-              value: ''
-            });
-          }
+<script setup>
+import { ref, reactive } from 'vue';
+const dynamicRefForm = ref(null);
+const dynamicForm = {
+  state: reactive({
+    name: '',
+    tels: new Array({
+      key: 1,
+      value: ''
+    })
+  }),
+
+  methods: {
+    submit() {
+      dynamicRefForm.value.validate().then(({ valid, errors }) => {
+        if (valid) {
+          console.log('success', dynamicForm);
+        } else {
+          showToast.warn(errors[0].message);
+          console.log('error submit!!', errors);
         }
-      };
-      return {
-        dynamicForm,
-        dynamicRefForm
-      };
+      });
+    },
+    reset() {
+      dynamicRefForm.value.reset();
+    },
+    remove() {
+      dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
+    },
+    add() {
+      let newIndex = dynamicForm.state.tels.length;
+      dynamicForm.state.tels.push({
+        key: Date.now(),
+        value: ''
+      });
     }
-  };
+  }
+};
 </script>
 ```
 
@@ -148,14 +133,18 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form
     :model-value="formData"
-    :rules="{name: [{
-            message: 'name 至少两个字符',
-            validator: nameLengthValidator
-          }]}"
+    :rules="{
+      name: [
+        {
+          message: 'name 至少两个字符',
+          validator: nameLengthValidator
+        }
+      ]
+    }"
     ref="ruleForm"
   >
     <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
@@ -172,11 +161,11 @@ app.use(FormItem);
       prop="age"
       required
       :rules="[
-      { required: true, message: '请填写年龄' },
-      { validator: customValidator, message: '必须输入数字' },
-      { validator: customRulePropValidator, message: '必须输入数字', reg: /^\d+$/ },
-      { regex: /^(\d{1,2}|1\d{2}|200)$/, message: '必须输入0-200区间' }
-    ]"
+        { required: true, message: '请填写年龄' },
+        { validator: customValidator, message: '必须输入数字' },
+        { validator: customRulePropValidator, message: '必须输入数字', reg: /^\d+$/ },
+        { regex: /^(\d{1,2}|1\d{2}|200)$/, message: '必须输入0-200区间' }
+      ]"
     >
       <nut-input
         class="nut-input-text"
@@ -190,9 +179,9 @@ app.use(FormItem);
       prop="tel"
       required
       :rules="[
-      { required: true, message: '请填写联系电话' },
-      { validator: asyncValidator, message: '电话格式不正确' }
-    ]"
+        { required: true, message: '请填写联系电话' },
+        { validator: asyncValidator, message: '电话格式不正确' }
+      ]"
     >
       <nut-input
         class="nut-input-text"
@@ -210,98 +199,80 @@ app.use(FormItem);
     </nut-cell>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const formData = reactive({
-        name: '',
-        age: '',
-        tel: '',
-        address: ''
-      });
-      const reset = () => {
-        ruleForm.value.reset();
-      };
-      const validate = (item: any) => {
-        console.log(item);
-      };
-      const ruleForm = ref<any>(null);
-
-      const submit = () => {
-        ruleForm.value.validate().then(({ valid, errors }: any) => {
-          if (valid) {
-            console.log('success', formData);
-          } else {
-            console.log('error submit!!', errors);
-          }
-        });
-      };
-      // 失去焦点校验
-      const customBlurValidate = (prop: string) => {
-        ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
-          if (valid) {
-            console.log('success', formData);
-          } else {
-            console.log('error submit!!', errors);
-          }
-        });
-      };
-      // 函数校验
-      const customValidator = (val: string) => {
-        if (/^\d+$/.test(val)) {
-          return Promise.resolve();
-        } else {
-          return Promise.reject('必须输入数字');
-        }
-      };
-      const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
-        if ((rule?.reg as RegExp).test(val)) {
-          return Promise.resolve();
-        } else {
-          return Promise.reject('必须输入数字');
-        }
-      };
-      const nameLengthValidator = (val: string) => {
-        if (val.length > 2) {
-          return Promise.resolve();
-        } else {
-          return Promise.reject('名称两个字以上');
-        }
-      };
-      // Promise 异步校验
-      const asyncValidator = (val: string) => {
-        const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
-        return new Promise((resolve, reject) => {
-          showToast.loading('模拟异步验证中...');
-          setTimeout(() => {
-            showToast.hide();
-            if (!val) {
-              reject('请输入联系电话');
-            } else if (!telReg.test(val)) {
-              reject('联系电话格式不正确');
-            } else {
-              resolve('');
-            }
-          }, 1000);
-        });
-      };
-      return {
-        ruleForm,
-        formData,
-        validate,
-        customValidator,
-        customRulePropValidator,
-        nameLengthValidator,
-        asyncValidator,
-        customBlurValidate,
-        submit,
-        reset
-      };
+<script setup>
+import { ref, reactive } from 'vue';
+const formData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
+const reset = () => {
+  ruleForm.value.reset();
+};
+const validate = (item) => {
+  console.log(item);
+};
+const ruleForm = ref(null);
+
+const submit = () => {
+  ruleForm.value.validate().then(({ valid, errors }) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
     }
-  };
+  });
+};
+// 失去焦点校验
+const customBlurValidate = (prop) => {
+  ruleForm.value.validate(prop).then(({ valid, errors }) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
+    }
+  });
+};
+// 函数校验
+const customValidator = (val) => {
+  if (/^\d+$/.test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const customRulePropValidator = (val, rule) => {
+  if ((rule?.reg).test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const nameLengthValidator = (val) => {
+  if (val.length > 2) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('名称两个字以上');
+  }
+};
+// Promise 异步校验
+const asyncValidator = (val) => {
+  const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
+  return new Promise((resolve, reject) => {
+    showToast.loading('模拟异步验证中...');
+    setTimeout(() => {
+      showToast.hide();
+      if (!val) {
+        reject('请输入联系电话');
+      } else if (!telReg.test(val)) {
+        reject('联系电话格式不正确');
+      } else {
+        resolve('');
+      }
+    }, 1000);
+  });
+};
 </script>
 ```
 
@@ -311,7 +282,7 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form>
     <nut-form-item label="开关">
@@ -368,77 +339,72 @@ app.use(FormItem);
     </nut-form-item>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const formData2 = reactive({
-        switch: false,
-        checkbox: false,
-        radio: 0,
-        number: 0,
-        rate: 3,
-        range: 30,
-        address: '',
-        defaultFileList: [
-          {
-            name: '文件1.png',
-            url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-            status: 'success',
-            message: '上传成功',
-            type: 'image'
-          },
-          {
-            name: '文件2.png',
-            url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-            status: 'uploading',
-            message: '上传中...',
-            type: 'image'
-          }
-        ]
-      });
-
-      const addressModule = reactive({
-        state: {
-          show: false,
-          province: [
-            { id: 1, name: '北京' },
-            { id: 2, name: '广西' },
-            { id: 3, name: '江西' },
-            { id: 4, name: '四川' }
-          ],
-          city: [
-            { id: 7, name: '朝阳区' },
-            { id: 8, name: '崇文区' },
-            { id: 9, name: '昌平区' },
-            { id: 6, name: '石景山区' }
-          ],
-          country: [
-            { id: 3, name: '八里庄街道' },
-            { id: 9, name: '北苑' },
-            { id: 4, name: '常营乡' }
-          ],
-          town: []
-        },
-        methods: {
-          show() {
-            addressModule.state.show = !addressModule.state.show;
-            if (addressModule.state.show) {
-              formData2.address = '';
-            }
-          },
-          onChange({ custom, next, value }: any) {
-            formData2.address += value.name;
-            const name = addressModule.state[next];
-            if (name.length < 1) {
-              addressModule.state.show = false;
-            }
-          }
-        }
-      });
-      return { formData2, addressModule };
+<script setup>
+import { ref, reactive } from 'vue';
+const formData2 = reactive({
+  switch: false,
+  checkbox: false,
+  radio: 0,
+  number: 0,
+  rate: 3,
+  range: 30,
+  address: '',
+  defaultFileList: [
+    {
+      name: '文件1.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'success',
+      message: '上传成功',
+      type: 'image'
+    },
+    {
+      name: '文件2.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'uploading',
+      message: '上传中...',
+      type: 'image'
+    }
+  ]
+});
+
+const addressModule = reactive({
+  state: {
+    show: false,
+    province: [
+      { id: 1, name: '北京' },
+      { id: 2, name: '广西' },
+      { id: 3, name: '江西' },
+      { id: 4, name: '四川' }
+    ],
+    city: [
+      { id: 7, name: '朝阳区' },
+      { id: 8, name: '崇文区' },
+      { id: 9, name: '昌平区' },
+      { id: 6, name: '石景山区' }
+    ],
+    country: [
+      { id: 3, name: '八里庄街道' },
+      { id: 9, name: '北苑' },
+      { id: 4, name: '常营乡' }
+    ],
+    town: []
+  },
+  methods: {
+    show() {
+      addressModule.state.show = !addressModule.state.show;
+      if (addressModule.state.show) {
+        formData2.address = '';
+      }
+    },
+    onChange({ custom, next, value }) {
+      formData2.address += value.name;
+      const name = addressModule.state[next];
+      if (name.length < 1) {
+        addressModule.state.show = false;
+      }
     }
-  };
+  }
+});
 </script>
 ```
 
@@ -448,50 +414,50 @@ app.use(FormItem);
 
 ### Form Props
 
-| 参数        | 说明                                 | 类型                     | 默认值 |
-| ----------- | ------------------------------------ | ------------------------ | ------ |
-| model-value | 表单数据对象(使用表单校验时，_必填_) | object                   |        |
-| rules       | 统一配置每个 `FormItem` 的 `rules`   | { prop: FormItemRule[] } | `{}`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| model-value | 表单数据对象(使用表单校验时，_必填_) | object |  |
+| rules | 统一配置每个 `FormItem` 的 `rules` | { prop: FormItemRule[] } | `{}` |
 
 ### Form Events
 
-| 事件名   | 说明                       | 回调参数                                                     |
-| -------- | -------------------------- | ------------------------------------------------------------ |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | validate | 任一表单项被校验失败后触发 | 被校验的表单项 `prop` 值，校验是否通过，错误消息（如果存在） |
 
 ### FormItem Props
 
-| 参数                | 说明                                                               | 类型             | 默认值  |
-| ------------------- | ------------------------------------------------------------------ | ---------------- | ------- |
-| required            | 是否显示必填字段的标签旁边的红色星号                               | boolean          | `false` |
-| prop                | 表单域 `v-model` 字段， 在使用表单校验功能的情况下，该属性是必填的 | string           | -       |
-| rules               | 定义校验规则                                                       | FormItemRule []  | []      |
-| label-width         | 表单项 `label` 宽度，默认单位为`px`                                | number \| string | `90`    |
-| label-align         | 表单项 `label` 对齐方式，可选值为 `center` `right`                 | string           | `left`  |
-| body-align          | 右侧插槽对齐方式，可选值为 `center` `right`                        | string           | `left`  |
-| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right`                    | string           | `left`  |
-| show-error-line     | 是否在校验不通过时标红输入框                                       | boolean          | `true`  |
-| show-error-message  | 是否在校验不通过时在输入框下方展示错误提示                         | boolean          | `true`  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| required | 是否显示必填字段的标签旁边的红色星号 | boolean | `false` |
+| prop | 表单域 `v-model` 字段， 在使用表单校验功能的情况下，该属性是必填的 | string | - |
+| rules | 定义校验规则 | FormItemRule [] | [] |
+| label-width | 表单项 `label` 宽度，默认单位为`px` | number \| string | `90` |
+| label-align | 表单项 `label` 对齐方式，可选值为 `center` `right` | string | `left` |
+| body-align | 右侧插槽对齐方式，可选值为 `center` `right` | string | `left` |
+| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | string | `left` |
+| show-error-line | 是否在校验不通过时标红输入框 | boolean | `true` |
+| show-error-message | 是否在校验不通过时在输入框下方展示错误提示 | boolean | `true` |
 
 ### FormItemRule 数据结构
 
 使用 `FormItem` 的 `rules` 属性可以定义校验规则，可选属性如下:
 
-| 键名      | 说明                   | 类型                                                      |
-| --------- | ---------------------- | --------------------------------------------------------- |
-| required  | 是否为必选字段         | boolean                                                   |
-| message   | 错误提示文案           | string                                                    |
-| validator | 通过函数进行校验       | (value:string, rule?:FormItemRule ) => boolean \| Promise |
-| regex     | 通过正则表达式进行校验 | RegExp                                                    |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| required | 是否为必选字段 | boolean |
+| message | 错误提示文案 | string |
+| validator | 通过函数进行校验 | (value:string, rule?:FormItemRule ) => boolean \| Promise |
+| regex | 通过正则表达式进行校验 | RegExp |
 
 ### FormItem Slots
 
-| 名称    | 说明                |
-| ------- | ------------------- |
-| default | 自定义内容          |
-| label   | 自定义 `label` 区域 |
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义内容 |
+| label | 自定义 `label` 区域 |
 
-```html
+```vue
 插槽使用方式
 <nut-form-item>
   <template #label>slot label</template>
@@ -502,11 +468,11 @@ app.use(FormItem);
 
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 `Form` 实例并调用实例方法
 
-| 方法名   | 说明                                                                   | 参数                                          | 返回值 |
-| -------- | ---------------------------------------------------------------------- | --------------------------------------------- | ------ |
-| submit   | 提交表单进行校验的方法                                                 | -                                             | -      |
-| reset    | 清空校验结果                                                           | -                                             | -      |
-| validate | 用户主动触发校验，用于用户自定义场景时触发，例如 `blur`、`change` 事件 | 同 `FormItem prop` 值,不传值会校验全部 `Rule` | -      |
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| submit | 提交表单进行校验的方法 | - | - |
+| reset | 清空校验结果 | - | - |
+| validate | 用户主动触发校验，用于用户自定义场景时触发，例如 `blur`、`change` 事件 | 同 `FormItem prop` 值,不传值会校验全部 `Rule` | - |
 
 ## 主题定制
 
@@ -514,18 +480,18 @@ app.use(FormItem);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                  | 默认值                      |
-| ------------------------------------- | --------------------------- |
-| --nut-form-item-error-line-color      | _var(--nut-required-color)_ |
-| --nut-form-item-required-color        | _var(--nut-required-color)_ |
-| --nut-form-item-error-message-color   | _var(--nut-required-color)_ |
-| --nut-form-item-label-font-size       | _14px_                      |
-| --nut-form-item-label-width           | _90px_                      |
-| --nut-form-item-label-margin-right    | _10px_                      |
-| --nut-form-item-label-text-align      | _left_                      |
-| --nut-form-item-required-margin-right | _4px_                       |
-| --nut-form-item-body-font-size        | _14px_                      |
-| --nut-form-item-body-slots-text-align | _left_                      |
-| --nut-form-item-body-input-text-align | _left_                      |
-| --nut-form-item-tip-font-size         | _10px_                      |
-| --nut-form-item-tip-text-align        | _left_                      |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-form-item-error-line-color | _var(--nut-required-color)_ |
+| --nut-form-item-required-color | _var(--nut-required-color)_ |
+| --nut-form-item-error-message-color | _var(--nut-required-color)_ |
+| --nut-form-item-label-font-size | _14px_ |
+| --nut-form-item-label-width | _90px_ |
+| --nut-form-item-label-margin-right | _10px_ |
+| --nut-form-item-label-text-align | _left_ |
+| --nut-form-item-required-margin-right | _4px_ |
+| --nut-form-item-body-font-size | _14px_ |
+| --nut-form-item-body-slots-text-align | _left_ |
+| --nut-form-item-body-input-text-align | _left_ |
+| --nut-form-item-tip-font-size | _10px_ |
+| --nut-form-item-tip-text-align | _left_ |
diff --git a/src/packages/__VUE/form/doc.taro.md b/src/packages/__VUE/form/doc.taro.md
index 3136134ebc..4066d5452b 100644
--- a/src/packages/__VUE/form/doc.taro.md
+++ b/src/packages/__VUE/form/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Form, FormItem } from '@nutui/nutui-taro';
 
@@ -19,7 +19,7 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form>
     <nut-form-item label="姓名">
@@ -39,19 +39,14 @@ app.use(FormItem);
     </nut-form-item>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const basicData = reactive({
-        name: '',
-        age: '',
-        tel: '',
-        address: ''
-      });
-      return { basicData };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const basicData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
 </script>
 ```
 
@@ -61,21 +56,21 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form :model-value="dynamicForm.state" ref="dynamicRefForm">
     <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
       <nut-input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
     </nut-form-item>
     <nut-form-item
-      :label="'联系方式'+index"
+      :label="'联系方式' + index"
       :prop="'tels.' + index + '.value'"
       required
-      :rules="[{ required: true, message: '请填写联系方式'+index }]"
+      :rules="[{ required: true, message: '请填写联系方式' + index }]"
       :key="item.key"
-      v-for="(item,index) in dynamicForm.state.tels"
+      v-for="(item, index) in dynamicForm.state.tels"
     >
-      <nut-input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式'+index" type="text" />
+      <nut-input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式' + index" type="text" />
     </nut-form-item>
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
@@ -87,52 +82,44 @@ app.use(FormItem);
     </nut-cell>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const dynamicRefForm = ref<any>(null);
-      const dynamicForm = {
-        state: reactive({
-          name: '',
-          tels: new Array({
-            key: 1,
-            value: ''
-          })
-        }),
-
-        methods: {
-          submit() {
-            dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
-              if (valid) {
-                console.log('success', dynamicForm);
-              } else {
-                console.log(errors[0].message);
-                console.log('error submit!!', errors);
-              }
-            });
-          },
-          reset() {
-            dynamicRefForm.value.reset();
-          },
-          remove() {
-            dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
-          },
-          add() {
-            let newIndex = dynamicForm.state.tels.length;
-            dynamicForm.state.tels.push({
-              key: Date.now(),
-              value: ''
-            });
-          }
+<script setup>
+import { ref, reactive } from 'vue';
+const dynamicRefForm = ref(null);
+const dynamicForm = {
+  state: reactive({
+    name: '',
+    tels: new Array({
+      key: 1,
+      value: ''
+    })
+  }),
+
+  methods: {
+    submit() {
+      dynamicRefForm.value.validate().then(({ valid, errors }) => {
+        if (valid) {
+          console.log('success', dynamicForm);
+        } else {
+          showToast.warn(errors[0].message);
+          console.log('error submit!!', errors);
         }
-      };
-      return {
-        dynamicForm,
-        dynamicRefForm
-      };
+      });
+    },
+    reset() {
+      dynamicRefForm.value.reset();
+    },
+    remove() {
+      dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
+    },
+    add() {
+      let newIndex = dynamicForm.state.tels.length;
+      dynamicForm.state.tels.push({
+        key: Date.now(),
+        value: ''
+      });
     }
-  };
+  }
+};
 </script>
 ```
 
@@ -146,14 +133,18 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form
     :model-value="formData"
-    :rules="{name: [{
-            message: 'name 至少两个字符',
-            validator: nameLengthValidator
-          }]}"
+    :rules="{
+      name: [
+        {
+          message: 'name 至少两个字符',
+          validator: nameLengthValidator
+        }
+      ]
+    }"
     ref="ruleForm"
   >
     <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
@@ -170,11 +161,11 @@ app.use(FormItem);
       prop="age"
       required
       :rules="[
-      { required: true, message: '请填写年龄' },
-      { validator: customValidator, message: '必须输入数字' },
-      { validator: customRulePropValidator, message: '必须输入数字', reg: /^\d+$/ },
-      { regex: /^(\d{1,2}|1\d{2}|200)$/, message: '必须输入0-200区间' }
-    ]"
+        { required: true, message: '请填写年龄' },
+        { validator: customValidator, message: '必须输入数字' },
+        { validator: customRulePropValidator, message: '必须输入数字', reg: /^\d+$/ },
+        { regex: /^(\d{1,2}|1\d{2}|200)$/, message: '必须输入0-200区间' }
+      ]"
     >
       <nut-input
         class="nut-input-text"
@@ -188,9 +179,9 @@ app.use(FormItem);
       prop="tel"
       required
       :rules="[
-      { required: true, message: '请填写联系电话' },
-      { validator: asyncValidator, message: '电话格式不正确' }
-    ]"
+        { required: true, message: '请填写联系电话' },
+        { validator: asyncValidator, message: '电话格式不正确' }
+      ]"
     >
       <nut-input
         class="nut-input-text"
@@ -208,96 +199,80 @@ app.use(FormItem);
     </nut-cell>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const formData = reactive({
-        name: '',
-        age: '',
-        tel: '',
-        address: ''
-      });
-      const reset = () => {
-        ruleForm.value.reset();
-      };
-      const validate = (item: any) => {
-        console.log(item);
-      };
-      const ruleForm = ref<any>(null);
-
-      const submit = () => {
-        ruleForm.value.validate().then(({ valid, errors }: any) => {
-          if (valid) {
-            console.log('success', formData);
-          } else {
-            console.log('error submit!!', errors);
-          }
-        });
-      };
-      // 失去焦点校验
-      const customBlurValidate = (prop: string) => {
-        ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
-          if (valid) {
-            console.log('success', formData);
-          } else {
-            console.log('error submit!!', errors);
-          }
-        });
-      };
-      // 函数校验
-      const customValidator = (val: string) => {
-        if (/^\d+$/.test(val)) {
-          return Promise.resolve();
-        } else {
-          return Promise.reject('必须输入数字');
-        }
-      };
-      const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
-        if ((rule?.reg as RegExp).test(val)) {
-          return Promise.resolve();
-        } else {
-          return Promise.reject('必须输入数字');
-        }
-      };
-      const nameLengthValidator = (val: string) => {
-        if (val.length > 2) {
-          return Promise.resolve();
-        } else {
-          return Promise.reject('名称两个字以上');
-        }
-      };
-      // Promise 异步校验
-      const asyncValidator = (val: string) => {
-        const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
-        return new Promise((resolve, reject) => {
-          showToast.loading('模拟异步验证中...');
-          setTimeout(() => {
-            showToast.hide();
-            if (!val) {
-              reject('请输入联系电话');
-            } else if (!telReg.test(val)) {
-              reject('联系电话格式不正确');
-            } else {
-              resolve('');
-            }
-          }, 1000);
-        });
-      };
-      return {
-        ruleForm,
-        formData,
-        validate,
-        customValidator,
-        customRulePropValidator,
-        nameLengthValidator,
-        asyncValidator,
-        customBlurValidate,
-        submit,
-        reset
-      };
+<script setup>
+import { ref, reactive } from 'vue';
+const formData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
+const reset = () => {
+  ruleForm.value.reset();
+};
+const validate = (item) => {
+  console.log(item);
+};
+const ruleForm = ref(null);
+
+const submit = () => {
+  ruleForm.value.validate().then(({ valid, errors }) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
     }
-  };
+  });
+};
+// 失去焦点校验
+const customBlurValidate = (prop) => {
+  ruleForm.value.validate(prop).then(({ valid, errors }) => {
+    if (valid) {
+      console.log('success', formData);
+    } else {
+      console.log('error submit!!', errors);
+    }
+  });
+};
+// 函数校验
+const customValidator = (val) => {
+  if (/^\d+$/.test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const customRulePropValidator = (val, rule) => {
+  if ((rule?.reg).test(val)) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('必须输入数字');
+  }
+};
+const nameLengthValidator = (val) => {
+  if (val.length > 2) {
+    return Promise.resolve();
+  } else {
+    return Promise.reject('名称两个字以上');
+  }
+};
+// Promise 异步校验
+const asyncValidator = (val) => {
+  const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
+  return new Promise((resolve, reject) => {
+    showToast.loading('模拟异步验证中...');
+    setTimeout(() => {
+      showToast.hide();
+      if (!val) {
+        reject('请输入联系电话');
+      } else if (!telReg.test(val)) {
+        reject('联系电话格式不正确');
+      } else {
+        resolve('');
+      }
+    }, 1000);
+  });
+};
 </script>
 ```
 
@@ -307,7 +282,7 @@ app.use(FormItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-form>
     <nut-form-item label="开关">
@@ -364,77 +339,72 @@ app.use(FormItem);
     </nut-form-item>
   </nut-form>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const formData2 = reactive({
-        switch: false,
-        checkbox: false,
-        radio: 0,
-        number: 0,
-        rate: 3,
-        range: 30,
-        address: '',
-        defaultFileList: [
-          {
-            name: '文件1.png',
-            url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-            status: 'success',
-            message: '上传成功',
-            type: 'image'
-          },
-          {
-            name: '文件2.png',
-            url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-            status: 'uploading',
-            message: '上传中...',
-            type: 'image'
-          }
-        ]
-      });
-
-      const addressModule = reactive({
-        state: {
-          show: false,
-          province: [
-            { id: 1, name: '北京' },
-            { id: 2, name: '广西' },
-            { id: 3, name: '江西' },
-            { id: 4, name: '四川' }
-          ],
-          city: [
-            { id: 7, name: '朝阳区' },
-            { id: 8, name: '崇文区' },
-            { id: 9, name: '昌平区' },
-            { id: 6, name: '石景山区' }
-          ],
-          country: [
-            { id: 3, name: '八里庄街道' },
-            { id: 9, name: '北苑' },
-            { id: 4, name: '常营乡' }
-          ],
-          town: []
-        },
-        methods: {
-          show() {
-            addressModule.state.show = !addressModule.state.show;
-            if (addressModule.state.show) {
-              formData2.address = '';
-            }
-          },
-          onChange({ custom, next, value }: any) {
-            formData2.address += value.name;
-            const name = addressModule.state[next];
-            if (name.length < 1) {
-              addressModule.state.show = false;
-            }
-          }
-        }
-      });
-      return { formData2, addressModule };
+<script setup>
+import { ref, reactive } from 'vue';
+const formData2 = reactive({
+  switch: false,
+  checkbox: false,
+  radio: 0,
+  number: 0,
+  rate: 3,
+  range: 30,
+  address: '',
+  defaultFileList: [
+    {
+      name: '文件1.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'success',
+      message: '上传成功',
+      type: 'image'
+    },
+    {
+      name: '文件2.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'uploading',
+      message: '上传中...',
+      type: 'image'
+    }
+  ]
+});
+
+const addressModule = reactive({
+  state: {
+    show: false,
+    province: [
+      { id: 1, name: '北京' },
+      { id: 2, name: '广西' },
+      { id: 3, name: '江西' },
+      { id: 4, name: '四川' }
+    ],
+    city: [
+      { id: 7, name: '朝阳区' },
+      { id: 8, name: '崇文区' },
+      { id: 9, name: '昌平区' },
+      { id: 6, name: '石景山区' }
+    ],
+    country: [
+      { id: 3, name: '八里庄街道' },
+      { id: 9, name: '北苑' },
+      { id: 4, name: '常营乡' }
+    ],
+    town: []
+  },
+  methods: {
+    show() {
+      addressModule.state.show = !addressModule.state.show;
+      if (addressModule.state.show) {
+        formData2.address = '';
+      }
+    },
+    onChange({ custom, next, value }) {
+      formData2.address += value.name;
+      const name = addressModule.state[next];
+      if (name.length < 1) {
+        addressModule.state.show = false;
+      }
     }
-  };
+  }
+});
 </script>
 ```
 
@@ -444,50 +414,50 @@ app.use(FormItem);
 
 ### Form Props
 
-| 参数        | 说明                                 | 类型                     | 默认值 |
-| ----------- | ------------------------------------ | ------------------------ | ------ |
-| model-value | 表单数据对象(使用表单校验时，_必填_) | object                   |        |
-| rules       | 统一配置每个 `FormItem` 的 `rules`   | { prop: FormItemRule[] } | `{}`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| model-value | 表单数据对象(使用表单校验时，_必填_) | object |  |
+| rules | 统一配置每个 `FormItem` 的 `rules` | { prop: FormItemRule[] } | `{}` |
 
 ### Form Events
 
-| 事件名   | 说明                       | 回调参数                                                     |
-| -------- | -------------------------- | ------------------------------------------------------------ |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | validate | 任一表单项被校验失败后触发 | 被校验的表单项 `prop` 值，校验是否通过，错误消息（如果存在） |
 
 ### FormItem Props
 
-| 参数                | 说明                                                               | 类型             | 默认值  |
-| ------------------- | ------------------------------------------------------------------ | ---------------- | ------- |
-| required            | 是否显示必填字段的标签旁边的红色星号                               | boolean          | `false` |
-| prop                | 表单域 `v-model` 字段， 在使用表单校验功能的情况下，该属性是必填的 | string           | `-`     |
-| rules               | 定义校验规则                                                       | FormItemRule []  | `[]`    |
-| label-width         | 表单项 `label` 宽度，默认单位为`px`                                | number \| string | `90`    |
-| label-align         | 表单项 `label` 对齐方式，可选值为 `center` `right`                 | string           | `left`  |
-| body-align          | 右侧插槽对齐方式，可选值为 `center` `right`                        | string           | `left`  |
-| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right`                    | string           | `left`  |
-| show-error-line     | 是否在校验不通过时标红输入框                                       | boolean          | `true`  |
-| show-error-message  | 是否在校验不通过时在输入框下方展示错误提示                         | boolean          | `true`  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| required | 是否显示必填字段的标签旁边的红色星号 | boolean | `false` |
+| prop | 表单域 `v-model` 字段， 在使用表单校验功能的情况下，该属性是必填的 | string | - |
+| rules | 定义校验规则 | FormItemRule [] | [] |
+| label-width | 表单项 `label` 宽度，默认单位为`px` | number \| string | `90` |
+| label-align | 表单项 `label` 对齐方式，可选值为 `center` `right` | string | `left` |
+| body-align | 右侧插槽对齐方式，可选值为 `center` `right` | string | `left` |
+| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | string | `left` |
+| show-error-line | 是否在校验不通过时标红输入框 | boolean | `true` |
+| show-error-message | 是否在校验不通过时在输入框下方展示错误提示 | boolean | `true` |
 
 ### FormItemRule 数据结构
 
-使用 FormItem 的`rules`属性可以定义校验规则，可选属性如下:
+使用 `FormItem` 的 `rules` 属性可以定义校验规则，可选属性如下:
 
-| 键名      | 说明                   | 类型                                                      |
-| --------- | ---------------------- | --------------------------------------------------------- |
-| required  | 是否为必选字段         | boolean                                                   |
-| message   | 错误提示文案           | string                                                    |
-| validator | 通过函数进行校验       | (value:string, rule?:FormItemRule ) => boolean \| Promise |
-| regex     | 通过正则表达式进行校验 | RegExp                                                    |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| required | 是否为必选字段 | boolean |
+| message | 错误提示文案 | string |
+| validator | 通过函数进行校验 | (value:string, rule?:FormItemRule ) => boolean \| Promise |
+| regex | 通过正则表达式进行校验 | RegExp |
 
 ### FormItem Slots
 
-| 名称    | 说明                |
-| ------- | ------------------- |
-| default | 自定义内容          |
-| label   | 自定义 `label` 区域 |
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义内容 |
+| label | 自定义 `label` 区域 |
 
-```html
+```vue
 插槽使用方式
 <nut-form-item>
   <template #label>slot label</template>
@@ -496,13 +466,13 @@ app.use(FormItem);
 
 ### Methods
 
-通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 Form 实例并调用实例方法
+通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 `Form` 实例并调用实例方法
 
-| 方法名   | 说明                                                                   | 参数                                          | 返回值 |
-| -------- | ---------------------------------------------------------------------- | --------------------------------------------- | ------ |
-| submit   | 提交表单进行校验的方法                                                 | -                                             | -      |
-| reset    | 清空校验结果                                                           | -                                             | -      |
-| validate | 用户主动触发校验，用于用户自定义场景时触发，例如 `blur`、`change` 事件 | 同 `FormItem prop` 值,不传值会校验全部 `Rule` | -      |
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| submit | 提交表单进行校验的方法 | - | - |
+| reset | 清空校验结果 | - | - |
+| validate | 用户主动触发校验，用于用户自定义场景时触发，例如 `blur`、`change` 事件 | 同 `FormItem prop` 值,不传值会校验全部 `Rule` | - |
 
 ## 主题定制
 
@@ -510,18 +480,18 @@ app.use(FormItem);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                  | 默认值                      |
-| ------------------------------------- | --------------------------- |
-| --nut-form-item-error-line-color      | _var(--nut-required-color)_ |
-| --nut-form-item-required-color        | _var(--nut-required-color)_ |
-| --nut-form-item-error-message-color   | _var(--nut-required-color)_ |
-| --nut-form-item-label-font-size       | _14px_                      |
-| --nut-form-item-label-width           | _90px_                      |
-| --nut-form-item-label-margin-right    | _10px_                      |
-| --nut-form-item-label-text-align      | _left_                      |
-| --nut-form-item-required-margin-right | _4px_                       |
-| --nut-form-item-body-font-size        | _14px_                      |
-| --nut-form-item-body-slots-text-align | _left_                      |
-| --nut-form-item-body-input-text-align | _left_                      |
-| --nut-form-item-tip-font-size         | _10px_                      |
-| --nut-form-item-tip-text-align        | _left_                      |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-form-item-error-line-color | _var(--nut-required-color)_ |
+| --nut-form-item-required-color | _var(--nut-required-color)_ |
+| --nut-form-item-error-message-color | _var(--nut-required-color)_ |
+| --nut-form-item-label-font-size | _14px_ |
+| --nut-form-item-label-width | _90px_ |
+| --nut-form-item-label-margin-right | _10px_ |
+| --nut-form-item-label-text-align | _left_ |
+| --nut-form-item-required-margin-right | _4px_ |
+| --nut-form-item-body-font-size | _14px_ |
+| --nut-form-item-body-slots-text-align | _left_ |
+| --nut-form-item-body-input-text-align | _left_ |
+| --nut-form-item-tip-font-size | _10px_ |
+| --nut-form-item-tip-text-align | _left_ |
diff --git a/src/packages/__VUE/inputnumber/doc.en-US.md b/src/packages/__VUE/inputnumber/doc.en-US.md
index ca3b02d705..8ae531cfd4 100644
--- a/src/packages/__VUE/inputnumber/doc.en-US.md
+++ b/src/packages/__VUE/inputnumber/doc.en-US.md
@@ -6,7 +6,7 @@ Control the number increase or decrease by clicking the button.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { InputNumber } from '@nutui/nutui';
 
@@ -20,18 +20,13 @@ Initialize a default value
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -43,18 +38,13 @@ Set step `step` 5
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" step="5" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -66,18 +56,13 @@ Set step `step` 5
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" min="10" max="20" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(10);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(10);
 </script>
 ```
 
@@ -89,18 +74,13 @@ Set step `step` 5
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" disabled />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -112,18 +92,13 @@ Set step `step` 5
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" readonly />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -135,18 +110,13 @@ Set step size `step` 0.1 `decimal places` keep 1 decimal place
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" step="0.1" decimal-places="1" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -158,29 +128,21 @@ Asynchronous modification through `change` event and `model-value`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number :model-value="value" @change="onChange" />
 </template>
-<script lang="ts">
-  import { reactive, getCurrentInstance, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        value: 1
-      });
-      const onChange = (value: number) => {
-        showToast.loading('Asynchronous presentation changes in 2 seconds');
-        setTimeout(() => {
-          state.value = value;
-          showToast.hide();
-        }, 2000);
-      };
-      return { ...toRefs(state), onChange };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(1);
+const onChange = (value) => {
+  showToast.loading('Asynchronous presentation changes in 2 seconds');
+  setTimeout(() => {
+    state.value = value;
+    showToast.hide();
+  }, 2000);
+};
 </script>
 ```
 
@@ -190,18 +152,13 @@ Asynchronous modification through `change` event and `model-value`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" button-size="30" input-width="50" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -211,7 +168,7 @@ Asynchronous modification through `change` event and `model-value`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value">
     <template #left-icon>
@@ -222,16 +179,10 @@ Asynchronous modification through `change` event and `model-value`
     </template>
   </nut-input-number>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { Left, Right } from '@nutui/icons-vue';
-  export default {
-    components: { Left, Right },
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Left, Right } from '@nutui/icons-vue';
+const value = ref(1);
 </script>
 ```
 
@@ -241,35 +192,35 @@ Asynchronous modification through `change` event and `model-value`
 
 ### Props
 
-| Attribute      | Description                                            | Type             | Default |
-| -------------- | ------------------------------------------------------ | ---------------- | ------- |
-| v-model        | Initial value                                          | string \| number | -       |
-| input-width    | Input box width                                        | string           | ``      |
-| button-size    | Operators +, - Dimensions                              | string           | ``      |
-| min            | Minimum limit                                          | string \| number | `1`     |
-| max            | Maximum limit                                          | string \| number | `9999`  |
-| step           | step                                                   | string \| number | `1`     |
-| decimal-places | Set reserved decimal places                            | string \| number | `0`     |
-| disabled       | Disable all features                                   | boolean          | `false` |
-| readonly       | Read only status disables input box operation behavior | boolean          | `false` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Initial value | string \| number | - |
+| input-width | Input box width | string | `` |
+| button-size | Operators +, - Dimensions | string | `` |
+| min | Minimum limit | string \| number | `1` |
+| max | Maximum limit | string \| number | `9999` |
+| step | step | string \| number | `1` |
+| decimal-places | Set reserved decimal places | string \| number | `0` |
+| disabled | Disable all features | boolean | `false` |
+| readonly | Read only status disables input box operation behavior | boolean | `false` |
 
 ### Slots
 
-| Name       | Description       |
-| ---------- | ----------------- |
-| left-icon  | Custom left icon  |
+| Name | Description |
+| --- | --- |
+| left-icon | Custom left icon |
 | right-icon | Custom right icon |
 
 ### Events
 
-| Event     | Description                                     | Arguments                                  |
-| --------- | ----------------------------------------------- | ------------------------------------------ |
-| add       | Triggered when the Add button is clicked        | `event: Event `                            |
-| reduce    | Triggered when the decrease button is clicked   | `event: Event`                             |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| add | Triggered when the Add button is clicked | `event: Event ` |
+| reduce | Triggered when the decrease button is clicked | `event: Event` |
 | overlimit | Triggered when an unavailable button is clicked | `event: Event,type:string (reduce or add)` |
-| change    | Triggered when the value changes                | `value:  number , event : Event `          |
-| blur      | Triggered when the input box blur               | `event: Event`                             |
-| focus     | Triggered when the input box focus              | `event: Event `                            |
+| change | Triggered when the value changes | `value:  number , event : Event ` |
+| blur | Triggered when the input box blur | `event: Event` |
+| focus | Triggered when the input box focus | `event: Event ` |
 
 ## Theming
 
@@ -277,21 +228,21 @@ Asynchronous modification through `change` event and `model-value`
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                     | Default Value              |
-| ---------------------------------------- | -------------------------- |
-| --nut-inputnumber-icon-color             | _var(--nut-title-color)_   |
-| --nut-inputnumber-icon-void-color        | _var(--nut-disable-color)_ |
-| --nut-inputnumber-icon-size              | _20px_                     |
-| --nut-inputnumber-input-width            | _40px_                     |
-| --nut-inputnumber-input-font-size        | _12px_                     |
-| --nut-inputnumber-input-font-color       | _var(--nut-title-color)_   |
-| --nut-inputnumber-input-background-color | _var(--nut-help-color)_    |
-| --nut-inputnumber-input-border-radius    | _4px_                      |
-| --nut-inputnumber-input-margin           | _0 6px_                    |
-| --nut-inputnumber-input-border           | _0_                        |
-| --nut-inputnumber-border                 | _0_                        |
-| --nut-inputnumber-border-radius          | _0_                        |
-| --nut-inputnumber-height                 | _auto_                     |
-| --nut-inputnumber-line-height            | _normal_                   |
-| --nut-inputnumber-border-box             | _content-box_              |
-| --nut-inputnumber-display                | _inline-flex_              |
+| Name | Default Value |
+| --- | --- |
+| --nut-inputnumber-icon-color | _var(--nut-title-color)_ |
+| --nut-inputnumber-icon-void-color | _var(--nut-disable-color)_ |
+| --nut-inputnumber-icon-size | _20px_ |
+| --nut-inputnumber-input-width | _40px_ |
+| --nut-inputnumber-input-font-size | _12px_ |
+| --nut-inputnumber-input-font-color | _var(--nut-title-color)_ |
+| --nut-inputnumber-input-background-color | _var(--nut-help-color)_ |
+| --nut-inputnumber-input-border-radius | _4px_ |
+| --nut-inputnumber-input-margin | _0 6px_ |
+| --nut-inputnumber-input-border | _0_ |
+| --nut-inputnumber-border | _0_ |
+| --nut-inputnumber-border-radius | _0_ |
+| --nut-inputnumber-height | _auto_ |
+| --nut-inputnumber-line-height | _normal_ |
+| --nut-inputnumber-border-box | _content-box_ |
+| --nut-inputnumber-display | _inline-flex_ |
diff --git a/src/packages/__VUE/inputnumber/doc.md b/src/packages/__VUE/inputnumber/doc.md
index f7e010a260..ea40d67abb 100644
--- a/src/packages/__VUE/inputnumber/doc.md
+++ b/src/packages/__VUE/inputnumber/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { InputNumber } from '@nutui/nutui';
 
@@ -20,18 +20,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -43,18 +38,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" step="5" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -66,18 +56,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" min="10" max="20" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(10);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(10);
 </script>
 ```
 
@@ -89,18 +74,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" disabled />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -112,18 +92,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" readonly />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -135,18 +110,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" step="0.1" decimal-places="1" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -158,29 +128,21 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number :model-value="value" @change="onChange" />
 </template>
-<script lang="ts">
-  import { reactive, getCurrentInstance, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        value: 1
-      });
-      const onChange = (value: number) => {
-        showToast.loading('异步演示 2 秒后更改');
-        setTimeout(() => {
-          state.value = value;
-          showToast.hide();
-        }, 2000);
-      };
-      return { ...toRefs(state), onChange };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(1);
+const onChange = (value) => {
+  showToast.loading('异步演示 2 秒后更改');
+  setTimeout(() => {
+    state.value = value;
+    showToast.hide();
+  }, 2000);
+};
 </script>
 ```
 
@@ -190,18 +152,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" button-size="30" input-width="50" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -211,7 +168,7 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value">
     <template #left-icon>
@@ -222,16 +179,10 @@ app.use(InputNumber);
     </template>
   </nut-input-number>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { Left, Right } from '@nutui/icons-vue';
-  export default {
-    components: { Left, Right },
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Left, Right } from '@nutui/icons-vue';
+const value = ref(1);
 </script>
 ```
 
@@ -241,35 +192,35 @@ app.use(InputNumber);
 
 ### Props
 
-| 参数           | 说明                       | 类型             | 默认值  |
-| -------------- | -------------------------- | ---------------- | ------- |
-| v-model        | 初始值                     | string \| number | -       |
-| input-width    | 输入框宽度                 | string           | ``      |
-| button-size    | 操作符+、-尺寸             | string           | ``      |
-| min            | 最小值限制                 | string \| number | `1`     |
-| max            | 最大值限制                 | string \| number | `9999`  |
-| step           | 步长                       | string \| number | `1`     |
-| decimal-places | 设置保留的小数位           | string \| number | `0`     |
-| disabled       | 禁用所有功能               | boolean          | `false` |
-| readonly       | 只读状态禁用输入框操作行为 | boolean          | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 初始值 | string \| number | - |
+| input-width | 输入框宽度 | string | `` |
+| button-size | 操作符+、-尺寸 | string | `` |
+| min | 最小值限制 | string \| number | `1` |
+| max | 最大值限制 | string \| number | `9999` |
+| step | 步长 | string \| number | `1` |
+| decimal-places | 设置保留的小数位 | string \| number | `0` |
+| disabled | 禁用所有功能 | boolean | `false` |
+| readonly | 只读状态禁用输入框操作行为 | boolean | `false` |
 
 ### Slots
 
-| 名称       | 说明           |
-| ---------- | -------------- |
-| left-icon  | 自定义左侧按钮 |
+| 名称 | 说明 |
+| --- | --- |
+| left-icon | 自定义左侧按钮 |
 | right-icon | 自定义右侧按钮 |
 
 ### Events
 
-| 事件名    | 说明                   | 回调参数                                      |
-| --------- | ---------------------- | --------------------------------------------- |
-| add       | 点击增加按钮时触发     | `(event: Event)`                              |
-| reduce    | 点击减少按钮时触发     | `(event: Event) `                             |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| add | 点击增加按钮时触发 | `(event: Event)` |
+| reduce | 点击减少按钮时触发 | `(event: Event) ` |
 | overlimit | 点击不可用的按钮时触发 | `(event: Event,type:string (reduce or add) )` |
-| change    | 值改变时触发           | `(value: number , event : Event) `            |
-| blur      | 输入框失去焦点时触发   | `(event: Event)  `                            |
-| focus     | 输入框获得焦点时触发   | `(event: Event ) `                            |
+| change | 值改变时触发 | `(value: number , event : Event) ` |
+| blur | 输入框失去焦点时触发 | `(event: Event)  ` |
+| focus | 输入框获得焦点时触发 | `(event: Event ) ` |
 
 ## 主题定制
 
@@ -277,21 +228,21 @@ app.use(InputNumber);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                     | 默认值                     |
-| ---------------------------------------- | -------------------------- |
-| --nut-inputnumber-icon-color             | _var(--nut-title-color)_   |
-| --nut-inputnumber-icon-void-color        | _var(--nut-disable-color)_ |
-| --nut-inputnumber-icon-size              | _20px_                     |
-| --nut-inputnumber-input-width            | _40px_                     |
-| --nut-inputnumber-input-font-size        | _12px_                     |
-| --nut-inputnumber-input-font-color       | _var(--nut-title-color)_   |
-| --nut-inputnumber-input-background-color | _var(--nut-help-color)_    |
-| --nut-inputnumber-input-border-radius    | _4px_                      |
-| --nut-inputnumber-input-margin           | _0 6px_                    |
-| --nut-inputnumber-input-border           | _0_                        |
-| --nut-inputnumber-border                 | _0_                        |
-| --nut-inputnumber-border-radius          | _0_                        |
-| --nut-inputnumber-height                 | _auto_                     |
-| --nut-inputnumber-line-height            | _normal_                   |
-| --nut-inputnumber-border-box             | _content-box_              |
-| --nut-inputnumber-display                | _inline-flex_              |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-inputnumber-icon-color | _var(--nut-title-color)_ |
+| --nut-inputnumber-icon-void-color | _var(--nut-disable-color)_ |
+| --nut-inputnumber-icon-size | _20px_ |
+| --nut-inputnumber-input-width | _40px_ |
+| --nut-inputnumber-input-font-size | _12px_ |
+| --nut-inputnumber-input-font-color | _var(--nut-title-color)_ |
+| --nut-inputnumber-input-background-color | _var(--nut-help-color)_ |
+| --nut-inputnumber-input-border-radius | _4px_ |
+| --nut-inputnumber-input-margin | _0 6px_ |
+| --nut-inputnumber-input-border | _0_ |
+| --nut-inputnumber-border | _0_ |
+| --nut-inputnumber-border-radius | _0_ |
+| --nut-inputnumber-height | _auto_ |
+| --nut-inputnumber-line-height | _normal_ |
+| --nut-inputnumber-border-box | _content-box_ |
+| --nut-inputnumber-display | _inline-flex_ |
diff --git a/src/packages/__VUE/inputnumber/doc.taro.md b/src/packages/__VUE/inputnumber/doc.taro.md
index ef67f15df9..74216f98c8 100644
--- a/src/packages/__VUE/inputnumber/doc.taro.md
+++ b/src/packages/__VUE/inputnumber/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { InputNumber } from '@nutui/nutui-taro';
 
@@ -20,18 +20,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -43,18 +38,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" step="5" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -66,18 +56,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" min="10" max="20" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(10);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(10);
 </script>
 ```
 
@@ -89,18 +74,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" disabled />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -112,18 +92,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" readonly />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -135,18 +110,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" step="0.1" decimal-places="1" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -158,26 +128,19 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number :model-value="value" @change="onChange" />
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        value: 1
-      });
-      const onChange = (value: number) => {
-        console.log('异步演示 2 秒后更改');
-        setTimeout(() => {
-          state.value = value;
-        }, 2000);
-      };
-      return { ...toRefs(state), onChange };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
+const onChange = (value) => {
+  console.log('异步演示 2 秒后更改');
+  setTimeout(() => {
+    state.value = value;
+  }, 2000);
+};
 </script>
 ```
 
@@ -187,18 +150,13 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value" button-size="30" input-width="50" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(1);
 </script>
 ```
 
@@ -208,7 +166,7 @@ app.use(InputNumber);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-input-number v-model="value">
     <template #left-icon>
@@ -219,16 +177,10 @@ app.use(InputNumber);
     </template>
   </nut-input-number>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { Left, Right } from '@nutui/icons-vue-taro';
-  export default {
-    components: { Left, Right },
-    setup() {
-      const value = ref(1);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Left, Right } from '@nutui/icons-vue-taro';
+const value = ref(1);
 </script>
 ```
 
@@ -238,35 +190,35 @@ app.use(InputNumber);
 
 ### Props
 
-| 参数           | 说明                       | 类型             | 默认值  |
-| -------------- | -------------------------- | ---------------- | ------- |
-| v-model        | 初始值                     | string \| number | -       |
-| input-width    | 输入框宽度                 | string           | ``      |
-| button-size    | 操作符+、-尺寸             | string           | ``      |
-| min            | 最小值限制                 | string \| number | `1`     |
-| max            | 最大值限制                 | string \| number | `9999`  |
-| step           | 步长                       | string \| number | `1`     |
-| decimal-places | 设置保留的小数位           | string \| number | `0`     |
-| disabled       | 禁用所有功能               | boolean          | `false` |
-| readonly       | 只读状态禁用输入框操作行为 | boolean          | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 初始值 | string \| number | - |
+| input-width | 输入框宽度 | string | `` |
+| button-size | 操作符+、-尺寸 | string | `` |
+| min | 最小值限制 | string \| number | `1` |
+| max | 最大值限制 | string \| number | `9999` |
+| step | 步长 | string \| number | `1` |
+| decimal-places | 设置保留的小数位 | string \| number | `0` |
+| disabled | 禁用所有功能 | boolean | `false` |
+| readonly | 只读状态禁用输入框操作行为 | boolean | `false` |
 
 ### Slots
 
-| 名称       | 说明           |
-| ---------- | -------------- |
-| left-icon  | 自定义左侧按钮 |
+| 名称 | 说明 |
+| --- | --- |
+| left-icon | 自定义左侧按钮 |
 | right-icon | 自定义右侧按钮 |
 
 ### Events
 
-| 事件名    | 说明                   | 回调参数                                      |
-| --------- | ---------------------- | --------------------------------------------- |
-| add       | 点击增加按钮时触发     | `(event: Event)`                              |
-| reduce    | 点击减少按钮时触发     | `(event: Event)`                              |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| add | 点击增加按钮时触发 | `(event: Event)` |
+| reduce | 点击减少按钮时触发 | `(event: Event) ` |
 | overlimit | 点击不可用的按钮时触发 | `(event: Event,type:string (reduce or add) )` |
-| change    | 值改变时触发           | `(value: number , event : Event)`             |
-| blur      | 输入框失去焦点时触发   | `(event: Event)`                              |
-| focus     | 输入框获得焦点时触发   | `(event: Event ) `                            |
+| change | 值改变时触发 | `(value: number , event : Event) ` |
+| blur | 输入框失去焦点时触发 | `(event: Event)  ` |
+| focus | 输入框获得焦点时触发 | `(event: Event ) ` |
 
 ## 主题定制
 
@@ -274,21 +226,21 @@ app.use(InputNumber);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                     | 默认值                     |
-| ---------------------------------------- | -------------------------- |
-| --nut-inputnumber-icon-color             | _var(--nut-title-color)_   |
-| --nut-inputnumber-icon-void-color        | _var(--nut-disable-color)_ |
-| --nut-inputnumber-icon-size              | _20px_                     |
-| --nut-inputnumber-input-width            | _40px_                     |
-| --nut-inputnumber-input-font-size        | _12px_                     |
-| --nut-inputnumber-input-font-color       | _var(--nut-title-color)_   |
-| --nut-inputnumber-input-background-color | _var(--nut-help-color)_    |
-| --nut-inputnumber-input-border-radius    | _4px_                      |
-| --nut-inputnumber-input-margin           | _0 6px_                    |
-| --nut-inputnumber-input-border           | _0_                        |
-| --nut-inputnumber-border                 | _0_                        |
-| --nut-inputnumber-border-radius          | _0_                        |
-| --nut-inputnumber-height                 | _auto_                     |
-| --nut-inputnumber-line-height            | _normal_                   |
-| --nut-inputnumber-border-box             | _content-box_              |
-| --nut-inputnumber-display                | _inline-flex_              |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-inputnumber-icon-color | _var(--nut-title-color)_ |
+| --nut-inputnumber-icon-void-color | _var(--nut-disable-color)_ |
+| --nut-inputnumber-icon-size | _20px_ |
+| --nut-inputnumber-input-width | _40px_ |
+| --nut-inputnumber-input-font-size | _12px_ |
+| --nut-inputnumber-input-font-color | _var(--nut-title-color)_ |
+| --nut-inputnumber-input-background-color | _var(--nut-help-color)_ |
+| --nut-inputnumber-input-border-radius | _4px_ |
+| --nut-inputnumber-input-margin | _0 6px_ |
+| --nut-inputnumber-input-border | _0_ |
+| --nut-inputnumber-border | _0_ |
+| --nut-inputnumber-border-radius | _0_ |
+| --nut-inputnumber-height | _auto_ |
+| --nut-inputnumber-line-height | _normal_ |
+| --nut-inputnumber-border-box | _content-box_ |
+| --nut-inputnumber-display | _inline-flex_ |
diff --git a/src/packages/__VUE/numberkeyboard/demo.vue b/src/packages/__VUE/numberkeyboard/demo.vue
index 023b75bcb8..27b1f5401f 100644
--- a/src/packages/__VUE/numberkeyboard/demo.vue
+++ b/src/packages/__VUE/numberkeyboard/demo.vue
@@ -10,7 +10,7 @@
       :custom-key="customKey1"
       :confirm-text="translate('confirmText')"
       @input="input"
-      @close="close(2)"
+      @close="close"
       @blur="onBlur(2)"
     >
     </nut-number-keyboard>
@@ -21,7 +21,7 @@
       :random-keys="true"
       :custom-key="customKey1"
       @input="input"
-      @close="close(3)"
+      @close="close"
       @blur="onBlur(3)"
     >
     </nut-number-keyboard>
@@ -32,7 +32,7 @@
       :title="translate('title')"
       :custom-key="customKey2"
       @input="input"
-      @close="close(4)"
+      @close="close"
       @blur="onBlur(4)"
     >
     </nut-number-keyboard>
@@ -43,7 +43,7 @@
       :custom-key="customKey3"
       @input="input"
       @blur="onBlur(6)"
-      @close="close(6)"
+      @close="close"
     >
     </nut-number-keyboard>
     <nut-cell
@@ -53,13 +53,13 @@
       :title="translate('bindValue')"
       @touchstart.stop="showKeyBoard(5)"
     ></nut-cell>
-    <nut-number-keyboard v-model:visible="visible5" v-model="value" maxlength="6" @blur="onBlur(5)" @close="close(5)">
+    <nut-number-keyboard v-model:visible="visible5" v-model="value" maxlength="6" @blur="onBlur(5)" @close="close">
     </nut-number-keyboard>
   </div>
 </template>
 
-<script lang="ts">
-import { ref, reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
 const { translate } = createComponent('number-keyboard');
@@ -87,57 +87,33 @@ const initTranslate = () =>
       bindValue: 'Bind Value：'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const visible1 = ref(false);
-    const visible2 = ref(false);
-    const visible3 = ref(false);
-    const visible4 = ref(false);
-    const visible6 = ref(false);
-    const visible5 = ref(false);
-    const value = ref('');
-    const customKey1 = reactive(['.']);
-    const customKey2 = reactive(['.']);
-    const customKey3 = reactive(['X']);
-    const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
-    function input(number: any) {
-      showToast.text(`输入：${number}`);
-    }
-    function showKeyBoard(index: number) {
-      visibleArr[index - 1].value = true;
-    }
-    function onDelete() {
-      showToast.text('删除');
-    }
-    function close() {
-      console.log('关闭');
-    }
-    function onBlur(index: number) {
-      visibleArr[index - 1].value = false;
-    }
-
-    return {
-      input,
-      onDelete,
-      close,
-      showKeyBoard,
-      customKey1,
-      customKey2,
-      customKey3,
-      visible1,
-      visible2,
-      visible3,
-      visible4,
-      visible5,
-      visible6,
-      value,
-      onBlur,
-      translate
-    };
-  }
-});
+initTranslate();
+const visible1 = ref(false);
+const visible2 = ref(false);
+const visible3 = ref(false);
+const visible4 = ref(false);
+const visible6 = ref(false);
+const visible5 = ref(false);
+const value = ref('');
+const customKey1 = reactive(['.']);
+const customKey2 = reactive(['.']);
+const customKey3 = reactive(['X']);
+const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
+function input(number: any) {
+  showToast.text(`输入：${number}`);
+}
+function showKeyBoard(index: number) {
+  visibleArr[index - 1].value = true;
+}
+function onDelete() {
+  showToast.text('删除');
+}
+function close() {
+  console.log('关闭');
+}
+function onBlur(index: number) {
+  visibleArr[index - 1].value = false;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/numberkeyboard/doc.en-US.md b/src/packages/__VUE/numberkeyboard/doc.en-US.md
index 5c18ba74a5..e4323d8b9d 100644
--- a/src/packages/__VUE/numberkeyboard/doc.en-US.md
+++ b/src/packages/__VUE/numberkeyboard/doc.en-US.md
@@ -6,7 +6,7 @@ Virtual numeric keypad, used for scenarios where payment passwords are entered.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { NumberKeyboard } from '@nutui/nutui';
 
@@ -19,40 +19,28 @@ app.use(NumberKeyboard);
 For online debugging, please change the browser to mobile mode
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard" title="Default Keyboard"></nut-cell>
   <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`enter：${number}`);
-      }
-      function onDelete() {
-        showToast.text('delete');
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        input,
-        showKeyBoard,
-        close,
-        onDelete
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`enter：${number}`);
+}
+function onDelete() {
+  showToast.text('delete');
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -62,7 +50,7 @@ For online debugging, please change the browser to mobile mode
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard" title="Keyboard With Sidebar"></nut-cell>
   <nut-number-keyboard
@@ -75,32 +63,20 @@ For online debugging, please change the browser to mobile mode
   >
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`enter${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`enter${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -110,7 +86,7 @@ For online debugging, please change the browser to mobile mode
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard" title="Random Key Order"></nut-cell>
   <nut-number-keyboard
@@ -123,32 +99,20 @@ For online debugging, please change the browser to mobile mode
   >
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`enter：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`enter：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -158,38 +122,26 @@ For online debugging, please change the browser to mobile mode
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard(4)" title="Show Keyboard With Title"></nut-cell>
   <nut-number-keyboard title="title" v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`enter：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`enter：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -199,38 +151,26 @@ For online debugging, please change the browser to mobile mode
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard(4)" title="IdNumber Keyboard"></nut-cell>
   <nut-number-keyboard v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['X']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`enter：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+const customKey = reactive(['X']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`enter：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -240,34 +180,23 @@ For online debugging, please change the browser to mobile mode
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" desc-text-align="left" @click="showKeyBoard" :desc="value" title="Bind Value"></nut-cell>
   <nut-number-keyboard v-model:visible="visible" v-model:value="value" maxlength="6" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const value = ref('');
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        value,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const value = ref('');
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -277,27 +206,27 @@ For online debugging, please change the browser to mobile mode
 
 ### Props
 
-| Attribute       | Description                                             | Type             | Default                                |
-| --------------- | ------------------------------------------------------- | ---------------- | -------------------------------------- |
-| v-model:visible | Whether to show keyboard                                | boolean          | `false`                                |
-| v-model         | Current value                                           | string           | -                                      |
-| title           | Keyboard title                                          | string           | -                                      |
-| type            | Keyboard type can be set to `rightColumn`               | string           | `default`                              |
-| random-keys     | Whether to shuffle the order of keys                    | boolean          | `false`                                |
-| custom-key      | Content of bottom left key                              | string []        | `Array form supports adding up to two` |
-| maxlength       | Value maxlength，Use with v-model                       | number \| string | `6`                                    |
-| confirm-text    | Custom done button text,Such as "pay", "next", "submit" | string           | `done`                                 |
-| teleport        | Specify the mount node                                  | string           | `"body"`                               |
-| pop-class       | Custom bullet box classname                             | string           | -                                      |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model:visible | Whether to show keyboard | boolean | `false` |
+| v-model | Current value | string | - |
+| title | Keyboard title | string | - |
+| type | Keyboard type can be set to `rightColumn` | string | `default` |
+| random-keys | Whether to shuffle the order of keys | boolean | `false` |
+| custom-key | Content of bottom left key | string [] | `Array form supports adding up to two` |
+| maxlength | Value maxlength，Use with v-model | number \| string | `6` |
+| confirm-text | Custom done button text,Such as "pay", "next", "submit" | string | `done` |
+| teleport | Specify the mount node | string | `"body"` |
+| pop-class | Custom bullet box classname | string | - |
 
 ### Events
 
-| Event  | Description                                                              | Arguments   |
-| ------ | ------------------------------------------------------------------------ | ----------- |
-| input  | Emitted when a key is pressed                                            | key: string |
-| delete | Emitted when the delete key is pressed                                   | -           |
-| close  | Emitted when the close button or non-keyboard area is clicked is clicked | -           |
-| blur   | Emitted when the close button is clicked or the keyboard is blurred      | -           |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| input | Emitted when a key is pressed | key: string |
+| delete | Emitted when the delete key is pressed | - |
+| close | Emitted when the close button or non-keyboard area is clicked is clicked | - |
+| blur | Emitted when the close button is clicked or the keyboard is blurred | - |
 
 ## Theming
 
@@ -305,27 +234,27 @@ For online debugging, please change the browser to mobile mode
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                                  | Default Value |
-| ----------------------------------------------------- | ------------- |
-| --nut-numberkeyboard-width                            | _100%_        |
-| --nut-numberkeyboard-padding                          | _0_           |
-| --nut-numberkeyboard-background-color                 | _#f2f3f5_     |
-| --nut-numberkeyboard-header-height                    | _34px_        |
-| --nut-numberkeyboard-header-padding                   | _6px 0 0 0_   |
-| --nut-numberkeyboard-header-color                     | _#646566_     |
-| --nut-numberkeyboard-header-font-size                 | _16px_        |
-| --nut-numberkeyboard-header-close-padding             | _0 16px_      |
-| --nut-numberkeyboard-header-close-color               | _#576b95_     |
-| --nut-numberkeyboard-header-close-font-size           | _14px_        |
-| --nut-numberkeyboard-header-close-background-color    | _transparent_ |
-| --nut-numberkeyboard-key-background-color             | _#fff_        |
-| --nut-numberkeyboard-key-active-background-color      | _#ebedf0_     |
-| --nut-numberkeyboard-key-height                       | _48px_        |
-| --nut-numberkeyboard-key-line-height                  | _1.5_         |
-| --nut-numberkeyboard-key-border-radius                | _8px_         |
-| --nut-numberkeyboard-key-font-size                    | _28px_        |
-| --nut-numberkeyboard-key-font-size-color              | _#333_        |
-| --nut-numberkeyboard-key-finish-font-size             | _16px_        |
-| --nut-numberkeyboard-key-finish-font-size-color       | _#fff_        |
-| --nut-numberkeyboard-key-finish-background-color      | _#1989fa_     |
-| --nut-numberkeyboard-key-activeFinsh-background-color | _#0570db_     |
+| Name | Default Value |
+| --- | --- |
+| --nut-numberkeyboard-width | _100%_ |
+| --nut-numberkeyboard-padding | _0_ |
+| --nut-numberkeyboard-background-color | _#f2f3f5_ |
+| --nut-numberkeyboard-header-height | _34px_ |
+| --nut-numberkeyboard-header-padding | _6px 0 0 0_ |
+| --nut-numberkeyboard-header-color | _#646566_ |
+| --nut-numberkeyboard-header-font-size | _16px_ |
+| --nut-numberkeyboard-header-close-padding | _0 16px_ |
+| --nut-numberkeyboard-header-close-color | _#576b95_ |
+| --nut-numberkeyboard-header-close-font-size | _14px_ |
+| --nut-numberkeyboard-header-close-background-color | _transparent_ |
+| --nut-numberkeyboard-key-background-color | _#fff_ |
+| --nut-numberkeyboard-key-active-background-color | _#ebedf0_ |
+| --nut-numberkeyboard-key-height | _48px_ |
+| --nut-numberkeyboard-key-line-height | _1.5_ |
+| --nut-numberkeyboard-key-border-radius | _8px_ |
+| --nut-numberkeyboard-key-font-size | _28px_ |
+| --nut-numberkeyboard-key-font-size-color | _#333_ |
+| --nut-numberkeyboard-key-finish-font-size | _16px_ |
+| --nut-numberkeyboard-key-finish-font-size-color | _#fff_ |
+| --nut-numberkeyboard-key-finish-background-color | _#1989fa_ |
+| --nut-numberkeyboard-key-activeFinsh-background-color | _#0570db_ |
diff --git a/src/packages/__VUE/numberkeyboard/doc.md b/src/packages/__VUE/numberkeyboard/doc.md
index ae43f6b111..bb2199dcad 100644
--- a/src/packages/__VUE/numberkeyboard/doc.md
+++ b/src/packages/__VUE/numberkeyboard/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { NumberKeyboard } from '@nutui/nutui';
 
@@ -19,40 +19,28 @@ app.use(NumberKeyboard);
 在线调试请将浏览器变为手机模式
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard" title="默认键盘"></nut-cell>
   <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`输入：${number}`);
-      }
-      function onDelete() {
-        showToast.text('删除');
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        input,
-        showKeyBoard,
-        close,
-        onDelete
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`输入：${number}`);
+}
+function onDelete() {
+  showToast.text('删除');
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -62,7 +50,7 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard" title="带右侧栏键盘"></nut-cell>
   <nut-number-keyboard
@@ -75,32 +63,20 @@ app.use(NumberKeyboard);
   >
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`输入：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`输入：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -110,7 +86,7 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard" title="随机数键盘"></nut-cell>
   <nut-number-keyboard
@@ -123,32 +99,20 @@ app.use(NumberKeyboard);
   >
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`输入：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`输入：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -158,38 +122,26 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard(4)" title="带标题栏键盘"></nut-cell>
   <nut-number-keyboard title="默认键盘" v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`输入：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`输入：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -199,38 +151,26 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard(4)" title="身份证键盘"></nut-cell>
   <nut-number-keyboard v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['X']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        showToast.text(`输入：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const visible = ref(false);
+const customKey = reactive(['X']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  showToast.text(`输入：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -240,33 +180,22 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" desc-text-align="left" @click="showKeyBoard" :desc="value" title="双向绑定："></nut-cell>
   <nut-number-keyboard v-model:visible="visible" v-model="value" maxlength="6" @close="close"> </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const value = ref('');
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        value,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const value = ref('');
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -276,26 +205,26 @@ app.use(NumberKeyboard);
 
 ### Props
 
-| 参数            | 说明                                             | 类型             | 默认值                                         |
-| --------------- | ------------------------------------------------ | ---------------- | ---------------------------------------------- |
-| v-model:visible | 是否显示键盘                                     | boolean          | `false`                                        |
-| v-model         | 当前输入值                                       | string           | -                                              |
-| title           | 键盘标题                                         | string           | -                                              |
-| type            | 键盘模式                                         | string           | `default`：默认样式<br>`rightColumn`：带右侧栏 |
-| random-keys     | 随机数                                           | boolean          | `false`                                        |
-| custom-key      | 自定义键盘额外的键                               | string []        | `数组形式最多支持添加2个,超出默认取前2项`      |
-| maxlength       | 输入值最大长度，结合 v-model 使用                | number \| string | `6`                                            |
-| confirm-text    | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等 | string           | `完成`                                         |
-| pop-class       | 自定义弹框类名                                   | string           | -                                              |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:visible | 是否显示键盘 | boolean | `false` |
+| v-model | 当前输入值 | string | - |
+| title | 键盘标题 | string | - |
+| type | 键盘模式 | string | `default`：默认样式<br>`rightColumn`：带右侧栏 |
+| random-keys | 随机数 | boolean | `false` |
+| custom-key | 自定义键盘额外的键 | string [] | `数组形式最多支持添加2个,超出默认取前2项` |
+| maxlength | 输入值最大长度，结合 v-model 使用 | number \| string | `6` |
+| confirm-text | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等 | string | `完成` |
+| pop-class | 自定义弹框类名 | string | - |
 
 ### Events
 
-| 事件名 | 说明                           | 回调参数 |
-| ------ | ------------------------------ | -------- |
-| input  | 点击按键时触发                 | 按键内容 |
-| delete | 点击删除键时触发               | -        |
-| close  | 点击关闭按钮时触发             | -        |
-| blur   | 点击关闭按钮或非键盘区域时触发 | -        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| input | 点击按键时触发 | 按键内容 |
+| delete | 点击删除键时触发 | - |
+| close | 点击关闭按钮时触发 | - |
+| blur | 点击关闭按钮或非键盘区域时触发 | - |
 
 ## 主题定制
 
@@ -303,27 +232,27 @@ app.use(NumberKeyboard);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                                  | 默认值        |
-| ----------------------------------------------------- | ------------- |
-| --nut-numberkeyboard-width                            | _100%_        |
-| --nut-numberkeyboard-padding                          | _0_           |
-| --nut-numberkeyboard-background-color                 | _#f2f3f5_     |
-| --nut-numberkeyboard-header-height                    | _34px_        |
-| --nut-numberkeyboard-header-padding                   | _6px 0 0 0_   |
-| --nut-numberkeyboard-header-color                     | _#646566_     |
-| --nut-numberkeyboard-header-font-size                 | _16px_        |
-| --nut-numberkeyboard-header-close-padding             | _0 16px_      |
-| --nut-numberkeyboard-header-close-color               | _#576b95_     |
-| --nut-numberkeyboard-header-close-font-size           | _14px_        |
-| --nut-numberkeyboard-header-close-background-color    | _transparent_ |
-| --nut-numberkeyboard-key-background-color             | _#fff_        |
-| --nut-numberkeyboard-key-active-background-color      | _#ebedf0_     |
-| --nut-numberkeyboard-key-height                       | _48px_        |
-| --nut-numberkeyboard-key-line-height                  | _1.5_         |
-| --nut-numberkeyboard-key-border-radius                | _8px_         |
-| --nut-numberkeyboard-key-font-size                    | _28px_        |
-| --nut-numberkeyboard-key-font-size-color              | _#333_        |
-| --nut-numberkeyboard-key-finish-font-size             | _16px_        |
-| --nut-numberkeyboard-key-finish-font-size-color       | _#fff_        |
-| --nut-numberkeyboard-key-finish-background-color      | _#1989fa_     |
-| --nut-numberkeyboard-key-activeFinsh-background-color | _#0570db_     |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-numberkeyboard-width | _100%_ |
+| --nut-numberkeyboard-padding | _0_ |
+| --nut-numberkeyboard-background-color | _#f2f3f5_ |
+| --nut-numberkeyboard-header-height | _34px_ |
+| --nut-numberkeyboard-header-padding | _6px 0 0 0_ |
+| --nut-numberkeyboard-header-color | _#646566_ |
+| --nut-numberkeyboard-header-font-size | _16px_ |
+| --nut-numberkeyboard-header-close-padding | _0 16px_ |
+| --nut-numberkeyboard-header-close-color | _#576b95_ |
+| --nut-numberkeyboard-header-close-font-size | _14px_ |
+| --nut-numberkeyboard-header-close-background-color | _transparent_ |
+| --nut-numberkeyboard-key-background-color | _#fff_ |
+| --nut-numberkeyboard-key-active-background-color | _#ebedf0_ |
+| --nut-numberkeyboard-key-height | _48px_ |
+| --nut-numberkeyboard-key-line-height | _1.5_ |
+| --nut-numberkeyboard-key-border-radius | _8px_ |
+| --nut-numberkeyboard-key-font-size | _28px_ |
+| --nut-numberkeyboard-key-font-size-color | _#333_ |
+| --nut-numberkeyboard-key-finish-font-size | _16px_ |
+| --nut-numberkeyboard-key-finish-font-size-color | _#fff_ |
+| --nut-numberkeyboard-key-finish-background-color | _#1989fa_ |
+| --nut-numberkeyboard-key-activeFinsh-background-color | _#0570db_ |
diff --git a/src/packages/__VUE/numberkeyboard/doc.taro.md b/src/packages/__VUE/numberkeyboard/doc.taro.md
index 0ab45c976f..f1a25c3eb2 100644
--- a/src/packages/__VUE/numberkeyboard/doc.taro.md
+++ b/src/packages/__VUE/numberkeyboard/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { NumberKeyboard } from '@nutui/nutui-taro';
 
@@ -19,38 +19,27 @@ app.use(NumberKeyboard);
 在线调试请将浏览器变为手机模式
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard" title="默认键盘"></nut-cell>
   <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        console.log(`输入：${number}`);
-      }
-      function onDelete() {
-        console.log('删除');
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        input,
-        showKeyBoard,
-        close,
-        onDelete
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  console.log(`输入：${number}`);
+}
+function onDelete() {
+  console.log('删除');
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -60,7 +49,7 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard" title="带右侧栏键盘"></nut-cell>
   <nut-number-keyboard
@@ -73,30 +62,19 @@ app.use(NumberKeyboard);
   >
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        console.log(`输入：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  console.log(`输入：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -106,7 +84,7 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard" title="随机数键盘"></nut-cell>
   <nut-number-keyboard
@@ -119,30 +97,19 @@ app.use(NumberKeyboard);
   >
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        console.log(`输入：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  console.log(`输入：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -152,36 +119,25 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard(4)" title="带标题栏键盘"></nut-cell>
   <nut-number-keyboard title="默认键盘" v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        console.log(`输入：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  console.log(`输入：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -191,36 +147,25 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" @click="showKeyBoard(4)" title="身份证键盘"></nut-cell>
   <nut-number-keyboard v-model:visible="visible" :custom-key="customKey" @input="input" @close="close">
   </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const customKey = reactive(['X']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function input(number) {
-        console.log(`输入：${number}`);
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        input,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const customKey = reactive(['X']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function input(number) {
+  console.log(`输入：${number}`);
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -230,34 +175,22 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :isLink="true" desc-text-align="left" @click="showKeyBoard" :desc="value" title="双向绑定："></nut-cell>
-  <nut-number-keyboard v-model:visible="visible" v-model:value="value" maxlength="6" @close="close">
-  </nut-number-keyboard>
+  <nut-number-keyboard v-model:visible="visible" v-model="value" maxlength="6" @close="close"> </nut-number-keyboard>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const value = ref('');
-      const customKey = reactive(['.']);
-      function showKeyBoard() {
-        visible.value = true;
-      }
-      function close() {
-        visible.value = false;
-      }
-      return {
-        visible,
-        customKey,
-        value,
-        showKeyBoard,
-        close
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const value = ref('');
+const customKey = reactive(['.']);
+function showKeyBoard() {
+  visible.value = true;
+}
+function close() {
+  visible.value = false;
+}
 </script>
 ```
 
@@ -267,26 +200,26 @@ app.use(NumberKeyboard);
 
 ### Props
 
-| 参数            | 说明                                             | 类型             | 默认值                                         |
-| --------------- | ------------------------------------------------ | ---------------- | ---------------------------------------------- |
-| v-model:visible | 是否显示键盘                                     | boolean          | `false`                                        |
-| v-model         | 当前输入值                                       | string           | -                                              |
-| title           | 键盘标题                                         | string           | -                                              |
-| type            | 键盘模式                                         | string           | `default`：默认样式<br>`rightColumn`：带右侧栏 |
-| random-keys     | 随机数                                           | boolean          | `false`                                        |
-| custom-key      | 自定义键盘额外的键                               | string []        | `数组形式最多支持添加2个,超出默认取前2项`      |
-| overlay         | 是否显示遮罩                                     | boolean          | false                                          |
-| maxlength       | 输入值最大长度，结合 v-model 使用                | number \| string | `6`                                            |
-| confirm-text    | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等 | string           | `完成`                                         |
-| pop-class       | 自定义弹框类名                                   | string           | -                                              |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:visible | 是否显示键盘 | boolean | `false` |
+| v-model | 当前输入值 | string | - |
+| title | 键盘标题 | string | - |
+| type | 键盘模式 | string | `default`：默认样式<br>`rightColumn`：带右侧栏 |
+| random-keys | 随机数 | boolean | `false` |
+| custom-key | 自定义键盘额外的键 | string [] | `数组形式最多支持添加2个,超出默认取前2项` |
+| overlay | 是否显示遮罩 | boolean | false |
+| maxlength | 输入值最大长度，结合 v-model 使用 | number \| string | `6` |
+| confirm-text | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等 | string | `完成` |
+| pop-class | 自定义弹框类名 | string | - |
 
 ### Events
 
-| 事件名 | 说明                           | 回调参数 |
-| ------ | ------------------------------ | -------- |
-| input  | 点击按键时触发                 | 按键内容 |
-| delete | 点击删除键时触发               | -        |
-| close  | 点击关闭按钮或非键盘区域时触发 | -        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| input | 点击按键时触发 | 按键内容 |
+| delete | 点击删除键时触发 | - |
+| close | 点击关闭按钮或非键盘区域时触发 | - |
 
 ## 主题定制
 
@@ -294,27 +227,27 @@ app.use(NumberKeyboard);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                                  | 默认值        |
-| ----------------------------------------------------- | ------------- |
-| --nut-numberkeyboard-width                            | _100%_        |
-| --nut-numberkeyboard-padding                          | _0_           |
-| --nut-numberkeyboard-background-color                 | _#f2f3f5_     |
-| --nut-numberkeyboard-header-height                    | _34px_        |
-| --nut-numberkeyboard-header-padding                   | _6px 0 0 0_   |
-| --nut-numberkeyboard-header-color                     | _#646566_     |
-| --nut-numberkeyboard-header-font-size                 | _16px_        |
-| --nut-numberkeyboard-header-close-padding             | _0 16px_      |
-| --nut-numberkeyboard-header-close-color               | _#576b95_     |
-| --nut-numberkeyboard-header-close-font-size           | _14px_        |
-| --nut-numberkeyboard-header-close-background-color    | _transparent_ |
-| --nut-numberkeyboard-key-background-color             | _#fff_        |
-| --nut-numberkeyboard-key-active-background-color      | _#ebedf0_     |
-| --nut-numberkeyboard-key-height                       | _48px_        |
-| --nut-numberkeyboard-key-line-height                  | _1.5_         |
-| --nut-numberkeyboard-key-border-radius                | _8px_         |
-| --nut-numberkeyboard-key-font-size                    | _28px_        |
-| --nut-numberkeyboard-key-font-size-color              | _#333_        |
-| --nut-numberkeyboard-key-finish-font-size             | _16px_        |
-| --nut-numberkeyboard-key-finish-font-size-color       | _#fff_        |
-| --nut-numberkeyboard-key-finish-background-color      | _#1989fa_     |
-| --nut-numberkeyboard-key-activeFinsh-background-color | _#0570db_     |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-numberkeyboard-width | _100%_ |
+| --nut-numberkeyboard-padding | _0_ |
+| --nut-numberkeyboard-background-color | _#f2f3f5_ |
+| --nut-numberkeyboard-header-height | _34px_ |
+| --nut-numberkeyboard-header-padding | _6px 0 0 0_ |
+| --nut-numberkeyboard-header-color | _#646566_ |
+| --nut-numberkeyboard-header-font-size | _16px_ |
+| --nut-numberkeyboard-header-close-padding | _0 16px_ |
+| --nut-numberkeyboard-header-close-color | _#576b95_ |
+| --nut-numberkeyboard-header-close-font-size | _14px_ |
+| --nut-numberkeyboard-header-close-background-color | _transparent_ |
+| --nut-numberkeyboard-key-background-color | _#fff_ |
+| --nut-numberkeyboard-key-active-background-color | _#ebedf0_ |
+| --nut-numberkeyboard-key-height | _48px_ |
+| --nut-numberkeyboard-key-line-height | _1.5_ |
+| --nut-numberkeyboard-key-border-radius | _8px_ |
+| --nut-numberkeyboard-key-font-size | _28px_ |
+| --nut-numberkeyboard-key-font-size-color | _#333_ |
+| --nut-numberkeyboard-key-finish-font-size | _16px_ |
+| --nut-numberkeyboard-key-finish-font-size-color | _#fff_ |
+| --nut-numberkeyboard-key-finish-background-color | _#1989fa_ |
+| --nut-numberkeyboard-key-activeFinsh-background-color | _#0570db_ |
diff --git a/src/packages/__VUE/radio/demo.vue b/src/packages/__VUE/radio/demo.vue
index 2cc4c07b60..90ddfaf330 100644
--- a/src/packages/__VUE/radio/demo.vue
+++ b/src/packages/__VUE/radio/demo.vue
@@ -2,21 +2,21 @@
   <div class="demo full">
     <nut-cell-group :title="translate('basic')">
       <nut-cell>
-        <nut-radio-group v-model="radioVal">
+        <nut-radio-group v-model="state.radioVal">
           <nut-radio label="1">{{ translate('option1') }}</nut-radio>
           <nut-radio disabled label="2">{{ translate('option2') }}</nut-radio>
           <nut-radio label="3">{{ translate('option3') }}</nut-radio>
         </nut-radio-group>
       </nut-cell>
       <nut-cell>
-        <nut-radio-group v-model="radioVal" text-position="left">
+        <nut-radio-group v-model="state.radioVal" text-position="left">
           <nut-radio label="1">{{ translate('option1') }}</nut-radio>
           <nut-radio disabled label="2">{{ translate('option2') }}</nut-radio>
           <nut-radio label="3">{{ translate('option3') }}</nut-radio>
         </nut-radio-group>
       </nut-cell>
       <nut-cell>
-        <nut-radio-group v-model="radioVal">
+        <nut-radio-group v-model="state.radioVal">
           <nut-radio shape="button" label="1">{{ translate('option1') }}</nut-radio>
           <nut-radio disabled shape="button" label="2">{{ translate('option2') }}</nut-radio>
           <nut-radio shape="button" label="3">{{ translate('option3') }}</nut-radio>
@@ -25,21 +25,21 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('vertical')">
       <nut-cell>
-        <nut-radio-group v-model="radioVal" direction="horizontal">
+        <nut-radio-group v-model="state.radioVal" direction="horizontal">
           <nut-radio label="1">{{ translate('option1') }}</nut-radio>
           <nut-radio label="2">{{ translate('option2') }}</nut-radio>
           <nut-radio label="3">{{ translate('option3') }}</nut-radio>
         </nut-radio-group>
       </nut-cell>
       <nut-cell>
-        <nut-radio-group v-model="radioVal" text-position="left" direction="horizontal">
+        <nut-radio-group v-model="state.radioVal" text-position="left" direction="horizontal">
           <nut-radio label="1">{{ translate('option1') }}</nut-radio>
           <nut-radio label="2">{{ translate('option2') }}</nut-radio>
           <nut-radio label="3">{{ translate('option3') }}</nut-radio>
         </nut-radio-group>
       </nut-cell>
       <nut-cell>
-        <nut-radio-group v-model="radioVal" direction="horizontal">
+        <nut-radio-group v-model="state.radioVal" direction="horizontal">
           <nut-radio shape="button" label="1">{{ translate('option1') }}</nut-radio>
           <nut-radio shape="button" label="2">{{ translate('option2') }}</nut-radio>
           <nut-radio shape="button" label="3">{{ translate('option3') }}</nut-radio>
@@ -48,7 +48,7 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('size')">
       <nut-cell>
-        <nut-radio-group v-model="radioVal4">
+        <nut-radio-group v-model="state.radioVal4">
           <nut-radio label="1" icon-size="12">{{ translate('size') }} 12</nut-radio>
           <nut-radio label="2" icon-size="12">{{ translate('size') }} 12</nut-radio>
         </nut-radio-group>
@@ -56,7 +56,7 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('icon')">
       <nut-cell>
-        <nut-radio-group v-model="radioVal5">
+        <nut-radio-group v-model="state.radioVal5">
           <nut-radio label="1">
             {{ translate('icon') }}
             <template #icon>
@@ -80,19 +80,19 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('trigger')">
       <nut-cell>
-        <nut-radio-group v-model="radioVal6" @change="handleChange">
+        <nut-radio-group v-model="state.radioVal6" @change="handleChange">
           <nut-radio label="1">{{ translate('trigger') }}</nut-radio>
           <nut-radio label="2">{{ translate('trigger') }}</nut-radio>
         </nut-radio-group>
       </nut-cell>
-      <nut-cell :title="translate('current')" :desc="radioVal6"></nut-cell>
+      <nut-cell :title="translate('current')" :desc="state.radioVal6"></nut-cell>
     </nut-cell-group>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { reactive, toRefs, defineComponent } from 'vue';
+import { reactive } from 'vue';
 const { translate } = createComponent('radio');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Checklist } from '@nutui/icons-vue';
@@ -121,31 +121,18 @@ const initTranslate = () =>
       current: 'Currently selected value'
     }
   });
-export default defineComponent({
-  components: {
-    Checklist
-  },
-  props: {},
-  setup() {
-    initTranslate();
-    const data = reactive({
-      radioVal: '1',
-      radioVal2: '2',
-      radioVal3: '1',
-      radioVal4: '1',
-      radioVal5: '1',
-      radioVal6: '1'
-    });
-    const handleChange = (value: any) => {
-      console.log(value);
-    };
-    return {
-      ...toRefs(data),
-      handleChange,
-      translate
-    };
-  }
+initTranslate();
+const state = reactive({
+  radioVal: '1',
+  radioVal2: '2',
+  radioVal3: '1',
+  radioVal4: '1',
+  radioVal5: '1',
+  radioVal6: '1'
 });
+const handleChange = (value: any) => {
+  console.log(value);
+};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/radio/doc.en-US.md b/src/packages/__VUE/radio/doc.en-US.md
index 285a684258..6293306fee 100644
--- a/src/packages/__VUE/radio/doc.en-US.md
+++ b/src/packages/__VUE/radio/doc.en-US.md
@@ -6,7 +6,7 @@ Used to make a single selection in a set of alternatives
 
 ### Install
 
-```ts
+```js
 import { createApp } from 'vue';
 import { Radio, RadioGroup } from '@nutui/nutui';
 
@@ -21,7 +21,7 @@ Bind the **label** of the current option through **v-model**. And it must be use
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Basic">
     <nut-cell>
@@ -47,15 +47,9 @@ Bind the **label** of the current option through **v-model**. And it must be use
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -65,7 +59,7 @@ Bind the **label** of the current option through **v-model**. And it must be use
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Horizontal use">
     <nut-cell>
@@ -91,15 +85,9 @@ Bind the **label** of the current option through **v-model**. And it must be use
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -109,7 +97,7 @@ Bind the **label** of the current option through **v-model**. And it must be use
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Custom size">
     <nut-cell>
@@ -120,15 +108,9 @@ Bind the **label** of the current option through **v-model**. And it must be use
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -140,7 +122,7 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Radio Custom icon">
     <nut-cell>
@@ -159,18 +141,10 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { Checklist } from '@nutui/icons-vue';
-  export default {
-    components: {
-      Checklist
-    },
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Checklist } from '@nutui/icons-vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -180,7 +154,7 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Trigger event">
     <nut-cell>
@@ -192,18 +166,12 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
     <nut-cell title="Currently selected value" :desc="radioVal"></nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      const handleChange = (value: any) => {
-        console.log(value);
-      };
-      return { radioVal, handleChange };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
+const handleChange = (value) => {
+  console.log(value);
+};
 </script>
 ```
 
@@ -213,32 +181,32 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
 
 ### Radio Props
 
-| Attribute | Description                                  | Type                        | Default |
-| --------- | -------------------------------------------- | --------------------------- | ------- |
-| disabled  | Disable selection                            | boolean                     | `false` |
-| icon-size | [Icon Size](#/en-US/icon)                    | string \| number            | `18`    |
-| label     | Radio box ID                                 | string \| number \| boolean | -       |
-| shape     | Shape, optional values are `button`、`round` | string                      | `round` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| disabled | Disable selection | boolean | `false` |
+| icon-size | [Icon Size](#/en-US/icon) | string \| number | `18` |
+| label | Radio box ID | string \| number \| boolean | - |
+| shape | Shape, optional values are `button`、`round` | string | `round` |
 
 ### Radio Slots
 
-| Name        | Description            |
-| ----------- | ---------------------- |
-| icon        | Icon when not selected |
-| checkedIcon | Icon when selected     |
+| Name | Description |
+| --- | --- |
+| icon | Icon when not selected |
+| checkedIcon | Icon when selected |
 
 ### RadioGroup Props
 
-| Attribute     | Description                                                                                            | Type                        | Default    |
-| ------------- | ------------------------------------------------------------------------------------------------------ | --------------------------- | ---------- |
-| v-model       | The identifier of the currently selected item is selected when it is consistent with the `label` value | string \| number \| boolean | -          |
-| text-position | The position of the text, optional value：`left`,`right`                                               | string                      | `right`    |
-| direction     | Use horizontal and vertical optional values `horizontal`、`vertical`                                   | string                      | `vertical` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | The identifier of the currently selected item is selected when it is consistent with the `label` value | string \| number \| boolean | - |
+| text-position | The position of the text, optional value：`left`,`right` | string | `right` |
+| direction | Use horizontal and vertical optional values `horizontal`、`vertical` | string | `vertical` |
 
 ### RadioGroup Events
 
-| Event  | Description                      | Arguments                                                                                                   |
-| ------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | change | Triggered when the value changes | Currently selected item value（label）【There is a value after setting `label`, which is empty by default】 |
 
 ## Theming
@@ -247,17 +215,17 @@ Customize the icon through the slot, it is recommended to set the `icon` and `ch
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                  | Default Value              |
-| ------------------------------------- | -------------------------- |
-| --nut-radio-label-font-color          | _#1d1e1e_                  |
-| --nut-radio-label-font-active-color   | _var(--nut-primary-color)_ |
-| --nut-radio-label-disable-color       | _#999_                     |
-| --nut-radio-icon-disable-color        | _#d6d6d6_                  |
+| Name | Default Value |
+| --- | --- |
+| --nut-radio-label-font-color | _#1d1e1e_ |
+| --nut-radio-label-font-active-color | _var(--nut-primary-color)_ |
+| --nut-radio-label-disable-color | _#999_ |
+| --nut-radio-icon-disable-color | _#d6d6d6_ |
 | --nut-radio-label-button-border-color | _var(--nut-primary-color)_ |
-| --nut-radio-label-button-background   | _var(--nut-primary-color)_ |
-| --nut-radio-label-margin-left         | _15px_                     |
-| --nut-radio-button-border-radius      | _15px_                     |
-| --nut-radio-label-font-size           | _14px_                     |
-| --nut-radio-button-font-size          | _12px_                     |
-| --nut-radio-button-padding            | _5px 18px_                 |
-| --nut-radio-icon-disable-color2       | _var(--nut-help-color)_    |
+| --nut-radio-label-button-background | _var(--nut-primary-color)_ |
+| --nut-radio-label-margin-left | _15px_ |
+| --nut-radio-button-border-radius | _15px_ |
+| --nut-radio-label-font-size | _14px_ |
+| --nut-radio-button-font-size | _12px_ |
+| --nut-radio-button-padding | _5px 18px_ |
+| --nut-radio-icon-disable-color2 | _var(--nut-help-color)_ |
diff --git a/src/packages/__VUE/radio/doc.md b/src/packages/__VUE/radio/doc.md
index b66274decf..4433492304 100644
--- a/src/packages/__VUE/radio/doc.md
+++ b/src/packages/__VUE/radio/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```ts
+```js
 import { createApp } from 'vue';
 import { Radio, RadioGroup } from '@nutui/nutui';
 
@@ -21,7 +21,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="基础用法">
     <nut-cell>
@@ -47,15 +47,9 @@ app.use(RadioGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -65,7 +59,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="水平使用">
     <nut-cell>
@@ -91,15 +85,9 @@ app.use(RadioGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -109,7 +97,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="自定义尺寸">
     <nut-cell>
@@ -120,15 +108,9 @@ app.use(RadioGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -140,7 +122,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Radio自定义图标">
     <nut-cell>
@@ -159,18 +141,10 @@ app.use(RadioGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { Checklist } from '@nutui/icons-vue';
-  export default {
-    components: {
-      Checklist
-    },
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Checklist } from '@nutui/icons-vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -180,7 +154,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="触发事件">
     <nut-cell>
@@ -192,18 +166,12 @@ app.use(RadioGroup);
     <nut-cell title="当前选中值" :desc="radioVal"></nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      const handleChange = (value: any) => {
-        console.log(value);
-      };
-      return { radioVal, handleChange };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
+const handleChange = (value) => {
+  console.log(value);
+};
 </script>
 ```
 
@@ -213,32 +181,32 @@ app.use(RadioGroup);
 
 ### Radio Props
 
-| 参数      | 说明                               | 类型                        | 默认值  |
-| --------- | ---------------------------------- | --------------------------- | ------- |
-| disabled  | 是否禁用选择                       | boolean                     | `false` |
-| icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number            | `18`    |
-| label     | 单选框标识                         | string \| number \| boolean | -       |
-| shape     | 形状，可选值为 `button`、`round`   | string                      | `round` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| disabled | 是否禁用选择 | boolean | `false` |
+| icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18` |
+| label | 单选框标识 | string \| number \| boolean | - |
+| shape | 形状，可选值为 `button`、`round` | string | `round` |
 
 ### Radio Slots
 
-| 名称        | 说明           |
-| ----------- | -------------- |
-| icon        | 未选中时的图标 |
-| checkedIcon | 选中时的图标   |
+| 名称 | 说明 |
+| --- | --- |
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
 
 ### RadioGroup Props
 
-| 参数          | 说明                                              | 类型                        | 默认值     |
-| ------------- | ------------------------------------------------- | --------------------------- | ---------- |
-| v-model       | 当前选中项的标识符，与 `label` 值一致时呈选中状态 | string \| number \| boolean | -          |
-| text-position | 文本所在的位置，可选值：`left`,`right`            | string                      | `right`    |
-| direction     | 使用横纵方向 可选值 `horizontal、vertical `       | string                      | `vertical` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前选中项的标识符，与 `label` 值一致时呈选中状态 | string \| number \| boolean | - |
+| text-position | 文本所在的位置，可选值：`left`,`right` | string | `right` |
+| direction | 使用横纵方向 可选值 `horizontal、vertical ` | string | `vertical` |
 
 ### RadioGroup Events
 
-| 事件名 | 说明         | 回调参数                                             |
-| ------ | ------------ | ---------------------------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 值变化时触发 | 当前选中项值（label）【设置 label 后有值、默认为空】 |
 
 ## 主题定制
@@ -247,17 +215,17 @@ app.use(RadioGroup);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                  | 默认值                     |
-| ------------------------------------- | -------------------------- |
-| --nut-radio-label-font-color          | _#1d1e1e_                  |
-| --nut-radio-label-font-active-color   | _var(--nut-primary-color)_ |
-| --nut-radio-label-disable-color       | _#999_                     |
-| --nut-radio-icon-disable-color        | _#d6d6d6_                  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-radio-label-font-color | _#1d1e1e_ |
+| --nut-radio-label-font-active-color | _var(--nut-primary-color)_ |
+| --nut-radio-label-disable-color | _#999_ |
+| --nut-radio-icon-disable-color | _#d6d6d6_ |
 | --nut-radio-label-button-border-color | _var(--nut-primary-color)_ |
-| --nut-radio-label-button-background   | _var(--nut-primary-color)_ |
-| --nut-radio-label-margin-left         | _15px_                     |
-| --nut-radio-button-border-radius      | _15px_                     |
-| --nut-radio-label-font-size           | _14px_                     |
-| --nut-radio-button-font-size          | _12px_                     |
-| --nut-radio-button-padding            | _5px 18px_                 |
-| --nut-radio-icon-disable-color2       | _var(--nut-help-color)_    |
+| --nut-radio-label-button-background | _var(--nut-primary-color)_ |
+| --nut-radio-label-margin-left | _15px_ |
+| --nut-radio-button-border-radius | _15px_ |
+| --nut-radio-label-font-size | _14px_ |
+| --nut-radio-button-font-size | _12px_ |
+| --nut-radio-button-padding | _5px 18px_ |
+| --nut-radio-icon-disable-color2 | _var(--nut-help-color)_ |
diff --git a/src/packages/__VUE/radio/doc.taro.md b/src/packages/__VUE/radio/doc.taro.md
index f86f3cd6ad..5f51b0b512 100644
--- a/src/packages/__VUE/radio/doc.taro.md
+++ b/src/packages/__VUE/radio/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```ts
+```js
 import { createApp } from 'vue';
 import { Radio, RadioGroup } from '@nutui/nutui-taro';
 
@@ -21,7 +21,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="基础用法">
     <nut-cell>
@@ -47,15 +47,9 @@ app.use(RadioGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -65,7 +59,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="水平使用">
     <nut-cell>
@@ -91,15 +85,9 @@ app.use(RadioGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -109,7 +97,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="自定义尺寸">
     <nut-cell>
@@ -120,15 +108,9 @@ app.use(RadioGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -140,7 +122,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Radio自定义图标">
     <nut-cell>
@@ -159,18 +141,10 @@ app.use(RadioGroup);
     </nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { Checklist } from '@nutui/icons-vue-taro';
-  export default {
-    components: {
-      Checklist
-    },
-    setup() {
-      const radioVal = ref('1');
-      return { radioVal };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Checklist } from '@nutui/icons-vue-taro';
+const radioVal = ref('1');
 </script>
 ```
 
@@ -180,7 +154,7 @@ app.use(RadioGroup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="触发事件">
     <nut-cell>
@@ -192,18 +166,12 @@ app.use(RadioGroup);
     <nut-cell title="当前选中值" :desc="radioVal"></nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const radioVal = ref('1');
-      const handleChange = (value: any) => {
-        console.log(value);
-      };
-      return { radioVal, handleChange };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const radioVal = ref('1');
+const handleChange = (value) => {
+  console.log(value);
+};
 </script>
 ```
 
@@ -213,32 +181,32 @@ app.use(RadioGroup);
 
 ### Radio Props
 
-| 参数      | 说明                               | 类型                        | 默认值  |
-| --------- | ---------------------------------- | --------------------------- | ------- |
-| disabled  | 是否禁用选择                       | boolean                     | `false` |
-| icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number            | `18`    |
-| label     | 单选框标识                         | string \| number \| boolean | -       |
-| shape     | 形状，可选值为 button、round       | string                      | `round` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| disabled | 是否禁用选择 | boolean | `false` |
+| icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18` |
+| label | 单选框标识 | string \| number \| boolean | - |
+| shape | 形状，可选值为 `button`、`round` | string | `round` |
 
 ### Radio Slots
 
-| 名称        | 说明           |
-| ----------- | -------------- |
-| icon        | 未选中时的图标 |
-| checkedIcon | 选中时的图标   |
+| 名称 | 说明 |
+| --- | --- |
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
 
 ### RadioGroup Props
 
-| 参数          | 说明                                              | 类型                        | 默认值     |
-| ------------- | ------------------------------------------------- | --------------------------- | ---------- |
-| v-model       | 当前选中项的标识符，与 `label` 值一致时呈选中状态 | string \| number \| boolean | -          |
-| text-position | 文本所在的位置，可选值：`left`,`right`            | string                      | `right`    |
-| direction     | 使用横纵方向 可选值 `horizontal、vertical  `      | string                      | `vertical` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前选中项的标识符，与 `label` 值一致时呈选中状态 | string \| number \| boolean | - |
+| text-position | 文本所在的位置，可选值：`left`,`right` | string | `right` |
+| direction | 使用横纵方向 可选值 `horizontal、vertical ` | string | `vertical` |
 
 ### RadioGroup Events
 
-| 事件名 | 说明         | 回调参数                                             |
-| ------ | ------------ | ---------------------------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 值变化时触发 | 当前选中项值（label）【设置 label 后有值、默认为空】 |
 
 ## 主题定制
@@ -247,17 +215,17 @@ app.use(RadioGroup);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                  | 默认值                     |
-| ------------------------------------- | -------------------------- |
-| --nut-radio-label-font-color          | _#1d1e1e_                  |
-| --nut-radio-label-font-active-color   | _var(--nut-primary-color)_ |
-| --nut-radio-label-disable-color       | _#999_                     |
-| --nut-radio-icon-disable-color        | _#d6d6d6_                  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-radio-label-font-color | _#1d1e1e_ |
+| --nut-radio-label-font-active-color | _var(--nut-primary-color)_ |
+| --nut-radio-label-disable-color | _#999_ |
+| --nut-radio-icon-disable-color | _#d6d6d6_ |
 | --nut-radio-label-button-border-color | _var(--nut-primary-color)_ |
-| --nut-radio-label-button-background   | _var(--nut-primary-color)_ |
-| --nut-radio-label-margin-left         | _15px_                     |
-| --nut-radio-button-border-radius      | _15px_                     |
-| --nut-radio-label-font-size           | _14px_                     |
-| --nut-radio-button-font-size          | _12px_                     |
-| --nut-radio-button-padding            | _5px 18px_                 |
-| --nut-radio-icon-disable-color2       | _var(--nut-help-color)_    |
+| --nut-radio-label-button-background | _var(--nut-primary-color)_ |
+| --nut-radio-label-margin-left | _15px_ |
+| --nut-radio-button-border-radius | _15px_ |
+| --nut-radio-label-font-size | _14px_ |
+| --nut-radio-button-font-size | _12px_ |
+| --nut-radio-button-padding | _5px 18px_ |
+| --nut-radio-icon-disable-color2 | _var(--nut-help-color)_ |
diff --git a/src/packages/__VUE/range/demo.vue b/src/packages/__VUE/range/demo.vue
index 308bbabef5..9077bfb225 100644
--- a/src/packages/__VUE/range/demo.vue
+++ b/src/packages/__VUE/range/demo.vue
@@ -2,36 +2,36 @@
   <div class="demo">
     <h2>{{ translate('title') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value1" @change="onChange"></nut-range>
+      <nut-range v-model="state.value1" @change="onChange"></nut-range>
     </nut-cell>
     <h2>{{ translate('title1') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value2" range @change="onChange"></nut-range>
+      <nut-range v-model="state.value2" range @change="onChange"></nut-range>
     </nut-cell>
     <h2>{{ translate('title2') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value3" :max="10" :min="-10" @change="onChange"></nut-range>
+      <nut-range v-model="state.value3" :max="10" :min="-10" @change="onChange"></nut-range>
     </nut-cell>
     <h2>{{ translate('title3') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value4" :step="5" @change="onChange"></nut-range>
+      <nut-range v-model="state.value4" :step="5" @change="onChange"></nut-range>
     </nut-cell>
     <h2>{{ translate('title4') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value5" hidden-range @change="onChange"></nut-range>
+      <nut-range v-model="state.value5" hidden-range @change="onChange"></nut-range>
     </nut-cell>
     <h2>{{ translate('title5') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value6" hidden-tag @change="onChange"></nut-range>
+      <nut-range v-model="state.value6" hidden-tag @change="onChange"></nut-range>
     </nut-cell>
     <h2>{{ translate('title6') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value7" disabled></nut-range>
+      <nut-range v-model="state.value7" disabled></nut-range>
     </nut-cell>
     <h2>{{ translate('title7') }}</h2>
     <nut-cell class="cell">
       <nut-range
-        v-model="value8"
+        v-model="state.value8"
         inactive-color="rgba(163,184,255,1)"
         button-color="rgba(52,96,250,1)"
         active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
@@ -40,9 +40,9 @@
     </nut-cell>
     <h2>{{ translate('title8') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value9" @change="onChange">
+      <nut-range v-model="state.value9" @change="onChange">
         <template #button>
-          <div class="custom-button">{{ value9 }}</div>
+          <div class="custom-button">{{ state.value9 }}</div>
         </template>
       </nut-range>
     </nut-cell>
@@ -50,36 +50,36 @@
     <h2>{{ translate('title9') }}</h2>
     <nut-cell class="vertical_div">
       <view class="div">
-        <nut-range v-model="value10" :vertical="true" @change="onChange"></nut-range>
+        <nut-range v-model="state.value10" :vertical="true" @change="onChange"></nut-range>
       </view>
       <view class="div">
-        <nut-range v-model="value11" range :vertical="true" @change="onChange"></nut-range>
+        <nut-range v-model="state.value11" range :vertical="true" @change="onChange"></nut-range>
       </view>
     </nut-cell>
     <h2>{{ translate('title10') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value12" :marks="marks" :hidden-range="true" @change="onChange"></nut-range>
+      <nut-range v-model="state.value12" :marks="state.marks" :hidden-range="true" @change="onChange"></nut-range>
     </nut-cell>
     <nut-cell class="cell">
-      <nut-range v-model="value13" range :marks="marks" :hidden-range="true" @change="onChange"></nut-range>
+      <nut-range v-model="state.value13" range :marks="state.marks" :hidden-range="true" @change="onChange"></nut-range>
     </nut-cell>
 
     <nut-cell class="vertical_div">
       <view class="div">
         <nut-range
-          v-model="value14"
+          v-model="state.value14"
           :vertical="true"
-          :marks="marks"
+          :marks="state.marks"
           :hidden-range="true"
           @change="onChange"
         ></nut-range>
       </view>
       <view class="div">
         <nut-range
-          v-model="value15"
+          v-model="state.value15"
           range
           :vertical="true"
-          :marks="marks"
+          :marks="state.marks"
           :hidden-range="true"
           @change="onChange"
         ></nut-range>
@@ -88,8 +88,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
 const { translate } = createComponent('range');
@@ -124,44 +124,34 @@ const initTranslate = () =>
       title10: 'Marks'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const state = reactive({
-      value1: 40,
-      value2: [20, 80],
-      value3: 0,
-      value4: 20,
-      value5: 30,
-      value6: 40,
-      value7: 50,
-      value8: 40,
-      value9: 60,
-      value10: 20,
-      value11: [20, 80],
-      value12: 60,
-      value13: [20, 80],
-      value14: 60,
-      value15: [20, 80],
-      marks: {
-        0: 0,
-        20: 20,
-        40: 40,
-        60: 60,
-        80: 80,
-        100: 100
-      }
-    });
-
-    const onChange = (value: number) => showToast.text('value：' + value);
-    return {
-      ...toRefs(state),
-      onChange,
-      translate
-    };
+initTranslate();
+const state = reactive({
+  value1: 40,
+  value2: [20, 80],
+  value3: 0,
+  value4: 20,
+  value5: 30,
+  value6: 40,
+  value7: 50,
+  value8: 40,
+  value9: 60,
+  value10: 20,
+  value11: [20, 80],
+  value12: 60,
+  value13: [20, 80],
+  value14: 60,
+  value15: [20, 80],
+  marks: {
+    0: 0,
+    20: 20,
+    40: 40,
+    60: 60,
+    80: 80,
+    100: 100
   }
 });
+
+const onChange = (value: number) => showToast.text('value：' + value);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/range/doc.en-US.md b/src/packages/__VUE/range/doc.en-US.md
index d11f8ac316..894f69395d 100644
--- a/src/packages/__VUE/range/doc.en-US.md
+++ b/src/packages/__VUE/range/doc.en-US.md
@@ -6,7 +6,7 @@ Slide the input bar to select a value within a given range.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Range } from '@nutui/nutui';
 
@@ -18,27 +18,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(40);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(40);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -48,27 +39,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range range v-model="value" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref([20, 80]);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref([20, 80]);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -78,27 +60,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" :max="10" :min="-10" @change="onChange" />
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(0);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(0);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -108,27 +81,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" :step="5" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(20);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(20);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -138,27 +102,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" hidden-range @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(30);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(30);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -168,27 +123,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" :hidden-tag="true" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(40);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(40);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -198,27 +144,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" disabled @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(50);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(50);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -228,9 +165,9 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range
       v-model="value"
       inactive-color="rgba(163,184,255,1)"
@@ -242,20 +179,11 @@ app.use(Range);
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(40);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(40);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -265,20 +193,20 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <style>
-  .custom-button {
-    width: 26px;
-    color: #fff;
-    font-size: 10px;
-    line-height: 18px;
-    text-align: center;
-    background-color: #ee0a24;
-    border-radius: 100px;
-  }
+.custom-button {
+  width: 26px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  background-color: #ee0a24;
+  border-radius: 100px;
+}
 </style>
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" @change="onChange">
       <template #button>
         <div class="custom-button">{{ value }}</div>
@@ -287,20 +215,11 @@ app.use(Range);
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(60);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(60);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -310,21 +229,21 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <style>
-  .vertical_div {
-    height: 180px;
-    padding: 10px;
-  }
-  .div {
-    width: 150px;
-  }
-  .cell {
-    padding: 40px 18px;
-  }
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+}
+.div {
+  width: 150px;
+}
+.cell {
+  padding: 40px 18px;
+}
 </style>
 <template>
-  <nut-cell class="vertical_div">
+  <nut-cell class="vertical_div cell">
     <div class="div">
       <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
     </div>
@@ -334,22 +253,12 @@ app.use(Range);
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value10 = ref(20);
-      const value11 = ref([20, 80]);
-      const onChange = (value) => showToast.text('value：' + value);
-      return {
-        value10,
-        value11,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value10 = ref(20);
+const value11 = ref([20, 80]);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -359,35 +268,41 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <style>
-  .vertical_div {
-    height: 180px;
-    padding: 10px;
-  }
-  .div {
-    width: 150px;
-  }
-  .cell {
-    padding: 40px 18px;
-  }
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+}
+.div {
+  width: 150px;
+}
+.cell {
+  padding: 40px 18px;
+}
 </style>
 <template>
   <div>
     <nut-cell class="cell">
-      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range v-model="state.value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
     </nut-cell>
     <nut-cell class="cell">
-      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range range v-model="state.value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
     </nut-cell>
-    <nut-cell class="vertical_div">
+    <nut-cell class="vertical_div cell">
       <div class="div">
-        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
+        <nut-range
+          v-model="state.value14"
+          @change="onChange"
+          :vertical="true"
+          :marks="marks"
+          :hiddenRange="true"
+        ></nut-range>
       </div>
       <div class="div">
         <nut-range
           range
-          v-model="value15"
+          v-model="state.value15"
           @change="onChange"
           :vertical="true"
           :marks="marks"
@@ -398,34 +313,24 @@ app.use(Range);
   </div>
 </template>
 
-<script lang="ts">
-  import { ref, reactive, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        value12: 60,
-        value13: [20, 80],
-        value14: 60,
-        value15: [20, 80]
-      });
-      const marks = ref({
-        0: 0,
-        20: 20,
-        40: 40,
-        60: 60,
-        80: 80,
-        100: 100
-      });
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        ...toRefs(state),
-        marks,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  value12: 60,
+  value13: [20, 80],
+  value14: 60,
+  value15: [20, 80]
+});
+const marks = ref({
+  0: 0,
+  20: 20,
+  40: 40,
+  60: 60,
+  80: 80,
+  100: 100
+});
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -435,34 +340,34 @@ app.use(Range);
 
 ### Props
 
-| Attribute      | Description                        | Type               | Default                  |
-| -------------- | ---------------------------------- | ------------------ | ------------------------ |
-| v-model        | current progress percentage        | number \| number[] | `0`                      |
-| range          | Whether to enable dual slider mode | boolean            | `false`                  |
-| max            | maximum                            | number \| string   | `100`                    |
-| min            | minimum                            | number \| string   | `0`                      |
-| step           | step size                          | number \| string   | `1`                      |
-| disabled       | Whether to disable the slider      | boolean            | `false`                  |
-| vertical       | Whether to display vertically      | boolean            | `false`                  |
-| hidden-range   | whether to hide range values       | boolean            | `false`                  |
-| hidden-tag     | whether to hide the label          | boolean            | `false`                  |
-| active-color   | progress bar active color          | string             | `rgba(250, 44, 25, 1)`   |
-| inactive-color | Progress bar inactive color        | string             | `rgba(255, 163, 154, 1)` |
-| button-color   | button color                       | string             | `rgba(250, 44, 25, 1)`   |
-| marks          | scale mark                         | object{key:number} | `{}`                     |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | current progress percentage | number \| number[] | `0` |
+| range | Whether to enable dual slider mode | boolean | `false` |
+| max | maximum | number \| string | `100` |
+| min | minimum | number \| string | `0` |
+| step | step size | number \| string | `1` |
+| disabled | Whether to disable the slider | boolean | `false` |
+| vertical | Whether to display vertically | boolean | `false` |
+| hidden-range | whether to hide range values | boolean | `false` |
+| hidden-tag | whether to hide the label | boolean | `false` |
+| active-color | progress bar active color | string | `rgba(250, 44, 25, 1)` |
+| inactive-color | Progress bar inactive color | string | `rgba(255, 163, 154, 1)` |
+| button-color | button color | string | `rgba(250, 44, 25, 1)` |
+| marks | scale mark | object{key:number} | `{}` |
 
 ### Events
 
-| Event      | Description                                              | Arguments                   |
-| ---------- | -------------------------------------------------------- | --------------------------- |
-| change     | Triggered when the progress changes and the drag is over | `value: number \| number[]` |
-| drag-start | Triggered when dragging starts                           | -                           |
-| drag-end   | Triggered when the drag is over                          | -                           |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| change | Triggered when the progress changes and the drag is over | `value: number \| number[]` |
+| drag-start | Triggered when dragging starts | - |
+| drag-end | Triggered when the drag is over | - |
 
 ### Slots
 
-| Name   | Description         |
-| ------ | ------------------- |
+| Name | Description |
+| --- | --- |
 | button | custom slide button |
 
 ## Theming
@@ -471,13 +376,13 @@ app.use(Range);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                         | Default Value                                                                             |
-| ---------------------------- | ----------------------------------------------------------------------------------------- |
-| --nut-range-tip-font-color   | _#333333_                                                                                 |
-| --nut-range-bg-color         | _var(--nut-primary-color)_                                                                |
-| --nut-range-bg-color-tick    | _#fa958c_                                                                                 |
-| --nut-range-bar-bg-color     | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
-| --nut-range-bar-btn-bg-color | _var(--nut-white)_                                                                        |
-| --nut-range-bar-btn-width    | _24px_                                                                                    |
-| --nut-range-bar-btn-height   | _24px_                                                                                    |
-| --nut-range-bar-btn-border   | _1px solid var(--nut-primary-color)_                                                      |
+| Name | Default Value |
+| --- | --- |
+| --nut-range-tip-font-color | _#333333_ |
+| --nut-range-bg-color | _var(--nut-primary-color)_ |
+| --nut-range-bg-color-tick | _#fa958c_ |
+| --nut-range-bar-bg-color | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
+| --nut-range-bar-btn-bg-color | _var(--nut-white)_ |
+| --nut-range-bar-btn-width | _24px_ |
+| --nut-range-bar-btn-height | _24px_ |
+| --nut-range-bar-btn-border | _1px solid var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/range/doc.md b/src/packages/__VUE/range/doc.md
index 57a1f9a4af..b74163d3d7 100644
--- a/src/packages/__VUE/range/doc.md
+++ b/src/packages/__VUE/range/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Range } from '@nutui/nutui';
 
@@ -18,27 +18,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(40);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(40);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -48,27 +39,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range range v-model="value" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref([20, 80]);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref([20, 80]);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -78,27 +60,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" :max="10" :min="-10" @change="onChange" />
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(0);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(0);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -108,27 +81,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" :step="5" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(20);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(20);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -138,27 +102,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" hidden-range @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(30);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(30);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -168,27 +123,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" :hidden-tag="true" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(40);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(40);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -198,27 +144,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" disabled @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(50);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(50);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -228,9 +165,9 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range
       v-model="value"
       inactive-color="rgba(163,184,255,1)"
@@ -242,20 +179,11 @@ app.use(Range);
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(40);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(40);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -265,20 +193,20 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <style>
-  .custom-button {
-    width: 26px;
-    color: #fff;
-    font-size: 10px;
-    line-height: 18px;
-    text-align: center;
-    background-color: #ee0a24;
-    border-radius: 100px;
-  }
+.custom-button {
+  width: 26px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  background-color: #ee0a24;
+  border-radius: 100px;
+}
 </style>
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" @change="onChange">
       <template #button>
         <div class="custom-button">{{ value }}</div>
@@ -287,20 +215,11 @@ app.use(Range);
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(60);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref(60);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -310,18 +229,18 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <style>
-  .vertical_div {
-    height: 180px;
-    padding: 10px;
-  }
-  .div {
-    width: 150px;
-  }
-  .cell {
-    padding: 40px 18px;
-  }
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+}
+.div {
+  width: 150px;
+}
+.cell {
+  padding: 40px 18px;
+}
 </style>
 <template>
   <nut-cell class="vertical_div cell">
@@ -334,22 +253,12 @@ app.use(Range);
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value10 = ref(20);
-      const value11 = ref([20, 80]);
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        value10,
-        value11,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value10 = ref(20);
+const value11 = ref([20, 80]);
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -359,35 +268,41 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <style>
-  .vertical_div {
-    height: 180px;
-    padding: 10px;
-  }
-  .div {
-    width: 150px;
-  }
-  .cell {
-    padding: 40px 18px;
-  }
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+}
+.div {
+  width: 150px;
+}
+.cell {
+  padding: 40px 18px;
+}
 </style>
 <template>
   <div>
     <nut-cell class="cell">
-      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range v-model="state.value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
     </nut-cell>
     <nut-cell class="cell">
-      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range range v-model="state.value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
     </nut-cell>
     <nut-cell class="vertical_div cell">
       <div class="div">
-        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
+        <nut-range
+          v-model="state.value14"
+          @change="onChange"
+          :vertical="true"
+          :marks="marks"
+          :hiddenRange="true"
+        ></nut-range>
       </div>
       <div class="div">
         <nut-range
           range
-          v-model="value15"
+          v-model="state.value15"
           @change="onChange"
           :vertical="true"
           :marks="marks"
@@ -398,34 +313,24 @@ app.use(Range);
   </div>
 </template>
 
-<script lang="ts">
-  import { ref, reactive, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        value12: 60,
-        value13: [20, 80],
-        value14: 60,
-        value15: [20, 80]
-      });
-      const marks = ref({
-        0: 0,
-        20: 20,
-        40: 40,
-        60: 60,
-        80: 80,
-        100: 100
-      });
-      const onChange = (value) => showToast.text('当前值：' + value);
-      return {
-        ...toRefs(state),
-        marks,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  value12: 60,
+  value13: [20, 80],
+  value14: 60,
+  value15: [20, 80]
+});
+const marks = ref({
+  0: 0,
+  20: 20,
+  40: 40,
+  60: 60,
+  80: 80,
+  100: 100
+});
+const onChange = (value) => showToast.text(value);
 </script>
 ```
 
@@ -435,34 +340,34 @@ app.use(Range);
 
 ### Props
 
-| 参数           | 说明               | 类型               | 默认值                   |
-| -------------- | ------------------ | ------------------ | ------------------------ |
-| v-model        | 当前进度百分比     | number \| number[] | `0`                      |
-| range          | 是否开启双滑块模式 | boolean            | `false`                  |
-| max            | 最大值             | number \| string   | `100`                    |
-| min            | 最小值             | number \| string   | `0`                      |
-| step           | 步长               | number \| string   | `1`                      |
-| disabled       | 是否禁用滑块       | boolean            | `false`                  |
-| vertical       | 是否竖向展示       | boolean            | `false`                  |
-| hidden-range   | 是否隐藏范围值     | boolean            | `false`                  |
-| hidden-tag     | 是否隐藏标签       | boolean            | `false`                  |
-| active-color   | 进度条激活态颜色   | string             | `rgba(250, 44, 25, 1)`   |
-| inactive-color | 进度条非激活态颜色 | string             | `rgba(255, 163, 154, 1)` |
-| button-color   | 按钮颜色           | string             | `rgba(250, 44, 25, 1)`   |
-| marks          | 刻度标示           | object{key:number} | `{}`                     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前进度百分比 | number \| number[] | `0` |
+| range | 是否开启双滑块模式 | boolean | `false` |
+| max | 最大值 | number \| string | `100` |
+| min | 最小值 | number \| string | `0` |
+| step | 步长 | number \| string | `1` |
+| disabled | 是否禁用滑块 | boolean | `false` |
+| vertical | 是否竖向展示 | boolean | `false` |
+| hidden-range | 是否隐藏范围值 | boolean | `false` |
+| hidden-tag | 是否隐藏标签 | boolean | `false` |
+| active-color | 进度条激活态颜色 | string | `rgba(250, 44, 25, 1)` |
+| inactive-color | 进度条非激活态颜色 | string | `rgba(255, 163, 154, 1)` |
+| button-color | 按钮颜色 | string | `rgba(250, 44, 25, 1)` |
+| marks | 刻度标示 | object{key:number} | `{}` |
 
 ### Events
 
-| 事件名     | 说明                     | 回调参数                    |
-| ---------- | ------------------------ | --------------------------- |
-| change     | 进度变化且结束拖动后触发 | `value: number \| number[]` |
-| drag-start | 开始拖动时触发           | -                           |
-| drag-end   | 结束拖动时触发           | -                           |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 进度变化且结束拖动后触发 | `value: number \| number[]` |
+| drag-start | 开始拖动时触发 | - |
+| drag-end | 结束拖动时触发 | - |
 
 ### Slots
 
-| 名称   | 说明           |
-| ------ | -------------- |
+| 名称 | 说明 |
+| --- | --- |
 | button | 自定义滑动按钮 |
 
 ## 主题定制
@@ -471,13 +376,13 @@ app.use(Range);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                         | 默认值                                                                                    |
-| ---------------------------- | ----------------------------------------------------------------------------------------- |
-| --nut-range-tip-font-color   | _#333333_                                                                                 |
-| --nut-range-bg-color         | _var(--nut-primary-color)_                                                                |
-| --nut-range-bg-color-tick    | _#fa958c_                                                                                 |
-| --nut-range-bar-bg-color     | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
-| --nut-range-bar-btn-bg-color | _var(--nut-white)_                                                                        |
-| --nut-range-bar-btn-width    | _24px_                                                                                    |
-| --nut-range-bar-btn-height   | _24px_                                                                                    |
-| --nut-range-bar-btn-border   | _1px solid var(--nut-primary-color)_                                                      |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-range-tip-font-color | _#333333_ |
+| --nut-range-bg-color | _var(--nut-primary-color)_ |
+| --nut-range-bg-color-tick | _#fa958c_ |
+| --nut-range-bar-bg-color | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
+| --nut-range-bar-btn-bg-color | _var(--nut-white)_ |
+| --nut-range-bar-btn-width | _24px_ |
+| --nut-range-bar-btn-height | _24px_ |
+| --nut-range-bar-btn-border | _1px solid var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/range/doc.taro.md b/src/packages/__VUE/range/doc.taro.md
index 9de4995eb2..b5ee60e543 100644
--- a/src/packages/__VUE/range/doc.taro.md
+++ b/src/packages/__VUE/range/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Range } from '@nutui/nutui-taro';
 
@@ -18,25 +18,17 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(40);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(40);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -46,25 +38,17 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range range v-model="value" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref([20, 80]);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref([20, 80]);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -74,25 +58,17 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" :max="10" :min="-10" @change="onChange" />
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(0);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(0);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -102,25 +78,17 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" :step="5" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(20);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(20);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -130,25 +98,17 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" hidden-range @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(30);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(30);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -158,25 +118,17 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" :hidden-tag="true" @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(40);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(40);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -186,25 +138,17 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" disabled @change="onChange"></nut-range>
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(50);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(50);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -214,9 +158,9 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range
       v-model="value"
       inactive-color="rgba(163,184,255,1)"
@@ -228,18 +172,10 @@ app.use(Range);
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(40);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(40);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -249,20 +185,20 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <style>
-  .custom-button {
-    width: 26px;
-    color: #fff;
-    font-size: 10px;
-    line-height: 18px;
-    text-align: center;
-    background-color: #ee0a24;
-    border-radius: 100px;
-  }
+.custom-button {
+  width: 26px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  background-color: #ee0a24;
+  border-radius: 100px;
+}
 </style>
 <template>
-  <nut-cell :style="{padding: '40px 18px'}">
+  <nut-cell :style="{ padding: '40px 18px' }">
     <nut-range v-model="value" @change="onChange">
       <template #button>
         <div class="custom-button">{{ value }}</div>
@@ -271,18 +207,10 @@ app.use(Range);
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(60);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(60);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -292,21 +220,21 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <style>
-  .vertical_div {
-    height: 180px;
-    padding: 10px;
-  }
-  .div {
-    width: 150px;
-  }
-  .cell {
-    padding: 40px 18px;
-  }
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+}
+.div {
+  width: 150px;
+}
+.cell {
+  padding: 40px 18px;
+}
 </style>
 <template>
-  <nut-cell class="vertical_div">
+  <nut-cell class="vertical_div cell">
     <div class="div">
       <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
     </div>
@@ -316,20 +244,11 @@ app.use(Range);
   </nut-cell>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value10 = ref(20);
-      const value11 = ref([20, 80]);
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        value10,
-        value11,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value10 = ref(20);
+const value11 = ref([20, 80]);
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -339,35 +258,41 @@ app.use(Range);
 
 :::demo
 
-```html
+```vue
 <style>
-  .vertical_div {
-    height: 180px;
-    padding: 10px;
-  }
-  .div {
-    width: 150px;
-  }
-  .cell {
-    padding: 40px 18px;
-  }
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+}
+.div {
+  width: 150px;
+}
+.cell {
+  padding: 40px 18px;
+}
 </style>
 <template>
   <div>
     <nut-cell class="cell">
-      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range v-model="state.value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
     </nut-cell>
     <nut-cell class="cell">
-      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range range v-model="state.value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
     </nut-cell>
-    <nut-cell class="vertical_div">
+    <nut-cell class="vertical_div cell">
       <div class="div">
-        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
+        <nut-range
+          v-model="state.value14"
+          @change="onChange"
+          :vertical="true"
+          :marks="marks"
+          :hiddenRange="true"
+        ></nut-range>
       </div>
       <div class="div">
         <nut-range
           range
-          v-model="value15"
+          v-model="state.value15"
           @change="onChange"
           :vertical="true"
           :marks="marks"
@@ -378,32 +303,23 @@ app.use(Range);
   </div>
 </template>
 
-<script lang="ts">
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        value12: 60,
-        value13: [20, 80],
-        value14: 60,
-        value15: [20, 80]
-      });
-      const marks = ref({
-        0: 0,
-        20: 20,
-        40: 40,
-        60: 60,
-        80: 80,
-        100: 100
-      });
-      const onChange = (value) => console.log('当前值：' + value);
-      return {
-        ...toRefs(state),
-        marks,
-        onChange
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const state = reactive({
+  value12: 60,
+  value13: [20, 80],
+  value14: 60,
+  value15: [20, 80]
+});
+const marks = ref({
+  0: 0,
+  20: 20,
+  40: 40,
+  60: 60,
+  80: 80,
+  100: 100
+});
+const onChange = (value) => console.log(value);
 </script>
 ```
 
@@ -413,34 +329,34 @@ app.use(Range);
 
 ### Props
 
-| 参数           | 说明               | 类型               | 默认值                   |
-| -------------- | ------------------ | ------------------ | ------------------------ |
-| v-model        | 当前进度百分比     | number \| number[] | `0`                      |
-| range          | 是否开启双滑块模式 | boolean            | `false`                  |
-| max            | 最大值             | number \| string   | `100`                    |
-| min            | 最小值             | number \| string   | `0`                      |
-| step           | 步长               | number \| string   | `1`                      |
-| disabled       | 是否禁用滑块       | boolean            | `false`                  |
-| vertical       | 是否竖向展示       | boolean            | `false`                  |
-| hidden-range   | 是否隐藏范围值     | boolean            | `false`                  |
-| hidden-tag     | 是否隐藏标签       | boolean            | `false`                  |
-| active-color   | 进度条激活态颜色   | string             | `rgba(250, 44, 25, 1)`   |
-| inactive-color | 进度条非激活态颜色 | string             | `rgba(255, 163, 154, 1)` |
-| button-color   | 按钮颜色           | string             | `rgba(250, 44, 25, 1)`   |
-| marks          | 刻度标示           | object{key:number} | `{}`                     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前进度百分比 | number \| number[] | `0` |
+| range | 是否开启双滑块模式 | boolean | `false` |
+| max | 最大值 | number \| string | `100` |
+| min | 最小值 | number \| string | `0` |
+| step | 步长 | number \| string | `1` |
+| disabled | 是否禁用滑块 | boolean | `false` |
+| vertical | 是否竖向展示 | boolean | `false` |
+| hidden-range | 是否隐藏范围值 | boolean | `false` |
+| hidden-tag | 是否隐藏标签 | boolean | `false` |
+| active-color | 进度条激活态颜色 | string | `rgba(250, 44, 25, 1)` |
+| inactive-color | 进度条非激活态颜色 | string | `rgba(255, 163, 154, 1)` |
+| button-color | 按钮颜色 | string | `rgba(250, 44, 25, 1)` |
+| marks | 刻度标示 | object{key:number} | `{}` |
 
 ### Events
 
-| 事件名     | 说明                     | 回调参数                    |
-| ---------- | ------------------------ | --------------------------- |
-| change     | 进度变化且结束拖动后触发 | `value: number \| number[]` |
-| drag-start | 开始拖动时触发           | -                           |
-| drag-end   | 结束拖动时触发           | -                           |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 进度变化且结束拖动后触发 | `value: number \| number[]` |
+| drag-start | 开始拖动时触发 | - |
+| drag-end | 结束拖动时触发 | - |
 
 ### Slots
 
-| 名称   | 说明           |
-| ------ | -------------- |
+| 名称 | 说明 |
+| --- | --- |
 | button | 自定义滑动按钮 |
 
 ## 主题定制
@@ -449,13 +365,13 @@ app.use(Range);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                         | 默认值                                                                                    |
-| ---------------------------- | ----------------------------------------------------------------------------------------- |
-| --nut-range-tip-font-color   | _#333333_                                                                                 |
-| --nut-range-bg-color         | _var(--nut-primary-color)_                                                                |
-| --nut-range-bg-color-tick    | _#fa958c_                                                                                 |
-| --nut-range-bar-bg-color     | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
-| --nut-range-bar-btn-bg-color | _var(--nut-white)_                                                                        |
-| --nut-range-bar-btn-width    | _24px_                                                                                    |
-| --nut-range-bar-btn-height   | _24px_                                                                                    |
-| --nut-range-bar-btn-border   | _1px solid var(--nut-primary-color)_                                                      |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-range-tip-font-color | _#333333_ |
+| --nut-range-bg-color | _var(--nut-primary-color)_ |
+| --nut-range-bg-color-tick | _#fa958c_ |
+| --nut-range-bar-bg-color | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
+| --nut-range-bar-btn-bg-color | _var(--nut-white)_ |
+| --nut-range-bar-btn-width | _24px_ |
+| --nut-range-bar-btn-height | _24px_ |
+| --nut-range-bar-btn-border | _1px solid var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/rate/demo.vue b/src/packages/__VUE/rate/demo.vue
index 35d4ebd009..c0da8e8fca 100644
--- a/src/packages/__VUE/rate/demo.vue
+++ b/src/packages/__VUE/rate/demo.vue
@@ -31,8 +31,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { HeartFill } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -63,31 +63,21 @@ const initTranslate = () =>
       title8: 'Custom size 35px'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const state = reactive({
-      val: 3,
-      val1: 3.5,
-      val2: 3,
-      val3: 3,
-      val4: 3,
-      val5: 3,
-      val6: 3,
-      val7: 3,
-      val8: 3
-    });
-    const onChange = (val: string) => {
-      showToast.text(val);
-    };
-    return {
-      state,
-      onChange,
-      translate,
-      HeartFill
-    };
-  }
+initTranslate();
+const state = reactive({
+  val: 3,
+  val1: 3.5,
+  val2: 3,
+  val3: 3,
+  val4: 3,
+  val5: 3,
+  val6: 3,
+  val7: 3,
+  val8: 3
 });
+const onChange = (val: string) => {
+  showToast.text(val);
+};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/searchbar/demo.vue b/src/packages/__VUE/searchbar/demo.vue
index 86df47b3a0..ac37198fb3 100644
--- a/src/packages/__VUE/searchbar/demo.vue
+++ b/src/packages/__VUE/searchbar/demo.vue
@@ -1,44 +1,44 @@
 <template>
   <div class="demo full">
     <h2>{{ translate('basic1') }}</h2>
-    <nut-searchbar v-model="searchValue" :label="translate('word1')" :focus-style="{ outline: '1px solid red' }">
+    <nut-searchbar v-model="state.searchValue" :label="translate('word1')" :focus-style="{ outline: '1px solid red' }">
     </nut-searchbar>
 
     <h2>{{ translate('shape') }}</h2>
     <nut-searchbar shape="square"></nut-searchbar>
 
     <h2>{{ translate('basic2') }}</h2>
-    <nut-searchbar v-model="searchValue1" @search="search"> </nut-searchbar>
+    <nut-searchbar v-model="state.searchValue1" @search="search"> </nut-searchbar>
 
     <h2>{{ translate('basic3') }}</h2>
-    <nut-searchbar v-model="searchValue2" @click-left-icon="clickLeftIcon">
+    <nut-searchbar v-model="state.searchValue2" @click-left-icon="clickLeftIcon">
       <template #leftin>
         <Search2 />
       </template>
     </nut-searchbar>
 
     <h2>{{ translate('basic4') }}</h2>
-    <nut-searchbar v-model="searchValue3">
+    <nut-searchbar v-model="state.searchValue3">
       <template #rightout> {{ translate('word2') }} </template>
     </nut-searchbar>
 
     <h2>{{ translate('basic5') }}</h2>
     <nut-searchbar
-      v-model="searchValue4"
+      v-model="state.searchValue4"
       background="linear-gradient(to right, #9866F0, #EB4D50)"
       input-background="#fff"
     >
     </nut-searchbar>
 
     <h2>{{ translate('basic7') }}</h2>
-    <nut-searchbar v-model="searchValue6">
+    <nut-searchbar v-model="state.searchValue6">
       <template #clear-icon>
         <img :src="icon" style="width: 20px; height: 20px" />
       </template>
     </nut-searchbar>
 
     <h2>{{ translate('basic6') }}</h2>
-    <nut-searchbar v-model="searchValue5" @click-right-icon="clickRightIcon">
+    <nut-searchbar v-model="state.searchValue5" @click-right-icon="clickRightIcon">
       <template #leftout>
         <Left @click="clickLeft" />
       </template>
@@ -55,8 +55,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { showToast } from '../toast';
 import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
@@ -90,48 +90,32 @@ const initTranslate = () =>
       shape: 'Search input shape'
     }
   });
-export default defineComponent({
-  components: { Search2, Left, Photograph, Message },
-  props: {},
-  setup() {
-    const icon =
-      'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
-    initTranslate();
-    const state = reactive({
-      searchValue: '',
-      searchValue1: '',
-      searchValue2: '',
-      searchValue3: '',
-      searchValue4: '',
-      searchValue5: '',
-      searchValue6: ''
-    });
-
-    const search = function () {
-      showToast.text('搜索触发');
-    };
+const icon =
+  'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
+initTranslate();
+const state = reactive({
+  searchValue: '',
+  searchValue1: '',
+  searchValue2: '',
+  searchValue3: '',
+  searchValue4: '',
+  searchValue5: '',
+  searchValue6: ''
+});
 
-    const clickLeft = function () {
-      showToast.text('点击回退按钮');
-    };
-    const clickLeftIcon = function (a: string, b: Event) {
-      console.log(a, b);
-    };
-    const clickRightIcon = function (a: string, b: Event) {
-      console.log(a, b);
-    };
+const search = function () {
+  showToast.text('搜索触发');
+};
 
-    return {
-      icon,
-      clickLeft,
-      clickLeftIcon,
-      clickRightIcon,
-      search,
-      ...toRefs(state),
-      translate
-    };
-  }
-});
+const clickLeft = function () {
+  showToast.text('点击回退按钮');
+};
+const clickLeftIcon = function (a: string, b: Event) {
+  console.log(a, b);
+};
+const clickRightIcon = function (a: string, b: Event) {
+  console.log(a, b);
+};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/searchbar/doc.en-US.md b/src/packages/__VUE/searchbar/doc.en-US.md
index c7a3a7a579..4707de0160 100644
--- a/src/packages/__VUE/searchbar/doc.en-US.md
+++ b/src/packages/__VUE/searchbar/doc.en-US.md
@@ -6,7 +6,7 @@ Search bar
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Searchbar } from '@nutui/nutui';
 
@@ -18,23 +18,13 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue"></nut-searchbar>
+  <nut-searchbar v-model="value"></nut-searchbar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -44,7 +34,7 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-searchbar shape="square"></nut-searchbar>
 </template>
@@ -56,30 +46,18 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue" @search="search"></nut-searchbar>
+  <nut-searchbar v-model="value" @search="search"></nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      const search = function () {
-        showToast.text('Search trigger');
-      };
-
-      return {
-        ...toRefs(state),
-        search
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref('');
+
+const search = function () {
+  showToast.text('Search trigger');
+};
 </script>
 ```
 
@@ -89,29 +67,18 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #leftin>
       <Search2 />
     </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  import { Search2 } from '@nutui/icons-vue';
-  export default {
-    components: { Search2 },
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Search2 } from '@nutui/icons-vue';
+const value = ref('');
 </script>
 ```
 
@@ -121,25 +88,15 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #rightout> Search </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -149,24 +106,14 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff">
+  <nut-searchbar v-model="value" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff">
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -176,30 +123,19 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #clear-icon>
       <img :src="icon" style="width: 10px; height: 10px" />
     </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const icon =
-        'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state),
-        icon
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+const icon =
+  'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
 </script>
 ```
 
@@ -209,9 +145,9 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #leftout>
       <Left />
     </template>
@@ -226,21 +162,10 @@ app.use(Searchbar);
     </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
-  export default {
-    components: { Search2, Left, Photograph, Message },
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';=
+import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
+const value = ref('');
 </script>
 ```
 
@@ -250,45 +175,45 @@ app.use(Searchbar);
 
 ### Props
 
-| Parameter                      | Description                                                                           | Type             | Default        |
-| ------------------------------ | ------------------------------------------------------------------------------------- | ---------------- | -------------- | ---- |
-| v-model                        | current input value                                                                   | number /         | string         | `''` |
-| label                          | left text of search box                                                               | string           | `''`           |
-| shape                          | search box shape, optional value is `square` `round`                                  | string           | `round`        |
-| max-length                     | maximum input length                                                                  | number \| string | `9999`         |
-| input-type                     | input box type                                                                        | string           | `text`         |
-| placeholder                    | The default dark pattern of the input box                                             | string           | `Please enter` |
-| clearable                      | whether to show clear button                                                          | boolean          | `true`         |
-| clear-icon                     | custom clear button icon (default use `@nutui/nutui-icons`)                           | Object           | `CircleClose`  |
-| background                     | external background of the input box                                                  | string           | `#fff`         |
-| input-background               | background of input box                                                               | string           | `#f7f7f7`      |
-| autofocus                      | Whether to automatically focus                                                        | boolean          | `false`        |
-| focus-style                    | search box style when focused                                                         | Object           | `-`            |
-| disabled                       | Whether to disable the input box                                                      | boolean          | `false`        |
-| readonly                       | input field is read only                                                              | boolean          | `false`        |
-| input-align                    | alignment, optional `left` `center` `right`                                           | string           | `left`         |
-| safe-area-inset-bottom`v4.1.6` | Whether to enable the security zone at the bottom of the full screen of iphone series | boolean          | `false`        |
+| Parameter | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | current input value | number / | string | `''` |
+| label | left text of search box | string | `''` |
+| shape | search box shape, optional value is `square` `round` | string | `round` |
+| max-length | maximum input length | number \| string | `9999` |
+| input-type | input box type | string | `text` |
+| placeholder | The default dark pattern of the input box | string | `Please enter` |
+| clearable | whether to show clear button | boolean | `true` |
+| clear-icon | custom clear button icon (default use `@nutui/nutui-icons`) | Object | `CircleClose` |
+| background | external background of the input box | string | `#fff` |
+| input-background | background of input box | string | `#f7f7f7` |
+| autofocus | Whether to automatically focus | boolean | `false` |
+| focus-style | search box style when focused | Object | `-` |
+| disabled | Whether to disable the input box | boolean | `false` |
+| readonly | input field is read only | boolean | `false` |
+| input-align | alignment, optional `left` `center` `right` | string | `left` |
+| safe-area-inset-bottom`v4.1.6` | Whether to enable the security zone at the bottom of the full screen of iphone series | boolean | `false` |
 
 ### Events
 
-| Event Name       | Description                           | Callback Parameters |
-| ---------------- | ------------------------------------- | ------------------- |
-| change           | fires when something is entered       | `val, event`        |
-| focus            | fires on focus                        | `val, event`        |
-| blur             | Triggered when out of focus           | `val, event`        |
-| clear            | Triggered when click clear            | `val`               |
-| search           | fires when the ENTER key is pressed   | `val, event`        |
-| click-input      | Fired when the input field is clicked | `event`             |
-| click-left-icon  | Fires when the left icon is clicked   | `val, event`        |
-| click-right-icon | Fires when the right icon is clicked  | `val, event`        |
+| Event Name | Description | Callback Parameters |
+| --- | --- | --- |
+| change | fires when something is entered | `val, event` |
+| focus | fires on focus | `val, event` |
+| blur | Triggered when out of focus | `val, event` |
+| clear | Triggered when click clear | `val` |
+| search | fires when the ENTER key is pressed | `val, event` |
+| click-input | Fired when the input field is clicked | `event` |
+| click-left-icon | Fires when the left icon is clicked | `val, event` |
+| click-right-icon | Fires when the right icon is clicked | `val, event` |
 
 ### Slots
 
-| Name     | Description                      |
-| -------- | -------------------------------- |
-| leftin   | left icon in the input box       |
-| leftout  | left Icon outside the input box  |
-| rightin  | right icon in the input box      |
+| Name | Description |
+| --- | --- |
+| leftin | left icon in the input box |
+| leftout | left Icon outside the input box |
+| rightin | right icon in the input box |
 | rightout | right icon outside the input box |
 
 ## Theming
@@ -298,17 +223,17 @@ app.use(Searchbar);
 The component provides the following CSS variables, which can be used to customize styles. Please refer to
 [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                        | Default Value                   |
-| ------------------------------------------- | ------------------------------- |
-| --nut-searchbar-background                  | _var(--nut-white)_              |
-| --nut-searchbar-right-out-color             | _var(--nut-black)_              |
-| --nut-searchbar-padding                     | _9px 16px_                      |
-| --nut-searchbar-width                       | _100%_                          |
-| --nut-searchbar-input-background            | _#f7f7f7_                       |
-| --nut-searchbar-input-padding               | _0 0 0 13px_                    |
-| --nut-searchbar-input-height                | _32px_                          |
-| --nut-searchbar-input-width                 | _100%_                          |
-| --nut-searchbar-input-border-radius         | _16px_                          |
-| --nut-searchbar-input-box-shadow            | _0 0 8px 0 rgba(0, 0, 0, 0.04)_ |
-| --nut-searchbar-input-bar-color             | _inherit_                       |
-| --nut-searchbar-input-bar-placeholder-color | _inherit_                       |
+| Name | Default Value |
+| --- | --- |
+| --nut-searchbar-background | _var(--nut-white)_ |
+| --nut-searchbar-right-out-color | _var(--nut-black)_ |
+| --nut-searchbar-padding | _9px 16px_ |
+| --nut-searchbar-width | _100%_ |
+| --nut-searchbar-input-background | _#f7f7f7_ |
+| --nut-searchbar-input-padding | _0 0 0 13px_ |
+| --nut-searchbar-input-height | _32px_ |
+| --nut-searchbar-input-width | _100%_ |
+| --nut-searchbar-input-border-radius | _16px_ |
+| --nut-searchbar-input-box-shadow | _0 0 8px 0 rgba(0, 0, 0, 0.04)_ |
+| --nut-searchbar-input-bar-color | _inherit_ |
+| --nut-searchbar-input-bar-placeholder-color | _inherit_ |
diff --git a/src/packages/__VUE/searchbar/doc.md b/src/packages/__VUE/searchbar/doc.md
index 7fa284015f..38e37d4f34 100644
--- a/src/packages/__VUE/searchbar/doc.md
+++ b/src/packages/__VUE/searchbar/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Searchbar } from '@nutui/nutui';
 
@@ -18,23 +18,13 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue"></nut-searchbar>
+  <nut-searchbar v-model="value"></nut-searchbar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -44,7 +34,7 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-searchbar shape="square"></nut-searchbar>
 </template>
@@ -56,30 +46,18 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue" @search="search"></nut-searchbar>
+  <nut-searchbar v-model="value" @search="search"></nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      const search = function () {
-        showToast.text('搜索触发');
-      };
-
-      return {
-        ...toRefs(state),
-        search
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref('');
+
+const search = function () {
+  showToast.text('搜索触发');
+};
 </script>
 ```
 
@@ -89,29 +67,18 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #leftin>
       <Search2 />
     </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  import { Search2 } from '@nutui/icons-vue';
-  export default {
-    components: { Search2 },
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Search2 } from '@nutui/icons-vue';
+const value = ref('');
 </script>
 ```
 
@@ -121,25 +88,15 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #rightout> 搜索 </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -149,24 +106,14 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff">
+  <nut-searchbar v-model="value" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff">
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -176,30 +123,19 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #clear-icon>
       <img :src="icon" style="width: 10px; height: 10px" />
     </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const icon =
-        'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state),
-        icon
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+const icon =
+  'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
 </script>
 ```
 
@@ -209,9 +145,9 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #leftout>
       <Left />
     </template>
@@ -226,21 +162,10 @@ app.use(Searchbar);
     </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
-  export default {
-    components: { Search2, Left, Photograph, Message },
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';=
+import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
+const value = ref('');
 </script>
 ```
 
@@ -250,45 +175,45 @@ app.use(Searchbar);
 
 ### Props
 
-| 参数                           | 说明                                                | 类型             | 默认值        |
-| ------------------------------ | --------------------------------------------------- | ---------------- | ------------- |
-| v-model                        | 当前输入的值                                        | number \| string | `''`          |
-| label                          | 搜索框左侧文本                                      | string           | `''`          |
-| shape                          | 搜索框形状，可选值为 `square` `round`               | string           | `round`       |
-| max-length                     | 最大输入长度                                        | number \| string | `9999`        |
-| input-type                     | 输入框类型                                          | string           | `text`        |
-| placeholder                    | 输入框默认暗纹                                      | string           | `请输入`      |
-| clearable                      | 是否展示清除按钮                                    | boolean          | `true`        |
-| clear-icon                     | 自定义清除按钮图标（默认使用 `@nutui/nutui-icons`） | Object           | `CircleClose` |
-| background                     | 输入框外部背景                                      | string           | `#fff`        |
-| input-background               | 输入框内部背景                                      | string           | `#f7f7f7`     |
-| autofocus                      | 是否自动聚焦                                        | boolean          | `false`       |
-| focus-style                    | 聚焦时搜索框样式                                    | Object           | `-`           |
-| disabled                       | 是否禁用输入框                                      | boolean          | `false`       |
-| readonly                       | 输入框只读                                          | boolean          | `false`       |
-| input-align                    | 对齐方式，可选`left` `center` `right`               | string           | `left`        |
-| safe-area-inset-bottom`v4.1.6` | 是否开启 iphone 系列全面屏底部安全区适配            | boolean          | `false`       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前输入的值 | number \| string | `''` |
+| label | 搜索框左侧文本 | string | `''` |
+| shape | 搜索框形状，可选值为 `square` `round` | string | `round` |
+| max-length | 最大输入长度 | number \| string | `9999` |
+| input-type | 输入框类型 | string | `text` |
+| placeholder | 输入框默认暗纹 | string | `请输入` |
+| clearable | 是否展示清除按钮 | boolean | `true` |
+| clear-icon | 自定义清除按钮图标（默认使用 `@nutui/nutui-icons`） | Object | `CircleClose` |
+| background | 输入框外部背景 | string | `#fff` |
+| input-background | 输入框内部背景 | string | `#f7f7f7` |
+| autofocus | 是否自动聚焦 | boolean | `false` |
+| focus-style | 聚焦时搜索框样式 | Object | `-` |
+| disabled | 是否禁用输入框 | boolean | `false` |
+| readonly | 输入框只读 | boolean | `false` |
+| input-align | 对齐方式，可选`left` `center` `right` | string | `left` |
+| safe-area-inset-bottom`v4.1.6` | 是否开启 iphone 系列全面屏底部安全区适配 | boolean | `false` |
 
 ### Events
 
-| 事件名           | 说明                | 回调参数     |
-| ---------------- | ------------------- | ------------ |
-| change           | 输入内容时触发      | `val, event` |
-| focus            | 聚焦时触发          | `val, event` |
-| blur             | 失焦时触发          | `val, event` |
-| clear            | 点击清空时触发      | `val`        |
-| search           | 按下 ENTER 键时触发 | `val, event` |
-| click-input      | 点击输入区域时触发  | `event`      |
-| click-left-icon  | 点击左侧图标时触发  | `val, event` |
-| click-right-icon | 点击右侧图标时触发  | `val, event` |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 输入内容时触发 | `val, event` |
+| focus | 聚焦时触发 | `val, event` |
+| blur | 失焦时触发 | `val, event` |
+| clear | 点击清空时触发 | `val` |
+| search | 按下 ENTER 键时触发 | `val, event` |
+| click-input | 点击输入区域时触发 | `event` |
+| click-left-icon | 点击左侧图标时触发 | `val, event` |
+| click-right-icon | 点击右侧图标时触发 | `val, event` |
 
 ### Slots
 
-| 名称     | 说明             |
-| -------- | ---------------- |
-| leftin   | 输入框内 左 icon |
-| leftout  | 输入框外 左 icon |
-| rightin  | 输入框内 右 icon |
+| 名称 | 说明 |
+| --- | --- |
+| leftin | 输入框内 左 icon |
+| leftout | 输入框外 左 icon |
+| rightin | 输入框内 右 icon |
 | rightout | 输入框外 右 icon |
 
 ## 主题定制
@@ -297,17 +222,17 @@ app.use(Searchbar);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                        | 默认值                          |
-| ------------------------------------------- | ------------------------------- |
-| --nut-searchbar-background                  | _var(--nut-white)_              |
-| --nut-searchbar-right-out-color             | _var(--nut-black)_              |
-| --nut-searchbar-padding                     | _9px 16px_                      |
-| --nut-searchbar-width                       | _100%_                          |
-| --nut-searchbar-input-background            | _#f7f7f7_                       |
-| --nut-searchbar-input-padding               | _0 0 0 13px_                    |
-| --nut-searchbar-input-height                | _32px_                          |
-| --nut-searchbar-input-width                 | _100%_                          |
-| --nut-searchbar-input-border-radius         | _16px_                          |
-| --nut-searchbar-input-box-shadow            | _0 0 8px 0 rgba(0, 0, 0, 0.04)_ |
-| --nut-searchbar-input-bar-color             | _inherit_                       |
-| --nut-searchbar-input-bar-placeholder-color | _inherit_                       |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-searchbar-background | _var(--nut-white)_ |
+| --nut-searchbar-right-out-color | _var(--nut-black)_ |
+| --nut-searchbar-padding | _9px 16px_ |
+| --nut-searchbar-width | _100%_ |
+| --nut-searchbar-input-background | _#f7f7f7_ |
+| --nut-searchbar-input-padding | _0 0 0 13px_ |
+| --nut-searchbar-input-height | _32px_ |
+| --nut-searchbar-input-width | _100%_ |
+| --nut-searchbar-input-border-radius | _16px_ |
+| --nut-searchbar-input-box-shadow | _0 0 8px 0 rgba(0, 0, 0, 0.04)_ |
+| --nut-searchbar-input-bar-color | _inherit_ |
+| --nut-searchbar-input-bar-placeholder-color | _inherit_ |
diff --git a/src/packages/__VUE/searchbar/doc.taro.md b/src/packages/__VUE/searchbar/doc.taro.md
index 09d44d9856..b07d9ba318 100644
--- a/src/packages/__VUE/searchbar/doc.taro.md
+++ b/src/packages/__VUE/searchbar/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Searchbar } from '@nutui/nutui-taro';
 
@@ -18,23 +18,13 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue"></nut-searchbar>
+  <nut-searchbar v-model="value"></nut-searchbar>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -44,7 +34,7 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-searchbar shape="square"></nut-searchbar>
 </template>
@@ -56,28 +46,18 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue" @search="search"></nut-searchbar>
+  <nut-searchbar v-model="value" @search="search"></nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      const search = function () {
-        console.log('搜索触发');
-      };
-
-      return {
-        ...toRefs(state),
-        search
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+const value = ref('');
+
+const search = function () {
+  console.log('搜索触发');
+};
 </script>
 ```
 
@@ -87,29 +67,18 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #leftin>
       <Search2 />
     </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  import { Search2 } from '@nutui/icons-vue-taro';
-  export default {
-    components: { Search2 },
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Search2 } from '@nutui/icons-vue';
+const value = ref('');
 </script>
 ```
 
@@ -119,25 +88,15 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #rightout> 搜索 </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -147,24 +106,14 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff">
+  <nut-searchbar v-model="value" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff">
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -174,29 +123,19 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #clear-icon>
       <img :src="icon" style="width: 10px; height: 10px" />
     </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const icon =
-        'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
-      const state = reactive({
-        searchValue: ''
-      });
-      return {
-        ...toRefs(state),
-        icon
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+const icon =
+  'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
 </script>
 ```
 
@@ -206,9 +145,9 @@ app.use(Searchbar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-searchbar v-model="searchValue">
+  <nut-searchbar v-model="value">
     <template #leftout>
       <Left />
     </template>
@@ -223,21 +162,10 @@ app.use(Searchbar);
     </template>
   </nut-searchbar>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  import { Search2, Left, Photograph, Message } from '@nutui/icons-vue-taro';
-  export default {
-    components: { Search2, Left, Photograph, Message },
-    setup() {
-      const state = reactive({
-        searchValue: ''
-      });
-
-      return {
-        ...toRefs(state)
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';=
+import { Search2, Left, Photograph, Message } from '@nutui/icons-vue-taro';
+const value = ref('');
 </script>
 ```
 
@@ -247,47 +175,47 @@ app.use(Searchbar);
 
 ### Props
 
-| 参数                           | 说明                                                                                                                         | 类型             | 默认值        |
-| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------- |
-| v-model                        | 当前输入的值                                                                                                                 | number \| string | `''`          |
-| label                          | 搜索框左侧文本                                                                                                               | string           | `''`          |
-| shape                          | 搜索框形状，可选值为 `square` `round`                                                                                        | string           | `round`       |
-| max-length                     | 最大输入长度                                                                                                                 | number \| string | `9999`        |
-| input-type                     | 输入框类型                                                                                                                   | string           | `text`        |
-| placeholder                    | 输入框默认暗纹                                                                                                               | string           | `请输入`      |
-| clearable                      | 是否展示清除按钮                                                                                                             | boolean          | `true`        |
-| clear-icon                     | 自定义清除按钮图标（默认使用 `@nutui/nutui-icons`）                                                                          | Object           | `CircleClose` |
-| background                     | 输入框外部背景                                                                                                               | string           | `#fff`        |
-| input-background               | 输入框内部背景                                                                                                               | string           | `#f7f7f7`     |
-| confirm-type                   | 键盘右下角按钮的文字，仅在`type='text'`时生效，可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string           | `done`        |
-| autofocus                      | 是否自动聚焦                                                                                                                 | boolean          | `false`       |
-| focus-style                    | 聚焦时搜索框样式                                                                                                             | Object           | `-`           |
-| disabled                       | 是否禁用输入框                                                                                                               | boolean          | `false`       |
-| readonly                       | 输入框只读                                                                                                                   | boolean          | `false`       |
-| input-align                    | 对齐方式，可选 `left` `center` `right`                                                                                       | string           | `left`        |
-| safe-area-inset-bottom`v4.1.6` | 是否开启 iphone 系列全面屏底部安全区适配                                                                                     | boolean          | `false`       |
-| cursor-spacing`v4.1.7`         | 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离                        | number           | 0             |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前输入的值 | number \| string | `''` |
+| label | 搜索框左侧文本 | string | `''` |
+| shape | 搜索框形状，可选值为 `square` `round` | string | `round` |
+| max-length | 最大输入长度 | number \| string | `9999` |
+| input-type | 输入框类型 | string | `text` |
+| placeholder | 输入框默认暗纹 | string | `请输入` |
+| clearable | 是否展示清除按钮 | boolean | `true` |
+| clear-icon | 自定义清除按钮图标（默认使用 `@nutui/nutui-icons`） | Object | `CircleClose` |
+| background | 输入框外部背景 | string | `#fff` |
+| input-background | 输入框内部背景 | string | `#f7f7f7` |
+| confirm-type | 键盘右下角按钮的文字，仅在`type='text'`时生效，可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string | `done` |
+| autofocus | 是否自动聚焦 | boolean | `false` |
+| focus-style | 聚焦时搜索框样式 | Object | `-` |
+| disabled | 是否禁用输入框 | boolean | `false` |
+| readonly | 输入框只读 | boolean | `false` |
+| input-align | 对齐方式，可选 `left` `center` `right` | string | `left` |
+| safe-area-inset-bottom`v4.1.6` | 是否开启 iphone 系列全面屏底部安全区适配 | boolean | `false` |
+| cursor-spacing`v4.1.7` | 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | number | 0 |
 
 ### Events
 
-| 事件名           | 说明                | 回调参数     |
-| ---------------- | ------------------- | ------------ |
-| change           | 输入内容时触发      | `val, event` |
-| focus            | 聚焦时触发          | `val, event` |
-| blur             | 失焦时触发          | `val, event` |
-| clear            | 点击清空时触发      | `val`        |
-| search           | 按下 ENTER 键时触发 | `val, event` |
-| click-input      | 点击输入区域时触发  | `event`      |
-| click-left-icon  | 点击左侧图标时触发  | `val, event` |
-| click-right-icon | 点击右侧图标时触发  | `val, event` |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 输入内容时触发 | `val, event` |
+| focus | 聚焦时触发 | `val, event` |
+| blur | 失焦时触发 | `val, event` |
+| clear | 点击清空时触发 | `val` |
+| search | 按下 ENTER 键时触发 | `val, event` |
+| click-input | 点击输入区域时触发 | `event` |
+| click-left-icon | 点击左侧图标时触发 | `val, event` |
+| click-right-icon | 点击右侧图标时触发 | `val, event` |
 
 ### Slots
 
-| 名称     | 说明             |
-| -------- | ---------------- |
-| leftin   | 输入框内 左 icon |
-| leftout  | 输入框外 左 icon |
-| rightin  | 输入框内 右 icon |
+| 名称 | 说明 |
+| --- | --- |
+| leftin | 输入框内 左 icon |
+| leftout | 输入框外 左 icon |
+| rightin | 输入框内 右 icon |
 | rightout | 输入框外 右 icon |
 
 ## 主题定制
@@ -296,17 +224,17 @@ app.use(Searchbar);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                        | 默认值                          |
-| ------------------------------------------- | ------------------------------- |
-| --nut-searchbar-background                  | _var(--nut-white)_              |
-| --nut-searchbar-right-out-color             | _var(--nut-black)_              |
-| --nut-searchbar-padding                     | _9px 16px_                      |
-| --nut-searchbar-width                       | _100%_                          |
-| --nut-searchbar-input-background            | _#f7f7f7_                       |
-| --nut-searchbar-input-padding               | _0 0 0 13px_                    |
-| --nut-searchbar-input-height                | _32px_                          |
-| --nut-searchbar-input-width                 | _100%_                          |
-| --nut-searchbar-input-border-radius         | _16px_                          |
-| --nut-searchbar-input-box-shadow            | _0 0 8px 0 rgba(0, 0, 0, 0.04)_ |
-| --nut-searchbar-input-bar-color             | _inherit_                       |
-| --nut-searchbar-input-bar-placeholder-color | _inherit_                       |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-searchbar-background | _var(--nut-white)_ |
+| --nut-searchbar-right-out-color | _var(--nut-black)_ |
+| --nut-searchbar-padding | _9px 16px_ |
+| --nut-searchbar-width | _100%_ |
+| --nut-searchbar-input-background | _#f7f7f7_ |
+| --nut-searchbar-input-padding | _0 0 0 13px_ |
+| --nut-searchbar-input-height | _32px_ |
+| --nut-searchbar-input-width | _100%_ |
+| --nut-searchbar-input-border-radius | _16px_ |
+| --nut-searchbar-input-box-shadow | _0 0 8px 0 rgba(0, 0, 0, 0.04)_ |
+| --nut-searchbar-input-bar-color | _inherit_ |
+| --nut-searchbar-input-bar-placeholder-color | _inherit_ |
diff --git a/src/packages/__VUE/shortpassword/demo.vue b/src/packages/__VUE/shortpassword/demo.vue
index 83ede6a8da..33129a06ee 100644
--- a/src/packages/__VUE/shortpassword/demo.vue
+++ b/src/packages/__VUE/shortpassword/demo.vue
@@ -77,8 +77,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
 const { translate } = createComponent('short-password');
@@ -108,48 +108,36 @@ const initTranslate = () =>
       cancelTips: 'Click the Cancel button to close the popup'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
+initTranslate();
 
-    const state = reactive({
-      visible1: false,
-      visible2: false,
-      visible3: false,
-      visible4: false,
-      showKeyboard1: false,
-      showKeyboard2: false,
-      showKeyboard3: false,
-      showKeyboard4: false,
-      value1: '',
-      value2: '',
-      value3: '',
-      value4: '',
-      errorMsg: '',
-      length: 6
-    });
-    const methods = {
-      complete(value: string) {
-        showToast.text(value);
-      },
-      onTips() {
-        showToast.text(translate('onTips'));
-      },
-      close() {
-        showToast.text(translate('close'));
-      },
-      cancel() {
-        showToast.text(translate('cancelTips'));
-      }
-    };
-
-    return {
-      state,
-      methods,
-      translate
-    };
-  }
+const state = reactive({
+  visible1: false,
+  visible2: false,
+  visible3: false,
+  visible4: false,
+  showKeyboard1: false,
+  showKeyboard2: false,
+  showKeyboard3: false,
+  showKeyboard4: false,
+  value1: '',
+  value2: '',
+  value3: '',
+  value4: '',
+  errorMsg: '',
+  length: 6
 });
+const methods = {
+  complete(value: string) {
+    showToast.text(value);
+  },
+  onTips() {
+    showToast.text(translate('onTips'));
+  },
+  close() {
+    showToast.text(translate('close'));
+  },
+  cancel() {
+    showToast.text(translate('cancelTips'));
+  }
+};
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/shortpassword/doc.en-US.md b/src/packages/__VUE/shortpassword/doc.en-US.md
index 8a41d9332c..2799ddf4d4 100644
--- a/src/packages/__VUE/shortpassword/doc.en-US.md
+++ b/src/packages/__VUE/shortpassword/doc.en-US.md
@@ -6,7 +6,7 @@ Short password input box, which can be used to enter passwords, SMS verification
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { ShortPassword, NumberKeyboard } from '@nutui/nutui';
 
@@ -19,28 +19,21 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="Basic Usage" is-link @click="state.visible1 = true;"></nut-cell>
+  <nut-cell title="Basic Usage" is-link @click="state.visible1 = true"></nut-cell>
   <nut-short-password v-model="state.value1" v-model:visible="state.visible1" @focus="state.showKeyboard1 = true">
   </nut-short-password>
   <nut-number-keyboard v-model="state.value1" v-model:visible="state.showKeyboard1" @blur="state.showKeyboard1 = false">
   </nut-number-keyboard>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        visible1: false,
-        showKeyboard1: false,
-        value1: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  visible1: false,
+  showKeyboard1: false,
+  value1: ''
+});
 </script>
 ```
 
@@ -50,9 +43,9 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="Custom Password Length" is-link @click="state.visible2 = true;"></nut-cell>
+  <nut-cell title="Custom Password Length" is-link @click="state.visible2 = true"></nut-cell>
   <nut-short-password
     v-model="state.value2"
     v-model:visible="state.visible2"
@@ -64,29 +57,20 @@ app.use(NumberKeyboard);
   <nut-number-keyboard v-model="state.value2" v-model:visible="state.showKeyboard2" @blur="state.showKeyboard2 = false">
   </nut-number-keyboard>
 </template>
-<script>
-  import { reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        visible2: false,
-        showKeyboard2: false,
-        value2: '',
-        length: 4
-      });
-      const methods = {
-        complete(value: string) {
-          showToast.text(value);
-        }
-      };
-      return {
-        state,
-        methods
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible2: false,
+  showKeyboard2: false,
+  value2: '',
+  length: 4
+});
+const methods = {
+  complete(value) {
+    showToast.text(value);
+  }
+};
 </script>
 ```
 
@@ -96,9 +80,9 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="Forget password" is-link @click="state.visible3 = true;"></nut-cell>
+  <nut-cell title="Forget password" is-link @click="state.visible3 = true"></nut-cell>
   <nut-short-password
     v-model="state.value3"
     v-model:visible="state.visible3"
@@ -110,31 +94,22 @@ app.use(NumberKeyboard);
   <nut-number-keyboard v-model="state.value3" v-model:visible="state.showKeyboard3" @blur="state.showKeyboard3 = false">
   </nut-number-keyboard>
 </template>
-<script>
-  import { reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        visible3: false,
-        showKeyboard3: false,
-        value3: ''
-      });
-      const methods = {
-        complete(value: string) {
-          showToast.text(value);
-        },
-        onTips() {
-          showToast.text('Execute forgotten password logic');
-        }
-      };
-      return {
-        state,
-        methods
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible3: false,
+  showKeyboard3: false,
+  value3: ''
+});
+const methods = {
+  complete(value) {
+    showToast.text(value);
+  },
+  onTips() {
+    showToast.text('Execute forgotten password logic');
+  }
+};
 </script>
 ```
 
@@ -144,9 +119,9 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="Error Message" is-link @click="state.visible4 = true;"></nut-cell>
+  <nut-cell title="Error Message" is-link @click="state.visible4 = true"></nut-cell>
   <nut-short-password
     v-model="state.value4"
     v-model:visible="state.visible4"
@@ -159,32 +134,23 @@ app.use(NumberKeyboard);
   <nut-number-keyboard v-model="state.value4" v-model:visible="state.showKeyboard4" @blur="state.showKeyboard4 = false">
   </nut-number-keyboard>
 </template>
-<script>
-  import { reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        visible4: false,
-        showKeyboard4: false,
-        value4: '',
-        errorMsg: 'Please enter correct password'
-      });
-      const methods = {
-        complete(value: string) {
-          showToast.text(value);
-        },
-        onTips() {
-          showToast.text('Execute forgotten password logic');
-        }
-      };
-      return {
-        state,
-        methods
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible4: false,
+  showKeyboard4: false,
+  value4: '',
+  errorMsg: 'Please enter correct password'
+});
+const methods = {
+  complete(value) {
+    showToast.text(value);
+  },
+  onTips() {
+    showToast.text('Execute forgotten password logic');
+  }
+};
 </script>
 ```
 
@@ -194,24 +160,24 @@ app.use(NumberKeyboard);
 
 ### Props
 
-| Attribute              | Description                           | Type             | Default                   |
-| ---------------------- | ------------------------------------- | ---------------- | ------------------------- |
-| v-model                | Current value                         | string           |                           |
-| v-model:visible        | Whether to show shortpassword         | boolean          | `false`                   |
-| title                  | title                                 | string           | `Please enter password  ` |
-| desc                   | description                           | string           | `Verify`                  |
-| tips                   | Bottom right prompt                   | string           | `Forget password  `       |
-| close-on-click-overlay | Click to close the mask               | boolean          | `true`                    |
-| length                 | ShortPassword lenght The value is 4~6 | string \| number | `6`                       |
-| error-msg              | Error message                         | string           | `''`                      |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Current value | string |  |
+| v-model:visible | Whether to show shortpassword | boolean | `false` |
+| title | title | string | `Please enter password  ` |
+| desc | description | string | `Verify` |
+| tips | Bottom right prompt | string | `Forget password  ` |
+| close-on-click-overlay | Click to close the mask | boolean | `true` |
+| length | ShortPassword lenght The value is 4~6 | string \| number | `6` |
+| error-msg | Error message | string | `''` |
 
 ### Events
 
-| Event    | Description                                     | Arguments      |
-| -------- | ----------------------------------------------- | -------------- |
-| close    | Trigger an event when the close icon is clicked | -              |
-| complete | Input complete callback                         | `value:string` |
-| focus    | Emitted when input is focused                   | -              |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| close | Trigger an event when the close icon is clicked | - |
+| complete | Input complete callback | `value:string` |
+| focus | Emitted when input is focused | - |
 
 ## Theming
 
@@ -221,9 +187,9 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 
-| 名称                                 | 默认值                     |
-| ------------------------------------ | -------------------------- |
-| --nut-shortpassword-background-color | _rgba(245, 245, 245, 1)_   |
-| --nut-shortpassword-border-color     | _#ddd_                     |
-| --nut-shortpassword-error            | _var(--nut-primary-color)_ |
-| --nut-shortpassword-forget           | _rgba(128, 128, 128, 1)_   |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-shortpassword-background-color | _rgba(245, 245, 245, 1)_ |
+| --nut-shortpassword-border-color | _#ddd_ |
+| --nut-shortpassword-error | _var(--nut-primary-color)_ |
+| --nut-shortpassword-forget | _rgba(128, 128, 128, 1)_ |
diff --git a/src/packages/__VUE/shortpassword/doc.md b/src/packages/__VUE/shortpassword/doc.md
index 87c594029e..ea9a32ecbc 100644
--- a/src/packages/__VUE/shortpassword/doc.md
+++ b/src/packages/__VUE/shortpassword/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { ShortPassword, NumberKeyboard } from '@nutui/nutui';
 
@@ -19,28 +19,21 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="基础用法" is-link @click="state.visible1 = true;"></nut-cell>
+  <nut-cell title="基础用法" is-link @click="state.visible1 = true"></nut-cell>
   <nut-short-password v-model="state.value1" v-model:visible="state.visible1" @focus="state.showKeyboard1 = true">
   </nut-short-password>
   <nut-number-keyboard v-model="state.value1" v-model:visible="state.showKeyboard1" @blur="state.showKeyboard1 = false">
   </nut-number-keyboard>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        visible1: false,
-        showKeyboard1: false,
-        value1: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  visible1: false,
+  showKeyboard1: false,
+  value1: ''
+});
 </script>
 ```
 
@@ -50,9 +43,9 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="自定义密码长度4" is-link @click="state.visible2 = true;"></nut-cell>
+  <nut-cell title="自定义密码长度4" is-link @click="state.visible2 = true"></nut-cell>
   <nut-short-password
     v-model="state.value2"
     v-model:visible="state.visible2"
@@ -64,29 +57,20 @@ app.use(NumberKeyboard);
   <nut-number-keyboard v-model="state.value2" v-model:visible="state.showKeyboard2" @blur="state.showKeyboard2 = false">
   </nut-number-keyboard>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        visible2: false,
-        showKeyboard2: false,
-        value2: '',
-        length: 4
-      });
-      const methods = {
-        complete(value: string) {
-          showToast.text(value);
-        }
-      };
-      return {
-        state,
-        methods
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible2: false,
+  showKeyboard2: false,
+  value2: '',
+  length: 4
+});
+const methods = {
+  complete(value) {
+    showToast.text(value);
+  }
+};
 </script>
 ```
 
@@ -96,9 +80,9 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="忘记密码提示语" is-link @click="state.visible3 = true;"></nut-cell>
+  <nut-cell title="忘记密码提示语" is-link @click="state.visible3 = true"></nut-cell>
   <nut-short-password
     v-model="state.value3"
     v-model:visible="state.visible3"
@@ -110,31 +94,22 @@ app.use(NumberKeyboard);
   <nut-number-keyboard v-model="state.value3" v-model:visible="state.showKeyboard3" @blur="state.showKeyboard3 = false">
   </nut-number-keyboard>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        visible3: false,
-        showKeyboard3: false,
-        value3: ''
-      });
-      const methods = {
-        complete(value: string) {
-          showToast.text(value);
-        },
-        onTips() {
-          showToast.text('执行忘记密码逻辑');
-        }
-      };
-      return {
-        state,
-        methods
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible3: false,
+  showKeyboard3: false,
+  value3: ''
+});
+const methods = {
+  complete(value) {
+    showToast.text(value);
+  },
+  onTips() {
+    showToast.text('执行忘记密码逻辑');
+  }
+};
 </script>
 ```
 
@@ -144,9 +119,9 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="错误提示语" is-link @click="state.visible4 = true;"></nut-cell>
+  <nut-cell title="错误提示语" is-link @click="state.visible4 = true"></nut-cell>
   <nut-short-password
     v-model="state.value4"
     v-model:visible="state.visible4"
@@ -159,32 +134,23 @@ app.use(NumberKeyboard);
   <nut-number-keyboard v-model="state.value4" v-model:visible="state.showKeyboard4" @blur="state.showKeyboard4 = false">
   </nut-number-keyboard>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        visible4: false,
-        showKeyboard4: false,
-        value4: '',
-        errorMsg: '请输入正确密码'
-      });
-      const methods = {
-        complete(value: string) {
-          showToast.text(value);
-        },
-        onTips() {
-          showToast.text('执行忘记密码逻辑');
-        }
-      };
-      return {
-        state,
-        methods
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible4: false,
+  showKeyboard4: false,
+  value4: '',
+  errorMsg: '请输入正确密码'
+});
+const methods = {
+  complete(value) {
+    showToast.text(value);
+  },
+  onTips() {
+    showToast.text('执行忘记密码逻辑');
+  }
+};
 </script>
 ```
 
@@ -194,24 +160,24 @@ app.use(NumberKeyboard);
 
 ### Props
 
-| 参数                   | 说明                 | 类型             | 默认值                         |
-| ---------------------- | -------------------- | ---------------- | ------------------------------ |
-| v-model                | 密码初始值           | string           |                                |
-| v-model:visible        | 是否展示短密码框     | boolean          | `false`                        |
-| title                  | 标题                 | string           | `请输入密码`                   |
-| desc                   | 密码框描述           | string           | `您使用了虚拟资产，请进行验证` |
-| tips                   | 提示语               | string           | `忘记密码`                     |
-| close-on-click-overlay | 是否点击遮罩关闭     | boolean          | `true`                         |
-| length                 | 密码长度，取值为 4~6 | string \| number | `6`                            |
-| error-msg              | 错误信息提示         | string           | `''`                           |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 密码初始值 | string |  |
+| v-model:visible | 是否展示短密码框 | boolean | `false` |
+| title | 标题 | string | `请输入密码` |
+| desc | 密码框描述 | string | `您使用了虚拟资产，请进行验证` |
+| tips | 提示语 | string | `忘记密码` |
+| close-on-click-overlay | 是否点击遮罩关闭 | boolean | `true` |
+| length | 密码长度，取值为 4~6 | string \| number | `6` |
+| error-msg | 错误信息提示 | string | `''` |
 
 ### Events
 
-| 事件名   | 说明                   | 回调参数       |
-| -------- | ---------------------- | -------------- |
-| close    | 点击关闭图标时触发事件 | -              |
-| complete | 输入完成的回调         | `value:string` |
-| focus    | 输入框聚焦时触发       | -              |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| close | 点击关闭图标时触发事件 | - |
+| complete | 输入完成的回调 | `value:string` |
+| focus | 输入框聚焦时触发 | - |
 
 ## 主题定制
 
@@ -219,9 +185,9 @@ app.use(NumberKeyboard);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值                     |
-| ------------------------------------ | -------------------------- |
-| --nut-shortpassword-background-color | _rgba(245, 245, 245, 1)_   |
-| --nut-shortpassword-border-color     | _#ddd_                     |
-| --nut-shortpassword-error            | _var(--nut-primary-color)_ |
-| --nut-shortpassword-forget           | _rgba(128, 128, 128, 1)_   |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-shortpassword-background-color | _rgba(245, 245, 245, 1)_ |
+| --nut-shortpassword-border-color | _#ddd_ |
+| --nut-shortpassword-error | _var(--nut-primary-color)_ |
+| --nut-shortpassword-forget | _rgba(128, 128, 128, 1)_ |
diff --git a/src/packages/__VUE/shortpassword/doc.taro.md b/src/packages/__VUE/shortpassword/doc.taro.md
index 7bf264e559..61479a0237 100644
--- a/src/packages/__VUE/shortpassword/doc.taro.md
+++ b/src/packages/__VUE/shortpassword/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { ShortPassword, NumberKeyboard } from '@nutui/nutui-taro';
 
@@ -19,32 +19,21 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="基础用法" is-link @click="state.visible1 = true;"></nut-cell>
-  <nut-short-password
-    v-model="state.value1"
-    v-model:visible="state.visible1"
-    @focus="state.showKeyboard1=!state.showKeyboard1"
-    @close="state.showKeyboard1=false"
-  >
+  <nut-cell title="基础用法" is-link @click="state.visible1 = true"></nut-cell>
+  <nut-short-password v-model="state.value1" v-model:visible="state.visible1" @focus="state.showKeyboard1 = true">
   </nut-short-password>
-  <nut-number-keyboard v-model="state.value1" v-model:visible="state.showKeyboard1"> </nut-number-keyboard>
+  <nut-number-keyboard v-model="state.value1" v-model:visible="state.showKeyboard1" @blur="state.showKeyboard1 = false">
+  </nut-number-keyboard>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        visible1: false,
-        showKeyboard1: false,
-        value1: ''
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  visible1: false,
+  showKeyboard1: false,
+  value1: ''
+});
 </script>
 ```
 
@@ -54,48 +43,34 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell
-    title="自定义密码长度4"
-    is-link
-    @click="
-      state.visible2 = true;
-    "
-  ></nut-cell>
+  <nut-cell title="自定义密码长度4" is-link @click="state.visible2 = true"></nut-cell>
   <nut-short-password
     v-model="state.value2"
     v-model:visible="state.visible2"
+    @focus="state.showKeyboard2 = true"
     :length="state.length"
-    @focus="state.showKeyboard2=!state.showKeyboard2"
-    @close="state.showKeyboard2=false"
     @complete="methods.complete"
   >
   </nut-short-password>
-  <nut-number-keyboard v-model="state.value2" v-model:visible="state.showKeyboard2" maxlength="4">
+  <nut-number-keyboard v-model="state.value2" v-model:visible="state.showKeyboard2" @blur="state.showKeyboard2 = false">
   </nut-number-keyboard>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        visible2: false,
-        showKeyboard2: false,
-        value2: '',
-        length: '4'
-      });
-      const methods = {
-        complete(val) {
-          console.log(val);
-        }
-      };
-      return {
-        state,
-        methods
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible2: false,
+  showKeyboard2: false,
+  value2: '',
+  length: 4
+});
+const methods = {
+  complete(value) {
+    console.log(value);
+  }
+};
 </script>
 ```
 
@@ -105,45 +80,36 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell
-    title="忘记密码提示语事件回调"
-    is-link
-    @click="
-      state.visible3= true;
-    "
-  ></nut-cell>
+  <nut-cell title="忘记密码提示语" is-link @click="state.visible3 = true"></nut-cell>
   <nut-short-password
     v-model="state.value3"
     v-model:visible="state.visible3"
-    @focus="state.showKeyboard3=!state.showKeyboard3"
-    @close="state.showKeyboard3=false"
+    @focus="state.showKeyboard3 = true"
+    @complete="methods.complete"
     @tips="methods.onTips"
   >
   </nut-short-password>
-  <nut-number-keyboard v-model="state.value3" v-model:visible="state.showKeyboard3"> </nut-number-keyboard>
+  <nut-number-keyboard v-model="state.value3" v-model:visible="state.showKeyboard3" @blur="state.showKeyboard3 = false">
+  </nut-number-keyboard>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        visible3: false,
-        showKeyboard3: false,
-        value3: ''
-      });
-      const methods = {
-        onTips() {
-          console.log('忘记密码');
-        }
-      };
-      return {
-        state,
-        methods
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible3: false,
+  showKeyboard3: false,
+  value3: ''
+});
+const methods = {
+  complete(value) {
+    console.log(value);
+  },
+  onTips() {
+    console.log('执行忘记密码逻辑');
+  }
+};
 </script>
 ```
 
@@ -153,47 +119,38 @@ app.use(NumberKeyboard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell
-    title="错误提示语"
-    is-link
-    @click="
-      state.visible4 = true;
-    "
-  ></nut-cell>
+  <nut-cell title="错误提示语" is-link @click="state.visible4 = true"></nut-cell>
   <nut-short-password
     v-model="state.value4"
     v-model:visible="state.visible4"
+    @focus="state.showKeyboard4 = true"
     :error-msg="state.errorMsg"
-    @focus="state.showKeyboard4=!state.showKeyboard4"
-    @close="state.showKeyboard4=false"
+    @complete="methods.complete"
     @tips="methods.onTips"
   >
   </nut-short-password>
-  <nut-number-keyboard v-model="state.value4" v-model:visible="state.showKeyboard4"> </nut-number-keyboard>
+  <nut-number-keyboard v-model="state.value4" v-model:visible="state.showKeyboard4" @blur="state.showKeyboard4 = false">
+  </nut-number-keyboard>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        visible4: false,
-        showKeyboard4: false,
-        value4: '',
-        errorMsg: '请输入正确密码'
-      });
-      const methods = {
-        onTips() {
-          console.log('执行忘记密码逻辑');
-        }
-      };
-      return {
-        state,
-        methods
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible4: false,
+  showKeyboard4: false,
+  value4: '',
+  errorMsg: '请输入正确密码'
+});
+const methods = {
+  complete(value) {
+    console.log(value);
+  },
+  onTips() {
+    console.log('执行忘记密码逻辑');
+  }
+};
 </script>
 ```
 
@@ -203,24 +160,24 @@ app.use(NumberKeyboard);
 
 ### Props
 
-| 参数                   | 说明                 | 类型             | 默认值                         |
-| ---------------------- | -------------------- | ---------------- | ------------------------------ |
-| v-model                | 密码初始值           | string           |                                |
-| v-model:visible        | 是否展示短密码框     | boolean          | `false`                        |
-| title                  | 标题                 | string           | `请输入密码`                   |
-| desc                   | 密码框描述           | string           | `您使用了虚拟资产，请进行验证` |
-| tips                   | 提示语               | string           | `忘记密码`                     |
-| close-on-click-overlay | 是否点击遮罩关闭     | boolean          | `true`                         |
-| length                 | 密码长度，取值为 4~6 | string \| number | `6`                            |
-| error-msg              | 错误信息提示         | string           | `''`                           |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 密码初始值 | string |  |
+| v-model:visible | 是否展示短密码框 | boolean | `false` |
+| title | 标题 | string | `请输入密码` |
+| desc | 密码框描述 | string | `您使用了虚拟资产，请进行验证` |
+| tips | 提示语 | string | `忘记密码` |
+| close-on-click-overlay | 是否点击遮罩关闭 | boolean | `true` |
+| length | 密码长度，取值为 4~6 | string \| number | `6` |
+| error-msg | 错误信息提示 | string | `''` |
 
 ### Events
 
-| 事件名   | 说明                           | 回调参数       |
-| -------- | ------------------------------ | -------------- |
-| close    | 点击关闭图标或者遮罩时触发事件 | -              |
-| complete | 输入完成的回调                 | `value:string` |
-| focus    | 输入框聚焦时触发               | -              |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| close | 点击关闭图标或者遮罩时触发事件 | - |
+| complete | 输入完成的回调 | `value:string` |
+| focus | 输入框聚焦时触发 | - |
 
 ## 主题定制
 
@@ -228,9 +185,9 @@ app.use(NumberKeyboard);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值                     |
-| ------------------------------------ | -------------------------- |
-| --nut-shortpassword-background-color | _rgba(245, 245, 245, 1)_   |
-| --nut-shortpassword-border-color     | _#ddd_                     |
-| --nut-shortpassword-error            | _var(--nut-primary-color)_ |
-| --nut-shortpassword-forget           | _rgba(128, 128, 128, 1)_   |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-shortpassword-background-color | _rgba(245, 245, 245, 1)_ |
+| --nut-shortpassword-border-color | _#ddd_ |
+| --nut-shortpassword-error | _var(--nut-primary-color)_ |
+| --nut-shortpassword-forget | _rgba(128, 128, 128, 1)_ |
diff --git a/src/packages/__VUE/textarea/demo.vue b/src/packages/__VUE/textarea/demo.vue
index 06577257cd..b3f7317a50 100644
--- a/src/packages/__VUE/textarea/demo.vue
+++ b/src/packages/__VUE/textarea/demo.vue
@@ -15,8 +15,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('textarea');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -43,23 +43,11 @@ const initTranslate = () =>
       desc2: 'Textarea disabled'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const value = ref('');
-    const value2 = ref('');
-    const value3 = ref('');
-    const value4 = ref('');
-
-    return {
-      value,
-      value2,
-      value3,
-      value4,
-      translate
-    };
-  }
-});
+initTranslate();
+const value = ref('');
+const value2 = ref('');
+const value3 = ref('');
+const value4 = ref('');
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/uploader/demo.vue b/src/packages/__VUE/uploader/demo.vue
index a29085fe97..81e805fd57 100644
--- a/src/packages/__VUE/uploader/demo.vue
+++ b/src/packages/__VUE/uploader/demo.vue
@@ -46,8 +46,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('uploader');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -91,136 +91,116 @@ const initTranslate = () =>
       title14: 'Clear upload manually'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts';
-    const progressPercentage = ref<string | number>(0);
-    const formData = {
-      custom: 'test'
-    };
+initTranslate();
+const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts';
+const progressPercentage = ref<string | number>(0);
+const formData = {
+  custom: 'test'
+};
 
-    const defaultFileList = reactive([
-      {
-        name: 'file 1.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'success',
-        message: translate('success'),
-        type: 'image'
-      },
-      {
-        name: 'file 2.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'error',
-        message: translate('error'),
-        type: 'image'
-      },
-      {
-        name: 'file 3.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'uploading',
-        message: translate('uploading'),
-        type: 'image'
-      }
-    ]);
-    const defaultFileList1 = reactive([
-      {
-        name: 'file 1.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'success',
-        message: translate('success'),
-        type: 'image'
-      },
-      {
-        name: 'file 2.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'error',
-        message: translate('error'),
-        type: 'image'
-      },
-      {
-        name: 'file 3.png',
-        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-        status: 'uploading',
-        message: translate('uploading'),
-        type: 'image'
-      }
-    ]);
-    const fileToDataURL = (file: Blob): Promise<any> => {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onloadend = (e) => resolve((e.target as FileReader).result);
-        reader.readAsDataURL(file);
-      });
-    };
-    const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
-      return new Promise((resolve) => {
-        const img = new Image();
-        img.onload = () => resolve(img);
-        img.src = dataURL;
-      });
-    };
-    const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
-      return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
-    };
-    const onOversize = () => {
-      showToast.text('oversize 触发 文件大小不能超过 50kb');
-    };
-    const onDelete = () => {
-      showToast.text('delete 事件触发');
-    };
-    const onProgress = ({ percentage }: any) => {
-      progressPercentage.value = percentage;
-      showToast.text('progress 事件触发' + percentage);
-    };
-    const beforeUpload = async (file: File[]) => {
-      let fileName = file[0].name;
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d') as CanvasRenderingContext2D;
-      const base64 = await fileToDataURL(file[0]);
-      const img = await dataURLToImage(base64);
-      canvas.width = img.width;
-      canvas.height = img.height;
+const defaultFileList = reactive([
+  {
+    name: 'file 1.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'success',
+    message: translate('success'),
+    type: 'image'
+  },
+  {
+    name: 'file 2.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'error',
+    message: translate('error'),
+    type: 'image'
+  },
+  {
+    name: 'file 3.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'uploading',
+    message: translate('uploading'),
+    type: 'image'
+  }
+]);
+const defaultFileList1 = reactive([
+  {
+    name: 'file 1.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'success',
+    message: translate('success'),
+    type: 'image'
+  },
+  {
+    name: 'file 2.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'error',
+    message: translate('error'),
+    type: 'image'
+  },
+  {
+    name: 'file 3.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'uploading',
+    message: translate('uploading'),
+    type: 'image'
+  }
+]);
+const fileToDataURL = (file: Blob): Promise<any> => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = (e) => resolve((e.target as FileReader).result);
+    reader.readAsDataURL(file);
+  });
+};
+const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.src = dataURL;
+  });
+};
+const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
+  return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
+};
+const onOversize = () => {
+  showToast.text('oversize 触发 文件大小不能超过 50kb');
+};
+const onDelete = () => {
+  showToast.text('delete 事件触发');
+};
+const onProgress = ({ percentage }: any) => {
+  progressPercentage.value = percentage;
+  showToast.text('progress 事件触发' + percentage);
+};
+const beforeUpload = async (file: File[]) => {
+  let fileName = file[0].name;
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+  const base64 = await fileToDataURL(file[0]);
+  const img = await dataURLToImage(base64);
+  canvas.width = img.width;
+  canvas.height = img.height;
 
-      context.clearRect(0, 0, img.width, img.height);
-      context.drawImage(img, 0, 0, img.width, img.height);
+  context.clearRect(0, 0, img.width, img.height);
+  context.drawImage(img, 0, 0, img.width, img.height);
 
-      let blob = (await canvastoFile(canvas, 'image/jpeg', 0.5)) as Blob; //quality:0.5可根据实际情况计算
-      const f = await new File([blob], fileName);
-      return [f];
-    };
-    const beforeXhrUpload = (xhr: XMLHttpRequest, options: any) => {
-      if (options.method.toLowerCase() == 'put') {
-        xhr.send(options.sourceFile);
-      } else {
-        xhr.send(options.formData);
-      }
-    };
-    const uploadRef = ref<any>(null);
-    const submitUpload = () => {
-      uploadRef.value.submit();
-    };
-    const clearUpload = () => {
-      uploadRef.value.clearUploadQueue();
-    };
-    return {
-      onOversize,
-      beforeUpload,
-      beforeXhrUpload,
-      onDelete,
-      onProgress,
-      progressPercentage,
-      uploadUrl,
-      defaultFileList,
-      defaultFileList1,
-      formData,
-      uploadRef,
-      submitUpload,
-      clearUpload,
-      translate
-    };
+  let blob = (await canvastoFile(canvas, 'image/jpeg', 0.5)) as Blob; //quality:0.5可根据实际情况计算
+  const f = await new File([blob], fileName);
+  return [f];
+};
+const beforeXhrUpload = (xhr: XMLHttpRequest, options: any) => {
+  if (options.method.toLowerCase() == 'put') {
+    xhr.send(options.sourceFile);
+  } else {
+    xhr.send(options.formData);
   }
-});
+};
+const uploadRef = ref<any>(null);
+const submitUpload = () => {
+  uploadRef.value.submit();
+};
+const clearUpload = () => {
+  uploadRef.value.clearUploadQueue();
+};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/uploader/doc.en-US.md b/src/packages/__VUE/uploader/doc.en-US.md
index 3ab000b8ee..b2a6701766 100644
--- a/src/packages/__VUE/uploader/doc.en-US.md
+++ b/src/packages/__VUE/uploader/doc.en-US.md
@@ -6,7 +6,7 @@ Used to upload local pictures or files to the server.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Uploader } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader url="https://xxxx"></nut-uploader>
 </template>
@@ -30,44 +30,36 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="3" multiple></nut-uploader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const defaultFileList = reactive([
-        {
-          name: 'file 1.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'success',
-          message: 'upload success',
-          type: 'image'
-        },
-        {
-          name: 'file 2.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'error',
-          message: 'upload error',
-          type: 'image'
-        },
-        {
-          name: 'file 3.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'uploading',
-          message: 'uploading...',
-          type: 'image'
-        }
-      ]);
-      return {
-        uploadUrl,
-        defaultFileList
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const defaultFileList = reactive([
+  {
+    name: 'file 1.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'success',
+    message: 'upload success',
+    type: 'image'
+  },
+  {
+    name: 'file 2.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'error',
+    message: 'upload error',
+    type: 'image'
+  },
+  {
+    name: 'file 3.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'uploading',
+    message: 'uploading...',
+    type: 'image'
+  }
+]);
 </script>
 ```
 
@@ -77,46 +69,38 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="10" multiple list-type="list">
     <nut-button type="success" size="small">Upload files</nut-button>
   </nut-uploader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const defaultFileList = reactive([
-        {
-          name: 'file 1.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'success',
-          message: 'upload success',
-          type: 'image'
-        },
-        {
-          name: 'file 2.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'error',
-          message: 'upload error',
-          type: 'image'
-        },
-        {
-          name: 'file 3.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'uploading',
-          message: 'uploading...',
-          type: 'image'
-        }
-      ]);
-      return {
-        uploadUrl,
-        defaultFileList
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const defaultFileList = reactive([
+  {
+    name: 'file 1.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'success',
+    message: 'upload success',
+    type: 'image'
+  },
+  {
+    name: 'file 2.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'error',
+    message: 'upload error',
+    type: 'image'
+  },
+  {
+    name: 'file 3.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'uploading',
+    message: 'uploading...',
+    type: 'image'
+  }
+]);
 </script>
 ```
 
@@ -126,7 +110,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader url="https://xxxx">
     <nut-button type="success" size="small">Upload files</nut-button>
@@ -140,7 +124,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" @progress="onProgress">
     <nut-button type="success" size="small">Upload files</nut-button>
@@ -149,29 +133,20 @@ app.use(Uploader);
   <nut-progress
     :percentage="progressPercentage"
     stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
-    :status="progressPercentage==100?'':'active'"
+    :status="progressPercentage == 100 ? '' : 'active'"
   >
   </nut-progress>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const progressPercentage = ref<string | number>(0);
-      const onProgress = ({ event, options, percentage }: any) => {
-        progressPercentage.value = percentage;
-        showToast.text('progress 事件触发' + percentage);
-      };
-      return {
-        uploadUrl,
-        onProgress,
-        progressPercentage
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const uploadUrl = 'https://xxxxx';
+const progressPercentage = (ref < string) | (number > 0);
+const onProgress = ({ event, options, percentage }) => {
+  progressPercentage.value = percentage;
+  showToast.text('progress 事件触发' + percentage);
+};
 </script>
 ```
 
@@ -181,7 +156,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader url="https://xxxx" capture></nut-uploader>
 </template>
@@ -193,7 +168,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader url="https://xxxx" multiple maximum="5"></nut-uploader>
 </template>
@@ -205,26 +180,18 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" multiple :maximize="1024 * 50" @oversize="onOversize"></nut-uploader>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const onOversize = (files: File[]) => {
-        showToast.text('oversize limit upload size (up to 50kb per file)');
-      };
-      return {
-        uploadUrl,
-        onOversize
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const uploadUrl = 'https://xxxxx';
+const onOversize = (files) => {
+  showToast.text('oversize limit upload size (up to 50kb per file)');
+};
 </script>
 ```
 
@@ -234,54 +201,46 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" multiple :before-upload="beforeUpload"></nut-uploader>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const fileToDataURL = (file: Blob): Promise<any> => {
-        return new Promise((resolve) => {
-          const reader = new FileReader();
-          reader.onloadend = (e) => resolve((e.target as FileReader).result);
-          reader.readAsDataURL(file);
-        });
-      };
-      const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
-        return new Promise((resolve) => {
-          const img = new Image();
-          img.onload = () => resolve(img);
-          img.src = dataURL;
-        });
-      };
-      const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
-        return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
-      };
-      const beforeUpload = async (file: File[]) => {
-        let fileName = file[0].name;
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d') as CanvasRenderingContext2D;
-        const base64 = await fileToDataURL(file[0]);
-        const img = await dataURLToImage(base64);
-        canvas.width = img.width;
-        canvas.height = img.height;
-
-        context.clearRect(0, 0, img.width, img.height);
-        context.drawImage(img, 0, 0, img.width, img.height);
-
-        let blob = (await canvastoFile(canvas, 'image/jpeg', 0.5)) as Blob; //quality:0.5可根据实际情况计算
-        const f = await new File([blob], fileName);
-        return [f];
-      };
-      return {
-        uploadUrl,
-        beforeUpload
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const fileToDataURL = (file) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = (e) => resolve(e.target.result);
+    reader.readAsDataURL(file);
+  });
+};
+const dataURLToImage = (dataURL) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.src = dataURL;
+  });
+};
+const canvastoFile = (canvas, type, quality) => {
+  return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
+};
+const beforeUpload = async (file) => {
+  let fileName = file[0].name;
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  const base64 = await fileToDataURL(file[0]);
+  const img = await dataURLToImage(base64);
+  canvas.width = img.width;
+  canvas.height = img.height;
+
+  context.clearRect(0, 0, img.width, img.height);
+  context.drawImage(img, 0, 0, img.width, img.height);
+
+  let blob = await canvastoFile(canvas, 'image/jpeg', 0.5); //quality:0.5可根据实际情况计算
+  const f = await new File([blob], fileName);
+  return [f];
+};
 </script>
 ```
 
@@ -291,24 +250,16 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-credentials="true"></nut-uploader>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const formData = {
-        custom: 'test'
-      };
-      return {
-        uploadUrl,
-        formData
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const formData = {
+  custom: 'test'
+};
 </script>
 ```
 
@@ -318,29 +269,22 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <!-- When the upload method is put, upload the source file stream directly -->
 <template>
   <nut-uploader url="https://xxxx" method="put" :before-xhr-upload="beforeXhrUpload"></nut-uploader>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      // source file https://github.com/jdf2e/nutui/blob/v4/src/packages/__VUE/uploader/uploader.ts#L51
-      const beforeXhrUpload = (xhr: XMLHttpRequest, options: any) => {
-        if (options.method.toLowerCase() == 'put') {
-          xhr.send(options.sourceFile);
-        } else {
-          xhr.send(options.formData);
-        }
-      };
-      return {
-        beforeXhrUpload
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+// source file https://github.com/jdf2e/nutui/blob/v4/src/packages/__VUE/uploader/uploader.ts#L51
+const beforeXhrUpload = (xhr, options) => {
+  if (options.method.toLowerCase() == 'put') {
+    xhr.send(options.sourceFile);
+  } else {
+    xhr.send(options.formData);
+  }
+};
 </script>
 ```
 
@@ -350,33 +294,23 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
   <br />
   <nut-button type="success" size="small" @click="submitUpload">Perform upload</nut-button>
   <nut-button type="danger" size="small" @click="clearUpload">Clear upload</nut-button>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const uploadRef = ref<any>(null);
-      const submitUpload = () => {
-        uploadRef.value.submit();
-      };
-      const clearUpload = () => {
-        uploadRef.value.clearUploadQueue();
-      };
-      return {
-        uploadUrl,
-        uploadRef,
-        submitUpload,
-        clearUpload
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const uploadRef = ref(null);
+const submitUpload = () => {
+  uploadRef.value.submit();
+};
+const clearUpload = () => {
+  uploadRef.value.clearUploadQueue();
+};
 </script>
 ```
 
@@ -386,7 +320,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader disabled></nut-uploader>
 </template>
@@ -398,74 +332,74 @@ app.use(Uploader);
 
 ### Props
 
-| Attribute         | Description                                                                                                                                      | Type                                         | Default            |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------ |
-| auto-upload       | Whether to upload the file immediately after selecting it, if false, you need to manually execute the ref submit method to upload                | boolean                                      | `true`             |
-| name              | The name of the `input` tag `name`, the file parameter name sent to the background                                                               | string                                       | `"file"`           |
-| url               | The interface address of the upload server                                                                                                       | string                                       | -                  |
-| v-model:file-list | List of uploaded files by default                                                                                                                | FileItem[]                                   | `[]`               |
-| is-preview        | Whether to display the preview image after the upload is successful                                                                              | boolean                                      | true               |
-| is-deletable      | Whether to display the delete button                                                                                                             | boolean                                      | `true`             |
-| method            | The http method of upload request                                                                                                                | string                                       | `"post"`           |
-| list-type         | Built-in stylesheets, support for three types: `picture`、`list`                                                                                 | string                                       | "picture"          |
-| capture           | Capture, can be set to [camera](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，turn on the camera directly | string                                       | false              |
-| maximize          | You can set the maximum upload file size (bytes)                                                                                                 | number \| string                             | `Number.MAX_VALUE` |
-| maximum           | File upload limit                                                                                                                                | number \| string                             | `1`                |
-| clear-input       | Whether to clear the `input` content, set to `true` to support repeated selection and upload of the same file                                    | boolean                                      | `true`             |
-| accept            | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)       | string                                       | \*                 |
-| headers           | Set request headers                                                                                                                              | object                                       | `{} `              |
-| data              | Uploading extra params or function which can return uploading extra params                                                                       | object                                       | {}                 |
-| upload-icon-size  | Upload area [icon size] (#/en-US/component/icon) size, such as `20px` `2em` `2rem`                                                               | string \| object                             | -                  |
-| xhr-state         | The success status (status) value of the interface response                                                                                      | number                                       | `200`              |
-| with-credentials  | The ajax upload with cookie sent                                                                                                                 | boolean                                      | `false`            |
-| multiple          | Whether to support multiple file selection                                                                                                       | boolean                                      | `false`            |
-| disabled          | Whether to disable file upload                                                                                                                   | boolean                                      | `false`            |
-| timeout           | timeout, in milliseconds                                                                                                                         | number \| string                             | `1000 * 30 `       |
-| before-upload     | Hook before reading the file, return false to stop reading the file, can return Promise                                                          | Function                                     | `null`             |
-| before-xhr-upload | Customize the method when uploading XHR                                                                                                          | Function(xhr，option)                        | `null`             |
-| before-delete     | Hook before delete the file, return false to stop reading the file, can return Promise                                                           | Function(file,fileList): boolean `丨Promise` | -                  |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| auto-upload | Whether to upload the file immediately after selecting it, if false, you need to manually execute the ref submit method to upload | boolean | `true` |
+| name | The name of the `input` tag `name`, the file parameter name sent to the background | string | `"file"` |
+| url | The interface address of the upload server | string | - |
+| v-model:file-list | List of uploaded files by default | FileItem[] | `[]` |
+| is-preview | Whether to display the preview image after the upload is successful | boolean | true |
+| is-deletable | Whether to display the delete button | boolean | `true` |
+| method | The http method of upload request | string | `"post"` |
+| list-type | Built-in stylesheets, support for three types: `picture`、`list` | string | "picture" |
+| capture | Capture, can be set to [camera](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，turn on the camera directly | string | false |
+| maximize | You can set the maximum upload file size (bytes) | number \| string | `Number.MAX_VALUE` |
+| maximum | File upload limit | number \| string | `1` |
+| clear-input | Whether to clear the `input` content, set to `true` to support repeated selection and upload of the same file | boolean | `true` |
+| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | \* |
+| headers | Set request headers | object | `{} ` |
+| data | Uploading extra params or function which can return uploading extra params | object | {} |
+| upload-icon-size | Upload area [icon size] (#/en-US/component/icon) size, such as `20px` `2em` `2rem` | string \| object | - |
+| xhr-state | The success status (status) value of the interface response | number | `200` |
+| with-credentials | The ajax upload with cookie sent | boolean | `false` |
+| multiple | Whether to support multiple file selection | boolean | `false` |
+| disabled | Whether to disable file upload | boolean | `false` |
+| timeout | timeout, in milliseconds | number \| string | `1000 * 30 ` |
+| before-upload | Hook before reading the file, return false to stop reading the file, can return Promise | Function | `null` |
+| before-xhr-upload | Customize the method when uploading XHR | Function(xhr，option) | `null` |
+| before-delete | Hook before delete the file, return false to stop reading the file, can return Promise | Function(file,fileList): boolean `丨Promise` | - |
 
 ### FileItem
 
-| Attribute  | Description                                                       | Default                           |
-| ---------- | ----------------------------------------------------------------- | --------------------------------- |
-| status     | File status value, optional `ready`,`uploading`,`success`,`error` | `ready`                           |
-| uid        | Unique ID of the file                                             | `new Date().getTime().toString()` |
-| name       | File name                                                         | -                                 |
-| url        | File path                                                         | -                                 |
-| type       | File type                                                         | `"image/jpeg" `                   |
-| formData   | Upload the required data                                          | `new FormData()`                  |
-| percentage | Upload percentage                                                 | `0`                               |
+| Attribute | Description | Default |
+| --- | --- | --- |
+| status | File status value, optional `ready`,`uploading`,`success`,`error` | `ready` |
+| uid | Unique ID of the file | `new Date().getTime().toString()` |
+| name | File name | - |
+| url | File path | - |
+| type | File type | `"image/jpeg" ` |
+| formData | Upload the required data | `new FormData()` |
+| percentage | Upload percentage | `0` |
 
 ### Events
 
-| Event           | Description                                              | Arguments                        |
-| --------------- | -------------------------------------------------------- | -------------------------------- |
-| start           | File upload starts                                       | `options`                        |
-| progress        | The progress of the file upload                          | `{event,option,percentage}`      |
-| oversize        | Triggered when the file size exceeds the limit           | `files`                          |
-| success         | Uploaded successfully                                    | `{responseText,option,fileItem}` |
-| failure         | Upload failed                                            | `{responseText,option,fileItem}` |
-| change          | The state when the uploaded file changes                 | `{fileList,event}`               |
-| delete          | File delete event                                        | `{files,fileList,index}`         |
-| file-item-click | Click to trigger after the file is uploaded successfully | `{fileItem}`                     |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| start | File upload starts | `options` |
+| progress | The progress of the file upload | `{event,option,percentage}` |
+| oversize | Triggered when the file size exceeds the limit | `files` |
+| success | Uploaded successfully | `{responseText,option,fileItem}` |
+| failure | Upload failed | `{responseText,option,fileItem}` |
+| change | The state when the uploaded file changes | `{fileList,event}` |
+| delete | File delete event | `{files,fileList,index}` |
+| file-item-click | Click to trigger after the file is uploaded successfully | `{fileItem}` |
 
 ### Uploader Slots
 
-| Name        | Description                          |
-| ----------- | ------------------------------------ |
-| default     | Default slot                         |
+| Name | Description |
+| --- | --- |
+| default | Default slot |
 | upload-icon | Custom Uploader Button Center `icon` |
-| delete-icon | Custom Right Delete Button           |
+| delete-icon | Custom Right Delete Button |
 
 ### Methods
 
 Use [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) to get Uploader instance and call instance methods.
 
-| Name             | Description                                                                                 | Arguments | Return value |
-| ---------------- | ------------------------------------------------------------------------------------------- | --------- | ------------ |
-| submit           | Manual upload mode, perform upload operation                                                | -         | -            |
-| clearUploadQueue | Empty the selected file queue (this method is generally used when uploading in manual mode) | index     | -            |
+| Name | Description | Arguments | Return value |
+| --- | --- | --- | --- |
+| submit | Manual upload mode, perform upload operation | - | - |
+| clearUploadQueue | Empty the selected file queue (this method is generally used when uploading in manual mode) | index | - |
 
 ## Theming
 
@@ -473,8 +407,8 @@ Use [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) t
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                          | Default Value |
-| ----------------------------- | ------------- |
-| --nut-uploader-picture-width  | _100px_       |
-| --nut-uploader-picture-height | _100px_       |
-| --nut-uploader-background     | _#f7f8fa_     |
+| Name | Default Value |
+| --- | --- |
+| --nut-uploader-picture-width | _100px_ |
+| --nut-uploader-picture-height | _100px_ |
+| --nut-uploader-background | _#f7f8fa_ |
diff --git a/src/packages/__VUE/uploader/doc.md b/src/packages/__VUE/uploader/doc.md
index 86cc2b9477..713773d1d2 100644
--- a/src/packages/__VUE/uploader/doc.md
+++ b/src/packages/__VUE/uploader/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Uploader } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader url="https://xxxx"></nut-uploader>
 </template>
@@ -30,44 +30,36 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="3" multiple></nut-uploader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const defaultFileList = reactive([
-        {
-          name: '文件1.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'success',
-          message: '上传成功',
-          type: 'image'
-        },
-        {
-          name: '文件2.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'error',
-          message: '上传失败',
-          type: 'image'
-        },
-        {
-          name: '文件3.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'uploading',
-          message: '上传中...',
-          type: 'image'
-        }
-      ]);
-      return {
-        uploadUrl,
-        defaultFileList
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const defaultFileList = reactive([
+  {
+    name: '文件1.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'success',
+    message: '上传成功',
+    type: 'image'
+  },
+  {
+    name: '文件2.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'error',
+    message: '上传失败',
+    type: 'image'
+  },
+  {
+    name: '文件3.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'uploading',
+    message: '上传中...',
+    type: 'image'
+  }
+]);
 </script>
 ```
 
@@ -77,46 +69,38 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="10" multiple list-type="list">
     <nut-button type="success" size="small">上传文件</nut-button>
   </nut-uploader>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const defaultFileList = reactive([
-        {
-          name: '文件1.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'success',
-          message: '上传成功',
-          type: 'image'
-        },
-        {
-          name: '文件2.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'error',
-          message: '上传失败',
-          type: 'image'
-        },
-        {
-          name: '文件3.png',
-          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-          status: 'uploading',
-          message: '上传中...',
-          type: 'image'
-        }
-      ]);
-      return {
-        uploadUrl,
-        defaultFileList
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const defaultFileList = reactive([
+  {
+    name: '文件1.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'success',
+    message: '上传成功',
+    type: 'image'
+  },
+  {
+    name: '文件2.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'error',
+    message: '上传失败',
+    type: 'image'
+  },
+  {
+    name: '文件3.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'uploading',
+    message: '上传中...',
+    type: 'image'
+  }
+]);
 </script>
 ```
 
@@ -126,7 +110,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader url="https://xxxx">
     <nut-button type="success" size="small">上传文件</nut-button>
@@ -140,7 +124,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" @progress="onProgress">
     <nut-button type="success" size="small">上传文件</nut-button>
@@ -149,29 +133,20 @@ app.use(Uploader);
   <nut-progress
     :percentage="progressPercentage"
     stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
-    :status="progressPercentage==100?'':'active'"
+    :status="progressPercentage == 100 ? '' : 'active'"
   >
   </nut-progress>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const progressPercentage = ref<string | number>(0);
-      const onProgress = ({ event, options, percentage }: any) => {
-        progressPercentage.value = percentage;
-        showToast.text('progress 事件触发' + percentage);
-      };
-      return {
-        uploadUrl,
-        onProgress,
-        progressPercentage
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const uploadUrl = 'https://xxxxx';
+const progressPercentage = (ref < string) | (number > 0);
+const onProgress = ({ event, options, percentage }) => {
+  progressPercentage.value = percentage;
+  showToast.text('progress 事件触发' + percentage);
+};
 </script>
 ```
 
@@ -181,7 +156,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader url="https://xxxx" capture></nut-uploader>
 </template>
@@ -193,7 +168,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader url="https://xxxx" multiple maximum="5"></nut-uploader>
 </template>
@@ -205,26 +180,18 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" multiple :maximize="1024 * 50" @oversize="onOversize"></nut-uploader>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const onOversize = (files: File[]) => {
-        showToast.text('oversize 触发 文件大小不能超过 50kb');
-      };
-      return {
-        uploadUrl,
-        onOversize
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const uploadUrl = 'https://xxxxx';
+const onOversize = (files) => {
+  showToast.text('oversize 触发 文件大小不能超过 50kb');
+};
 </script>
 ```
 
@@ -234,54 +201,46 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" multiple :before-upload="beforeUpload"></nut-uploader>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const fileToDataURL = (file: Blob): Promise<any> => {
-        return new Promise((resolve) => {
-          const reader = new FileReader();
-          reader.onloadend = (e) => resolve((e.target as FileReader).result);
-          reader.readAsDataURL(file);
-        });
-      };
-      const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
-        return new Promise((resolve) => {
-          const img = new Image();
-          img.onload = () => resolve(img);
-          img.src = dataURL;
-        });
-      };
-      const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
-        return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
-      };
-      const beforeUpload = async (file: File[]) => {
-        let fileName = file[0].name;
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d') as CanvasRenderingContext2D;
-        const base64 = await fileToDataURL(file[0]);
-        const img = await dataURLToImage(base64);
-        canvas.width = img.width;
-        canvas.height = img.height;
-
-        context.clearRect(0, 0, img.width, img.height);
-        context.drawImage(img, 0, 0, img.width, img.height);
-
-        let blob = (await canvastoFile(canvas, 'image/jpeg', 0.5)) as Blob; //quality:0.5可根据实际情况计算
-        const f = await new File([blob], fileName);
-        return [f];
-      };
-      return {
-        uploadUrl,
-        beforeUpload
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const fileToDataURL = (file) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = (e) => resolve(e.target.result);
+    reader.readAsDataURL(file);
+  });
+};
+const dataURLToImage = (dataURL) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.src = dataURL;
+  });
+};
+const canvastoFile = (canvas, type, quality) => {
+  return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
+};
+const beforeUpload = async (file) => {
+  let fileName = file[0].name;
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  const base64 = await fileToDataURL(file[0]);
+  const img = await dataURLToImage(base64);
+  canvas.width = img.width;
+  canvas.height = img.height;
+
+  context.clearRect(0, 0, img.width, img.height);
+  context.drawImage(img, 0, 0, img.width, img.height);
+
+  let blob = await canvastoFile(canvas, 'image/jpeg', 0.5); //quality:0.5可根据实际情况计算
+  const f = await new File([blob], fileName);
+  return [f];
+};
 </script>
 ```
 
@@ -291,24 +250,16 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-credentials="true"></nut-uploader>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const formData = {
-        custom: 'test'
-      };
-      return {
-        uploadUrl,
-        formData
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const formData = {
+  custom: 'test'
+};
 </script>
 ```
 
@@ -318,29 +269,22 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <!-- 当上传方式为put时，直接上传源文件file流 -->
 <template>
   <nut-uploader url="https://xxxx" method="put" :before-xhr-upload="beforeXhrUpload"></nut-uploader>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      // source file https://github.com/jdf2e/nutui/blob/v4/src/packages/__VUE/uploader/uploader.ts#L51
-      const beforeXhrUpload = (xhr: XMLHttpRequest, options: any) => {
-        if (options.method.toLowerCase() == 'put') {
-          xhr.send(options.sourceFile);
-        } else {
-          xhr.send(options.formData);
-        }
-      };
-      return {
-        beforeXhrUpload
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+// source file https://github.com/jdf2e/nutui/blob/v4/src/packages/__VUE/uploader/uploader.ts#L51
+const beforeXhrUpload = (xhr, options) => {
+  if (options.method.toLowerCase() == 'put') {
+    xhr.send(options.sourceFile);
+  } else {
+    xhr.send(options.formData);
+  }
+};
 </script>
 ```
 
@@ -350,33 +294,23 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
   <br />
   <nut-button type="success" size="small" @click="submitUpload">手动执行上传</nut-button>
   <nut-button type="danger" size="small" @click="clearUpload">手动清空上传</nut-button>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const uploadUrl = 'https://xxxxx';
-      const uploadRef = ref<any>(null);
-      const submitUpload = () => {
-        uploadRef.value.submit();
-      };
-      const clearUpload = () => {
-        uploadRef.value.clearUploadQueue();
-      };
-      return {
-        uploadUrl,
-        uploadRef,
-        submitUpload,
-        clearUpload
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const uploadUrl = 'https://xxxxx';
+const uploadRef = ref(null);
+const submitUpload = () => {
+  uploadRef.value.submit();
+};
+const clearUpload = () => {
+  uploadRef.value.clearUploadQueue();
+};
 </script>
 ```
 
@@ -386,7 +320,7 @@ app.use(Uploader);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader disabled></nut-uploader>
 </template>
@@ -398,75 +332,75 @@ app.use(Uploader);
 
 ### Props
 
-| 参数              | 说明                                                                                                                   | 类型                                         | 默认值             |
-| ----------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------ |
-| auto-upload       | 是否在选取文件后立即进行上传，`false` 时需要手动执行 ref submit 方法进行上传                                           | boolean                                      | `true`             |
-| name              | `input` 标签 `name` 的名称，发到后台的文件参数名                                                                       | string                                       | `"file"`           |
-| url               | 上传服务器的接口地址                                                                                                   | string                                       | -                  |
-| v-model:file-list | 默认已经上传的文件列表                                                                                                 | FileItem[]                                   | `[]`               |
-| is-preview        | 是否上传成功后展示预览图                                                                                               | boolean                                      | `true`             |
-| is-deletable      | 是否展示删除按钮                                                                                                       | boolean                                      | `true`             |
-| method            | 上传请求的 http method                                                                                                 | string                                       | `"post"`           |
-| list-type         | 上传列表的内建样式，支持两种基础样式 `picture`、`list`                                                                 | string                                       | `"picture"`        |
-| capture           | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接调起摄像头     | string                                       | `false`            |
-| maximize          | 可以设定最大上传文件的大小（字节）                                                                                     | number \| string                             | `Number.MAX_VALUE` |
-| maximum           | 文件上传数量限制                                                                                                       | number \| string                             | `1`                |
-| clear-input       | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件                                                          | boolean                                      | `true`             |
-| accept            | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file)                   | string                                       | `* `               |
-| headers           | 设置上传的请求头部                                                                                                     | object                                       | `{}`               |
-| data              | 附加上传的信息 formData                                                                                                | object                                       | `{}`               |
-| xhr-state         | 接口响应的成功状态（status）值                                                                                         | number                                       | `200`              |
-| with-credentials  | 支持发送 cookie 凭证信息                                                                                               | boolean                                      | `false`            |
-| multiple          | 是否支持文件多选                                                                                                       | boolean                                      | `false`            |
-| disabled          | 是否禁用文件上传                                                                                                       | boolean                                      | `false`            |
-| timeout           | 超时时间，单位为毫秒                                                                                                   | number \| string                             | `1000 * 30`        |
-| before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                                  | Function                                     | `null`             |
-| before-xhr-upload | 执行 XHR 上传时，自定义方式                                                                                            | Function(xhr，option)                        | `null`             |
-| before-delete     | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file,fileList): boolean `丨Promise` | -                  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| auto-upload | 是否在选取文件后立即进行上传，`false` 时需要手动执行 ref submit 方法进行上传 | boolean | `true` |
+| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | string | `"file"` |
+| url | 上传服务器的接口地址 | string | - |
+| v-model:file-list | 默认已经上传的文件列表 | FileItem[] | `[]` |
+| is-preview | 是否上传成功后展示预览图 | boolean | `true` |
+| is-deletable | 是否展示删除按钮 | boolean | `true` |
+| method | 上传请求的 http method | string | `"post"` |
+| list-type | 上传列表的内建样式，支持两种基础样式 `picture`、`list` | string | `"picture"` |
+| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接调起摄像头 | string | `false` |
+| maximize | 可以设定最大上传文件的大小（字节） | number \| string | `Number.MAX_VALUE` |
+| maximum | 文件上传数量限制 | number \| string | `1` |
+| clear-input | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | boolean | `true` |
+| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file) | string | `* ` |
+| headers | 设置上传的请求头部 | object | `{}` |
+| data | 附加上传的信息 formData | object | `{}` |
+| xhr-state | 接口响应的成功状态（status）值 | number | `200` |
+| with-credentials | 支持发送 cookie 凭证信息 | boolean | `false` |
+| multiple | 是否支持文件多选 | boolean | `false` |
+| disabled | 是否禁用文件上传 | boolean | `false` |
+| timeout | 超时时间，单位为毫秒 | number \| string | `1000 * 30` |
+| before-upload | 上传前的函数需要返回一个`Promise`对象 | Function | `null` |
+| before-xhr-upload | 执行 XHR 上传时，自定义方式 | Function(xhr，option) | `null` |
+| before-delete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file,fileList): boolean `丨Promise` | - |
 
 > 注意：accept、capture 和 multiple 为浏览器 input 标签的原生属性，移动端各种机型对这些属性的支持程度有所差异，因此在不同机型和 WebView 下可能出现一些兼容性问题。
 
 ### FileItem
 
-| 名称       | 说明                                                   | 默认值                            |
-| ---------- | ------------------------------------------------------ | --------------------------------- |
-| status     | 文件状态值，可选 `ready`,`uploading`,`success`,`error` | `ready`                           |
-| uid        | 文件的唯一标识                                         | `new Date().getTime().toString()` |
-| name       | 文件名称                                               | -                                 |
-| url        | 文件路径                                               | -                                 |
-| type       | 文件类型                                               | `"image/jpeg"`                    |
-| formData   | 上传所需的 data                                        | `new FormData() `                 |
-| percentage | 上传百分比                                             | `0`                               |
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| status | 文件状态值，可选 `ready`,`uploading`,`success`,`error` | `ready` |
+| uid | 文件的唯一标识 | `new Date().getTime().toString()` |
+| name | 文件名称 | - |
+| url | 文件路径 | - |
+| type | 文件类型 | `"image/jpeg"` |
+| formData | 上传所需的 data | `new FormData() ` |
+| percentage | 上传百分比 | `0` |
 
 ### Events
 
-| 事件名          | 说明                   | 回调参数                         |
-| --------------- | ---------------------- | -------------------------------- |
-| start           | 文件上传开始           | `options`                        |
-| progress        | 文件上传的进度         | `{event,option,percentage}`      |
-| oversize        | 文件大小超过限制时触发 | `files`                          |
-| success         | 上传成功               | `{responseText,option,fileItem}` |
-| failure         | 上传失败               | `{responseText,option,fileItem}` |
-| change          | 上传文件改变时的状态   | `{fileList,event}`               |
-| delete          | 文件删除事件           | `{files,fileList,index}`         |
-| file-item-click | 文件上传成功后点击触发 | `{fileItem}`                     |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| start | 文件上传开始 | `options` |
+| progress | 文件上传的进度 | `{event,option,percentage}` |
+| oversize | 文件大小超过限制时触发 | `files` |
+| success | 上传成功 | `{responseText,option,fileItem}` |
+| failure | 上传失败 | `{responseText,option,fileItem}` |
+| change | 上传文件改变时的状态 | `{fileList,event}` |
+| delete | 文件删除事件 | `{files,fileList,index}` |
+| file-item-click | 文件上传成功后点击触发 | `{fileItem}` |
 
 ### Uploader Slots
 
-| 名称        | 说明                         |
-| ----------- | ---------------------------- |
-| default     | 默认插槽自定义内容           |
+| 名称 | 说明 |
+| --- | --- |
+| default | 默认插槽自定义内容 |
 | upload-icon | 自定义上传按钮中间`icon`区域 |
-| delete-icon | 自定义右上角删除按钮区域     |
+| delete-icon | 自定义右上角删除按钮区域 |
 
 ### Methods
 
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 Uploader 实例并调用实例方法
 
-| 方法名           | 说明                                                       | 参数  | 返回值 |
-| ---------------- | ---------------------------------------------------------- | ----- | ------ |
-| submit           | 手动上传模式，执行上传操作                                 | -     | -      |
-| clearUploadQueue | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | index | -      |
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| submit | 手动上传模式，执行上传操作 | - | - |
+| clearUploadQueue | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | index | - |
 
 ## 主题定制
 
@@ -474,8 +408,8 @@ app.use(Uploader);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                          | 默认值    |
-| ----------------------------- | --------- |
-| --nut-uploader-picture-width  | _100px_   |
-| --nut-uploader-picture-height | _100px_   |
-| --nut-uploader-background     | _#f7f8fa_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-uploader-picture-width | _100px_ |
+| --nut-uploader-picture-height | _100px_ |
+| --nut-uploader-background | _#f7f8fa_ |
diff --git a/src/packages/__VUE/uploader/doc.taro.md b/src/packages/__VUE/uploader/doc.taro.md
index 381bb54926..7bd76a5954 100644
--- a/src/packages/__VUE/uploader/doc.taro.md
+++ b/src/packages/__VUE/uploader/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Uploader } from '@nutui/nutui-taro';
 
@@ -16,128 +16,141 @@ app.use(Uploader);
 
 ### 基础用法
 
-```html
-<nut-uploader :url="uploadUrl"></nut-uploader>
+```vue
+<template>
+  <nut-uploader url="https://xxxx"></nut-uploader>
+</template>
 ```
 
 ### 上传状态
 
-```html
-<nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="3" multiple></nut-uploader>
+```vue
+<template>
+  <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="3" multiple></nut-uploader>
+</template>
 ```
 
 ### 基础用法-上传列表展示
 
-```html
-<nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="10" multiple list-type="list">
-  <nut-button type="success" size="small">上传文件</nut-button>
-</nut-uploader>
+```vue
+<template>
+  <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="10" multiple list-type="list">
+    <nut-button type="success" size="small">上传文件</nut-button>
+  </nut-uploader>
+</template>
 ```
 
 ### 自定义上传样式
 
-```html
-<nut-uploader :url="uploadUrl">
-  <nut-button type="success" size="small">上传文件</nut-button>
-</nut-uploader>
+```vue
+<template>
+  <nut-uploader :url="uploadUrl">
+    <nut-button type="success" size="small">上传文件</nut-button>
+  </nut-uploader>
+</template>
 ```
 
 ### 自定义上传使用默认进度条
 
-```html
-<nut-uploader :url="uploadUrl" @progress="onProgress">
-  <nut-button type="success" size="small">上传文件</nut-button>
-</nut-uploader>
-<br />
-<nut-progress
-  :percentage="progressPercentage"
-  stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
-  :status="progressPercentage==100?'':'active'"
->
-</nut-progress>
+```vue
+<template>
+  <nut-uploader :url="uploadUrl" @progress="onProgress">
+    <nut-button type="success" size="small">上传文件</nut-button>
+  </nut-uploader>
+  <br />
+  <nut-progress
+    :percentage="progressPercentage"
+    stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
+    :status="progressPercentage == 100 ? '' : 'active'"
+  >
+  </nut-progress>
+</template>
 ```
 
 ### 直接调起摄像头 camera
 
-```html
-<nut-uploader :url="uploadUrl" :source-type="['camera']"></nut-uploader>
+```vue
+<template>
+  <nut-uploader :url="uploadUrl" :source-type="['camera']"></nut-uploader>
+</template>
 ```
 
 ### 使用前摄像头拍摄 3s 视频并上传(仅支持微信小程序)
 
-```html
-<nut-uploader :max-duration="3" :source-type="['camera']" camera="front" :url="uploadUrl"></nut-uploader>
+```vue
+<template>
+  <nut-uploader :max-duration="3" :source-type="['camera']" camera="front" :url="uploadUrl"></nut-uploader>
+</template>
 ```
 
 ### 限制上传数量 5 个
 
-```html
-<nut-uploader :url="uploadUrl" multiple maximum="5"></nut-uploader>
+```vue
+<template>
+  <nut-uploader :url="uploadUrl" multiple maximum="5"></nut-uploader>
+</template>
 ```
 
 ### 限制上传大小（每个文件最大不超过 50kb）
 
-```html
-<nut-uploader :url="uploadUrl" multiple :maximize="1024 * 50" @oversize="onOversize"></nut-uploader>
+```vue
+<template>
+  <nut-uploader :url="uploadUrl" multiple :maximize="1024 * 50" @oversize="onOversize"></nut-uploader>
+</template>
 ```
 
 ### 自定义数据 FormData headers
 
-```html
-<nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-Credentials="true"></nut-uploader>
+```vue
+<template>
+  <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-Credentials="true"></nut-uploader>
+</template>
 ```
 
 ### 自定义上传方式(before-xhr-upload)
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-uploader url="https://xxxx" :before-xhr-upload="beforeXhrUpload"></nut-uploader>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      // source file https://github.com/jdf2e/nutui/blob/v4/src/packages/__VUE/uploader/uploader.ts#L6
-      const beforeXhrUpload = (taroUploadFile: any, options: any) => {
-        //taroUploadFile  是 Taro.uploadFile ， 你也可以自定义设置其它函数
-        const uploadTask = taroUploadFile({
-          url: options.url,
-          filePath: options.taroFilePath,
-          fileType: options.fileType,
-          header: {
-            'Content-Type': 'multipart/form-data',
-            ...options.headers
-          }, //
-          formData: options.formData,
-          name: options.name,
-          success(response: { errMsg: any; statusCode: number; data: string }) {
-            if (options.xhrState == response.statusCode) {
-              options.onSuccess?.(response, options);
-            } else {
-              options.onFailure?.(response, options);
-            }
-          },
-          fail(e: any) {
-            options.onFailure?.(e, options);
+<script setup>
+import { ref } from 'vue';
+    // source file https://github.com/jdf2e/nutui/blob/v4/src/packages/__VUE/uploader/uploader.ts#L6
+    const beforeXhrUpload = (taroUploadFile, options) => {
+      //taroUploadFile  是 Taro.uploadFile ， 你也可以自定义设置其它函数
+      const uploadTask = taroUploadFile({
+        url: options.url,
+        filePath: options.taroFilePath,
+        fileType: options.fileType,
+        header: {
+          'Content-Type': 'multipart/form-data',
+          ...options.headers
+        }, //
+        formData: options.formData,
+        name: options.name,
+        success(response: { errMsg; statusCode; data }) {
+          if (options.xhrState == response.statusCode) {
+            options.onSuccess?.(response, options);
+          } else {
+            options.onFailure?.(response, options);
           }
-        });
-        options.onStart?.(options);
-        uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
-          options.onProgress?.(res, options);
-          // console.log('上传进度', res.progress);
-          // console.log('已经上传的数据长度', res.totalBytesSent);
-          // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
-        });
-        // uploadTask.abort(); // 取消上传任务
-      };
-      return {
-        beforeXhrUpload
-      };
-    }
-  };
+        },
+        fail(e) {
+          options.onFailure?.(e, options);
+        }
+      });
+      options.onStart?.(options);
+      uploadTask.progress((res) => {
+        options.onProgress?.(res, options);
+        // console.log('上传进度', res.progress);
+        // console.log('已经上传的数据长度', res.totalBytesSent);
+        // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
+      });
+      // uploadTask.abort(); // 取消上传任务
+    };
 </script>
 ```
 
@@ -145,170 +158,162 @@ app.use(Uploader);
 
 ### 选中文件后，通过按钮手动执行上传
 
-```html
-<nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
-<br />
-<nut-button type="success" size="small" @click="submitUpload">手动执行上传</nut-button>
-<nut-button type="success" size="small" @click="clearUpload">手动清空上传</nut-button>
+```vue
+<template>
+  <nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
+  <br />
+  <nut-button type="success" size="small" @click="submitUpload">手动执行上传</nut-button>
+  <nut-button type="success" size="small" @click="clearUpload">手动清空上传</nut-button>
+</template>
 ```
 
 ### 禁用状态
 
-```html
-<nut-uploader disabled></nut-uploader>
+```vue
+<template>
+  <nut-uploader disabled></nut-uploader>
+</template>
 ```
 
-```javascript
-import { ref,reactive } from 'vue';
-setup() {
-  const uploadUrl = 'http://服务器地址';
-  const progressPercentage = ref<string | number>(0);
-  const formData = {
-    custom: 'test'
-  };
-  const defaultFileList = reactive([
-    {
-      name: '文件1.png',
-      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-      status: 'success',
-      message: '上传成功',
-      type: 'image'
-    },
-    {
-      name: '文件2.png',
-      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-      status: 'error',
-      message: '上传失败',
-      type: 'image'
-    },
-    {
-      name: '文件3.png',
-      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-      status: 'uploading',
-      message: '上传中...',
-      type: 'image'
-    }
-  ]);
-  const fileToDataURL = (file: Blob): Promise<any> => {
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.onloadend = (e) => resolve((e.target as FileReader).result);
-      reader.readAsDataURL(file);
-    });
-  };
-  const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.onload = () => resolve(img);
-      img.src = dataURL;
-    });
-  };
-  const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
-    return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
-  };
-  const onOversize = (files: File[]) => {
-    console.log('oversize 触发 文件大小不能超过 50kb', files);
-  };
-  const onDelete = (obj: any) => {
-    console.log('delete 事件触发', obj);
-  };
-  const onProgress = ({ event, options, percentage }: any) => {
-    progressPercentage.value = percentage;
-    console.log('progress 事件触发', percentage);
-  };
-  const uploadRef = ref<any>(null);
-  const submitUpload = () => {
-    uploadRef.value.submit();
-  };
-  const clearUpload = () => {
-    uploadRef.value.clearUploadQueue();
-  };
-  return {
-    onOversize,
-    onDelete,
-    onProgress,
-    progressPercentage,
-    uploadUrl,
-    defaultFileList,
-    formData,
-    uploadRef,
-    submitUpload,
-    clearUpload
-  };
-}
+```vue
+<script setup>
+import { ref, reactive } from 'vue';
+const uploadUrl = 'http://服务器地址';
+const progressPercentage = ref(0);
+const formData = {
+  custom: 'test'
+};
+const defaultFileList = reactive([
+  {
+    name: '文件1.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'success',
+    message: '上传成功',
+    type: 'image'
+  },
+  {
+    name: '文件2.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'error',
+    message: '上传失败',
+    type: 'image'
+  },
+  {
+    name: '文件3.png',
+    url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    status: 'uploading',
+    message: '上传中...',
+    type: 'image'
+  }
+]);
+const fileToDataURL = (file) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = (e) => resolve(e.target.result);
+    reader.readAsDataURL(file);
+  });
+};
+const dataURLToImage = (dataURL) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.src = dataURL;
+  });
+};
+const canvastoFile = (canvas, type, quality) => {
+  return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
+};
+const onOversize = (files) => {
+  console.log('oversize 触发 文件大小不能超过 50kb', files);
+};
+const onDelete = (obj) => {
+  console.log('delete 事件触发', obj);
+};
+const onProgress = ({ event, options, percentage }) => {
+  progressPercentage.value = percentage;
+  console.log('progress 事件触发', percentage);
+};
+const uploadRef = ref(null);
+const submitUpload = () => {
+  uploadRef.value.submit();
+};
+const clearUpload = () => {
+  uploadRef.value.clearUploadQueue();
+};
+</script>
 ```
 
 ## API
 
 ### Props
 
-| 参数                      | 说明                                                                                                     | 类型                              | 默认值                      |
-| ------------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | --------------------------- |
-| auto-upload               | 是否在选取文件后立即进行上传，`false` 时需要手动执行 ref submit 方法进行上传                             | Boolean                           | `true`                      |
-| name                      | 发到后台的文件参数名                                                                                     | String                            | `file`                      |
-| url                       | 上传服务器的接口地址                                                                                     | String                            | `-`                         |
-| v-model:file-list         | 默认已经上传的文件列表                                                                                   | FileItem[]                        | `[]`                        |
-| is-preview                | 是否上传成功后展示预览图                                                                                 | Boolean                           | `true`                      |
-| is-deletable              | 是否展示删除按钮                                                                                         | Boolean                           | `true`                      |
-| method                    | 上传请求的 http method                                                                                   | String                            | `post`                      |
-| list-type                 | 上传列表的内建样式，支持两种基础样式 `picture`、`list`                                                   | String                            | `picture`                   |
-| maximize                  | 可以设定最大上传文件的大小（字节）                                                                       | Number \| String                  | `Number.MAX_VALUE`          |
-| maximum                   | 最多可以选择的文件个数，微信基础库 2.25.0 前，最多可支持 9 个文件，2.25.0 及以后最多可支持 20 个文件     | Number \| String                  | `1`                         |
-| source-type               | [选择文件的来源](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html)   | Array                             | `['album','camera']`        |
-| camera`仅支持WEAPP`       | 仅在 `source-type` 为 `camera` 时生效，使用前置或后置摄像头                                              | String                            | `back`                      |
-| size-type                 | [是否压缩所选文件](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html) | Array                             | `['original','compressed']` |
-| media-type`仅支持WEAPP`   | [选择文件类型](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html)     | Array                             | `['image', 'video', 'mix']` |
-| max-duration`仅支持WEAPP` | 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。                                    | Number                            | 10                          |
-| headers                   | 设置上传的请求头部                                                                                       | object                            | `{}`                        |
-| data                      | 附加上传的信息 formData                                                                                  | object                            | `{}`                        |
-| xhr-state                 | 接口响应的成功状态（status）值                                                                           | Number                            | `200`                       |
-| disabled                  | 是否禁用文件上传                                                                                         | Boolean                           | `false`                     |
-| multiple                  | 是否支持文件多选                                                                                         | Boolean                           | `true`                      |
-| timeout                   | 超时时间，单位为毫秒                                                                                     | Number \| String                  | `1000 * 30`                 |
-| before-xhr-upload         | 执行 `Taro.uploadFile` 上传时，自定义方式                                                                | Function(Taro.uploadFile，option) | `null`                      |
-| mode`v4.1.1 仅支持小程序` | 预览图片的 mode 属性                                                                                     | string                            | `aspectFit`                 |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| auto-upload | 是否在选取文件后立即进行上传，`false` 时需要手动执行 ref submit 方法进行上传 | Boolean | `true` |
+| name | 发到后台的文件参数名 | String | `file` |
+| url | 上传服务器的接口地址 | String | `-` |
+| v-model:file-list | 默认已经上传的文件列表 | FileItem[] | `[]` |
+| is-preview | 是否上传成功后展示预览图 | Boolean | `true` |
+| is-deletable | 是否展示删除按钮 | Boolean | `true` |
+| method | 上传请求的 http method | String | `post` |
+| list-type | 上传列表的内建样式，支持两种基础样式 `picture`、`list` | String | `picture` |
+| maximize | 可以设定最大上传文件的大小（字节） | Number \| String | `Number.MAX_VALUE` |
+| maximum | 最多可以选择的文件个数，微信基础库 2.25.0 前，最多可支持 9 个文件，2.25.0 及以后最多可支持 20 个文件 | Number \| String | `1` |
+| source-type | [选择文件的来源](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html) | Array | `['album','camera']` |
+| camera`仅支持WEAPP` | 仅在 `source-type` 为 `camera` 时生效，使用前置或后置摄像头 | String | `back` |
+| size-type | [是否压缩所选文件](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html) | Array | `['original','compressed']` |
+| media-type`仅支持WEAPP` | [选择文件类型](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html) | Array | `['image', 'video', 'mix']` |
+| max-duration`仅支持WEAPP` | 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。 | Number | 10 |
+| headers | 设置上传的请求头部 | object | `{}` |
+| data | 附加上传的信息 formData | object | `{}` |
+| xhr-state | 接口响应的成功状态（status）值 | Number | `200` |
+| disabled | 是否禁用文件上传 | Boolean | `false` |
+| multiple | 是否支持文件多选 | Boolean | `true` |
+| timeout | 超时时间，单位为毫秒 | Number \| String | `1000 * 30` |
+| before-xhr-upload | 执行 `Taro.uploadFile` 上传时，自定义方式 | Function(Taro.uploadFile，option) | `null` |
+| mode`v4.1.1 仅支持小程序` | 预览图片的 mode 属性 | string | `aspectFit` |
 
 ### FileItem
 
-| 名称       | 说明                                                  | 默认值                            |
-| ---------- | ----------------------------------------------------- | --------------------------------- |
-| status     | 文件状态值，可选`ready`,`uploading`,`success`,`error` | `ready`                           |
-| uid        | 文件的唯一标识                                        | `new Date().getTime().toString()` |
-| name       | 文件名称                                              | -                                 |
-| url        | 文件路径                                              | -                                 |
-| formData   | 上传所需的 data                                       | `{}`                              |
-| percentage | 上传百分比                                            | `0`                               |
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| status | 文件状态值，可选`ready`,`uploading`,`success`,`error` | `ready` |
+| uid | 文件的唯一标识 | `new Date().getTime().toString()` |
+| name | 文件名称 | - |
+| url | 文件路径 | - |
+| formData | 上传所需的 data | `{}` |
+| percentage | 上传百分比 | `0` |
 
 ### Events
 
-| 事件名          | 说明                   | 回调参数                    |
-| --------------- | ---------------------- | --------------------------- |
-| start           | 文件上传开始           | `options`                   |
-| progress        | 文件上传的进度         | `{event,option,percentage}` |
-| oversize        | 文件大小超过限制时触发 | `files`                     |
-| success         | 上传成功               | `{data,option,fileItem}`    |
-| failure         | 上传失败               | `{data,option,fileItem}`    |
-| change          | 上传文件改变时的状态   | `{fileList,event}`          |
-| delete          | 文件删除事件           | `{files,fileList,index}`    |
-| file-item-click | 文件上传成功后点击触发 | `{fileItem}`                |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| start | 文件上传开始 | `options` |
+| progress | 文件上传的进度 | `{event,option,percentage}` |
+| oversize | 文件大小超过限制时触发 | `files` |
+| success | 上传成功 | `{data,option,fileItem}` |
+| failure | 上传失败 | `{data,option,fileItem}` |
+| change | 上传文件改变时的状态 | `{fileList,event}` |
+| delete | 文件删除事件 | `{files,fileList,index}` |
+| file-item-click | 文件上传成功后点击触发 | `{fileItem}` |
 
 ### Uploader Slots
 
-| 名称        | 说明                         |
-| ----------- | ---------------------------- |
-| default     | 默认插槽自定义内容           |
+| 名称 | 说明 |
+| --- | --- |
+| default | 默认插槽自定义内容 |
 | upload-icon | 自定义上传按钮中间`icon`区域 |
-| delete-icon | 自定义右上角删除按钮区域     |
+| delete-icon | 自定义右上角删除按钮区域 |
 
 ### Methods
 
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 Uploader 实例并调用实例方法
 
-| 方法名           | 说明                                                       | 参数  | 返回值 |
-| ---------------- | ---------------------------------------------------------- | ----- | ------ |
-| submit           | 手动上传模式，执行上传操作                                 | -     | `-`    |
-| chooseImage      | 调用选择文件的方法，效果等同于点击 nut-uploader 组件       | -     | -      |
-| clearUploadQueue | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | index | `-`    |
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| submit | 手动上传模式，执行上传操作 | - | `-` |
+| chooseImage | 调用选择文件的方法，效果等同于点击 nut-uploader 组件 | - | - |
+| clearUploadQueue | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | index | `-` |
 
 ## 主题定制
 
@@ -316,8 +321,8 @@ setup() {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                          | 默认值    |
-| ----------------------------- | --------- |
-| --nut-uploader-picture-width  | _100px_   |
-| --nut-uploader-picture-height | _100px_   |
-| --nut-uploader-background     | _#f7f8fa_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-uploader-picture-width | _100px_ |
+| --nut-uploader-picture-height | _100px_ |
+| --nut-uploader-background | _#f7f8fa_ |