From a0a2a6bd01d6872e31ed498837ecc6b493e25920 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Wed, 8 Nov 2023 16:05:25 +0800
Subject: [PATCH] chore(business): move to setup sugar (#2643)

---
 .../src/business/pages/address/index.vue      | 460 ++++-----
 .../src/business/pages/addresslist/index.vue  | 109 +--
 .../src/business/pages/barrage/index.vue      |  29 +-
 .../src/business/pages/category/index.vue     |  78 +-
 .../src/business/pages/comment/index.vue      |  60 +-
 .../src/business/pages/ecard/index.vue        |  67 +-
 .../src/business/pages/invoice/index.vue      | 170 ++--
 .../src/business/pages/signature/index.vue    |  85 +-
 .../src/business/pages/sku/index.vue          | 307 +++---
 .../src/business/pages/timeselect/index.vue   | 259 +++--
 src/packages/__VUE/address/demo.vue           | 503 +++++-----
 src/packages/__VUE/address/doc.en-US.md       | 917 +++++++++--------
 src/packages/__VUE/address/doc.md             | 919 +++++++++---------
 src/packages/__VUE/address/doc.taro.md        | 919 +++++++++---------
 src/packages/__VUE/addresslist/demo.vue       | 136 ++-
 src/packages/__VUE/addresslist/doc.en-US.md   | 340 +++----
 src/packages/__VUE/addresslist/doc.md         | 340 +++----
 src/packages/__VUE/addresslist/doc.taro.md    | 340 +++----
 src/packages/__VUE/barrage/demo.vue           |  51 +-
 src/packages/__VUE/barrage/doc.en-US.md       |  56 +-
 src/packages/__VUE/barrage/doc.md             |  56 +-
 src/packages/__VUE/barrage/doc.taro.md        |  54 +-
 src/packages/__VUE/card/demo.vue              |  66 +-
 src/packages/__VUE/category/demo.vue          | 133 ++-
 src/packages/__VUE/category/doc.en-US.md      | 276 +++---
 src/packages/__VUE/category/doc.md            | 276 +++---
 src/packages/__VUE/category/doc.taro.md       | 242 ++---
 src/packages/__VUE/comment/demo.vue           |  87 +-
 src/packages/__VUE/comment/doc.en-US.md       | 171 ++--
 src/packages/__VUE/comment/doc.md             | 171 ++--
 src/packages/__VUE/comment/doc.taro.md        | 171 ++--
 src/packages/__VUE/ecard/demo.vue             |  84 +-
 src/packages/__VUE/ecard/doc.en-US.md         | 131 ++-
 src/packages/__VUE/ecard/doc.md               | 111 +--
 src/packages/__VUE/ecard/doc.taro.md          | 129 ++-
 src/packages/__VUE/invoice/demo.vue           | 190 ++--
 src/packages/__VUE/invoice/doc.en-US.md       | 214 ++--
 src/packages/__VUE/invoice/doc.md             | 214 ++--
 src/packages/__VUE/invoice/doc.taro.md        | 214 ++--
 src/packages/__VUE/signature/demo.vue         | 117 +--
 src/packages/__VUE/sku/demo.vue               | 336 +++----
 src/packages/__VUE/sku/doc.en-US.md           | 653 ++++++-------
 src/packages/__VUE/sku/doc.md                 | 653 ++++++-------
 src/packages/__VUE/sku/doc.taro.md            | 658 ++++++-------
 src/packages/__VUE/timeselect/demo.vue        | 270 +++--
 src/packages/__VUE/timeselect/doc.en-US.md    | 522 +++++-----
 src/packages/__VUE/timeselect/doc.md          | 522 +++++-----
 src/packages/__VUE/timeselect/doc.taro.md     | 511 +++++-----
 48 files changed, 6174 insertions(+), 7203 deletions(-)

diff --git a/packages/nutui-taro-demo/src/business/pages/address/index.vue b/packages/nutui-taro-demo/src/business/pages/address/index.vue
index 5f98b3c9a0..fa5fd70f93 100644
--- a/packages/nutui-taro-demo/src/business/pages/address/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/address/index.vue
@@ -2,44 +2,44 @@
   <div class="demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>选择自定义地址</h2>
-    <nut-cell title="选择地址" :desc="one" is-link @click="showAddress"></nut-cell>
+    <nut-cell title="选择地址" :desc="text.one" is-link @click="showAddress"></nut-cell>
 
     <nut-address
-      v-model:visible="normal"
-      :province="province"
-      :city="city"
-      :country="country"
-      :town="town"
+      v-model:visible="showPopup.normal"
+      :province="address.province"
+      :city="address.city"
+      :country="address.country"
+      :town="address.town"
       @change="(cal) => onChange(cal, 'normal')"
       @close="close1"
     ></nut-address>
 
     <h2>选中省市区</h2>
-    <nut-cell title="选择地址" :desc="six" is-link @click="showSelected"></nut-cell>
+    <nut-cell title="选择地址" :desc="text.six" is-link @click="showSelected"></nut-cell>
 
     <nut-address
       v-model="value"
-      v-model:visible="select"
-      :province="province"
-      :city="city"
-      :country="country"
-      :town="town"
+      v-model:visible="showPopup.select"
+      :province="address.province"
+      :city="address.city"
+      :country="address.country"
+      :town="address.town"
       @change="(cal) => onChange(cal, 'select')"
       @close="close6"
       :columns-placeholder="placeholder"
     ></nut-address>
 
     <h2>选择自定义地址2</h2>
-    <nut-cell title="选择地址" :desc="five" is-link @click="showAddress2"></nut-cell>
+    <nut-cell title="选择地址" :desc="text.five" is-link @click="showAddress2"></nut-cell>
 
     <nut-address
       v-model="value2"
-      v-model:visible="normal2"
+      v-model:visible="showPopup.normal2"
       type="custom2"
-      :province="province"
-      :city="city"
-      :country="country"
-      :town="town"
+      :province="address.province"
+      :city="address.city"
+      :country="address.country"
+      :town="address.town"
       height="270px"
       @change="(cal) => onChange(cal, 'normal2')"
       @close="close5"
@@ -47,10 +47,10 @@
     ></nut-address>
 
     <h2>选择已有地址</h2>
-    <nut-cell title="选择地址" :desc="two" is-link @click="showAddressExist"></nut-cell>
+    <nut-cell title="选择地址" :desc="text.two" is-link @click="showAddressExist"></nut-cell>
 
     <nut-address
-      v-model:visible="exist"
+      v-model:visible="showPopup.exist"
       type="exist"
       :exist-address="existAddress"
       @change="(cal) => onChange(cal, 'exist')"
@@ -60,18 +60,18 @@
     ></nut-address>
 
     <h2>自定义图标</h2>
-    <nut-cell title="选择地址" :desc="three" is-link @click="showCustomImg"></nut-cell>
+    <nut-cell title="选择地址" :desc="text.three" is-link @click="showCustomImg"></nut-cell>
 
     <nut-address
-      v-model:visible="customImg"
+      v-model:visible="showPopup.customImg"
       type="exist"
       :exist-address="existAddress"
       @close="close3"
       :is-show-custom-address="false"
       @selected="selected"
-      :default-icon="defaultIcon"
-      :selected-icon="selectedIcon"
-      :close-btn-icon="closeBtnIcon"
+      :default-icon="icon.defaultIcon"
+      :selected-icon="icon.selectedIcon"
+      :close-btn-icon="icon.closeBtnIcon"
     >
       <template #unselected-icon>
         <Heart1 style="margin-right: 8px"></Heart1>
@@ -87,17 +87,17 @@
     </nut-address>
 
     <h2>自定义地址与已有地址切换</h2>
-    <nut-cell title="选择地址" :desc="four" is-link @click="showAddressOther"></nut-cell>
+    <nut-cell title="选择地址" :desc="text.four" is-link @click="showAddressOther"></nut-cell>
 
     <nut-address
-      v-model:visible="other"
+      v-model:visible="showPopup.other"
       type="exist"
       :exist-address="existAddress"
-      :province="province"
-      :city="city"
-      :country="country"
-      :town="town"
-      :back-btn-icon="backBtnIcon"
+      :province="address.province"
+      :city="address.city"
+      :country="address.country"
+      :town="address.town"
+      :back-btn-icon="icon.backBtnIcon"
       @change="(cal) => onChange(cal, 'other')"
       @close="close4"
       @selected="selected"
@@ -107,11 +107,11 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, ref, toRefs, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-import { HeartFill, Heart1, Close } from '@nutui/icons-vue-taro';
+import { HeartFill, Heart1 } from '@nutui/icons-vue-taro';
 interface CalBack {
   next: string;
   value: string;
@@ -142,220 +142,186 @@ interface AddressResult extends AddressList {
   country: RegionData[];
   town: RegionData[];
 }
-export default defineComponent({
-  components: { Header, HeartFill, Heart1, Close },
-  setup() {
-    const env = Taro.getEnv();
-    const address = reactive({
-      province: [
-        { id: 1, name: '北京', title: 'B' },
-        { id: 2, name: '广西', title: 'G' },
-        { id: 3, name: '江西', title: 'J' },
-        { id: 4, name: '四川', title: 'S' },
-        { id: 5, name: '浙江', title: 'Z' }
-      ],
-      city: [
-        { id: 7, name: '朝阳区', title: 'C' },
-        { id: 8, name: '崇文区', title: 'C' },
-        { id: 9, name: '昌平区', title: 'C' },
-
-        { id: 6, name: '石景山区', title: 'S' },
-        { id: 3, name: '八里庄街道', title: 'B' },
-        { id: 10, name: '北苑', title: 'B' }
-      ],
-      country: [
-        { id: 3, name: '八里庄街道', title: 'B' },
-        { id: 9, name: '北苑', title: 'B' },
-        { id: 4, name: '常营乡', title: 'C' }
-      ],
-      town: []
-    });
-
-    const placeholder = ref(['请选择省', '请选择市', '请选择县']);
-    const value = ref([1, 7, 3]);
-    const value2 = ref([1, 7, 3]);
-
-    const showPopup = reactive({
-      normal: false,
-      normal2: false,
-      exist: false,
-      customImg: false,
-      other: false,
-      select: false
-    });
-
-    const icon = reactive({
-      selectedIcon: 'heart-fill',
-      defaultIcon: 'heart1',
-      closeBtnIcon: 'close',
-      backBtnIcon: 'left'
-    });
-
-    const existAddress = ref([
-      {
-        id: 1,
-        addressDetail: '',
-        cityName: '次渠镇',
-        countyName: '通州区',
-        provinceName: '北京市',
-        selectedAddress: true,
-        townName: '',
-        name: '探探鱼',
-        phone: '182****1718'
-      },
-      {
-        id: 2,
-        addressDetail: '',
-        cityName: '钓鱼岛全区',
-        countyName: '',
-        provinceName: '钓鱼岛',
-        selectedAddress: false,
-        townName: '',
-        name: '探探鱼',
-        phone: '182****1718'
-      },
-      {
-        id: 3,
-        addressDetail: '京东大厦',
-        cityName: '大兴区',
-        countyName: '科创十一街18号院',
-        provinceName: '北京市',
-        selectedAddress: false,
-        townName: '',
-        name: '探探鱼',
-        phone: '182****1718'
-      }
-    ]);
-
-    const text = reactive({
-      one: '请选择地址',
-      two: '请选择地址',
-      three: '请选择地址',
-      four: '请选择地址',
-      five: '请选择地址',
-      six: '请选择地址'
-    });
-
-    const showAddress = () => {
-      showPopup.normal = !showPopup.normal;
-    };
-
-    const showAddress2 = () => {
-      showPopup.normal2 = !showPopup.normal2;
-    };
-
-    const showSelected = () => {
-      showPopup.select = !showPopup.select;
-    };
-
-    const onChange = (cal: CalBack, tag: string) => {
-      const name = (address as any)[cal.next];
-      if (name?.length < 1) {
-        (showPopup as any)[tag] = false;
-      }
-    };
-    const close1 = (val: CalResult) => {
-      console.log(val);
-      text.one = val.data.addressStr;
-    };
-
-    const close5 = (val: CalResult) => {
-      text.five = val.data.addressStr;
-      value2.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-    };
-
-    const close6 = (val: CalResult) => {
-      text.six = val.data.addressStr;
-      value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-    };
-
-    const showAddressExist = () => {
-      showPopup.exist = true;
-    };
-
-    const close2 = (val: CalResult) => {
-      console.log(val);
-      if (val.type == 'exist') {
-        const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-        text.two = provinceName + cityName + countyName + townName + addressDetail;
-      } else {
-        text.two = val.data.addressStr;
-      }
-    };
-    const selected = (prevExistAdd: AddressList, nowExistAdd: RegionData, arr: AddressList[]) => {
-      console.log(prevExistAdd);
-      console.log(nowExistAdd);
-    };
-
-    const showAddressOther = () => {
-      showPopup.other = true;
-    };
-    const showCustomImg = () => {
-      showPopup.customImg = true;
-    };
-
-    const close3 = (val: CalResult) => {
-      console.log(val);
-      if (val.type == 'exist') {
-        const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-        text.three = provinceName + cityName + countyName + townName + addressDetail;
-      } else {
-        text.three = val.data.addressStr;
-      }
-    };
-
-    const close4 = (val: CalResult) => {
-      console.log(val);
-      if (val.type == 'exist') {
-        const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-        text.four = provinceName + cityName + countyName + townName + addressDetail;
-      } else {
-        text.four = val.data.addressStr;
-      }
-    };
-
-    const switchModule = (val: CalResult) => {
-      if (val.type == 'custom') {
-        console.log('点击了“选择其他地址”按钮');
-      } else {
-        console.log('点击了自定义地址左上角的返回按钮');
-      }
-    };
-
-    const closeMask = (val: CalResult) => {
-      console.log('关闭弹层', val);
-    };
-
-    return {
-      value,
-      value2,
-      showAddress,
-      showAddress2,
-      showPopup,
-      onChange,
-      close1,
-      showAddressExist,
-      close2,
-      close5,
-      close6,
-      selected,
-      showSelected,
-      existAddress,
-      showAddressOther,
-      showCustomImg,
-      close3,
-      close4,
-      switchModule,
-      closeMask,
-      placeholder,
-      ...toRefs(icon),
-      ...toRefs(text),
-      ...toRefs(showPopup),
-      ...toRefs(address),
-      env
-    };
+const env = Taro.getEnv();
+const address = reactive({
+  province: [
+    { id: 1, name: '北京', title: 'B' },
+    { id: 2, name: '广西', title: 'G' },
+    { id: 3, name: '江西', title: 'J' },
+    { id: 4, name: '四川', title: 'S' },
+    { id: 5, name: '浙江', title: 'Z' }
+  ],
+  city: [
+    { id: 7, name: '朝阳区', title: 'C' },
+    { id: 8, name: '崇文区', title: 'C' },
+    { id: 9, name: '昌平区', title: 'C' },
+
+    { id: 6, name: '石景山区', title: 'S' },
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 10, name: '北苑', title: 'B' }
+  ],
+  country: [
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 9, name: '北苑', title: 'B' },
+    { id: 4, name: '常营乡', title: 'C' }
+  ],
+  town: []
+});
+
+const placeholder = ref(['请选择省', '请选择市', '请选择县']);
+const value = ref([1, 7, 3]);
+const value2 = ref([1, 7, 3]);
+
+const showPopup = reactive({
+  normal: false,
+  normal2: false,
+  exist: false,
+  customImg: false,
+  other: false,
+  select: false
+});
+
+const icon = reactive({
+  selectedIcon: 'heart-fill',
+  defaultIcon: 'heart1',
+  closeBtnIcon: 'close',
+  backBtnIcon: 'left'
+});
+
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
   }
+]);
+
+const text = reactive({
+  one: '请选择地址',
+  two: '请选择地址',
+  three: '请选择地址',
+  four: '请选择地址',
+  five: '请选择地址',
+  six: '请选择地址'
 });
+
+const showAddress = () => {
+  showPopup.normal = !showPopup.normal;
+};
+
+const showAddress2 = () => {
+  showPopup.normal2 = !showPopup.normal2;
+};
+
+const showSelected = () => {
+  showPopup.select = !showPopup.select;
+};
+
+const onChange = (cal: CalBack, tag: string) => {
+  const name = (address as any)[cal.next];
+  if (name?.length < 1) {
+    (showPopup as any)[tag] = false;
+  }
+};
+const close1 = (val: CalResult) => {
+  console.log(val);
+  text.one = val.data.addressStr;
+};
+
+const close5 = (val: CalResult) => {
+  text.five = val.data.addressStr;
+  value2.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
+
+const close6 = (val: CalResult) => {
+  text.six = val.data.addressStr;
+  value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
+
+const showAddressExist = () => {
+  showPopup.exist = true;
+};
+
+const close2 = (val: CalResult) => {
+  console.log(val);
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.two = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.two = val.data.addressStr;
+  }
+};
+const selected = (prevExistAdd: AddressList, nowExistAdd: RegionData) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
+
+const showAddressOther = () => {
+  showPopup.other = true;
+};
+const showCustomImg = () => {
+  showPopup.customImg = true;
+};
+
+const close3 = (val: CalResult) => {
+  console.log(val);
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.three = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.three = val.data.addressStr;
+  }
+};
+
+const close4 = (val: CalResult) => {
+  console.log(val);
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.four = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.four = val.data.addressStr;
+  }
+};
+
+const switchModule = (val: CalResult) => {
+  if (val.type == 'custom') {
+    console.log('点击了“选择其他地址”按钮');
+  } else {
+    console.log('点击了自定义地址左上角的返回按钮');
+  }
+};
+
+const closeMask = (val: CalResult) => {
+  console.log('关闭弹层', val);
+};
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/business/pages/addresslist/index.vue b/packages/nutui-taro-demo/src/business/pages/addresslist/index.vue
index 2827918261..dbd5f49d01 100644
--- a/packages/nutui-taro-demo/src/business/pages/addresslist/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/addresslist/index.vue
@@ -41,73 +41,54 @@
   </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';
-
-export default {
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const data = ref([
-      {
-        testid: 3,
-        testaddressName: '姓名',
-        phone: '123****4567',
-        defaultAddress: false,
-        fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-      },
-      {
-        testid: 4,
-        testaddressName: '姓名',
-        phone: '123****4567',
-        defaultAddress: true,
-        fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-      }
-    ]);
-    const dataOptions = reactive({
-      id: 'testid',
-      addressDetail: 'testaddressDetail',
-      addressName: 'testaddressName'
-    });
-    const clickItem = () => {
-      console.log('Click To Address');
-    };
-    const delClick = () => {
-      console.log('Click To Delete');
-    };
-    const editClick = () => {
-      console.log('Click To Edit');
-    };
-    const copyClick = () => {
-      console.log('Click To Copy');
-    };
-    const setClick = () => {
-      console.log('Click On Settings');
-    };
-    const delClickLong = () => {
-      console.log('Click On DelClickLong');
-    };
-    const delClickSwipe = () => {
-      console.log('Click On DelClickSwipe');
-    };
-    const addAddress = () => {
-      console.log('Click To Add');
-    };
-    return {
-      clickItem,
-      data,
-      delClick,
-      editClick,
-      copyClick,
-      setClick,
-      delClickLong,
-      delClickSwipe,
-      addAddress,
-      dataOptions,
-      env
-    };
+const env = Taro.getEnv();
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
   }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
+const copyClick = () => {
+  console.log('Click To Copy');
+};
+const setClick = () => {
+  console.log('Click On Settings');
+};
+const delClickLong = () => {
+  console.log('Click On DelClickLong');
+};
+const delClickSwipe = () => {
+  console.log('Click On DelClickSwipe');
+};
+const addAddress = () => {
+  console.log('Click To Add');
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/business/pages/barrage/index.vue b/packages/nutui-taro-demo/src/business/pages/barrage/index.vue
index 6d59b1101b..dd4ad89e31 100644
--- a/packages/nutui-taro-demo/src/business/pages/barrage/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/barrage/index.vue
@@ -11,30 +11,17 @@
   </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 {
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const inputVal = ref<any>('');
-    const danmu = ref<any>(null);
-    let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']);
-    function addDanmu() {
-      let n = Math.random();
-      danmu.value.add('随机——' + String(n).substr(2, 10));
-    }
-    return {
-      inputVal,
-      danmu,
-      list,
-      addDanmu,
-      env
-    };
-  }
-};
+const env = Taro.getEnv();
+const danmu = ref<any>(null);
+let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']);
+function addDanmu() {
+  let n = Math.random();
+  danmu.value.add('随机——' + String(n).substr(2, 10));
+}
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/business/pages/category/index.vue b/packages/nutui-taro-demo/src/business/pages/category/index.vue
index 38a9e279f7..1821b7799e 100644
--- a/packages/nutui-taro-demo/src/business/pages/category/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/category/index.vue
@@ -2,13 +2,13 @@
   <div class="demo full category-demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>经典分类模式</h2>
-    <nut-category :category="category" @change="change">
-      <nut-category-pane :categoryChild="categoryChild1" @onChange="onChange"> </nut-category-pane>
+    <nut-category :category="data.category" @change="change">
+      <nut-category-pane :categoryChild="data.categoryChild1" @onChange="onChange"> </nut-category-pane>
     </nut-category>
 
     <h2>只显示文字</h2>
-    <nut-category :category="category" @change="changeText">
-      <nut-category-pane type="text" :categoryChild="categoryChild2" @onChange="onChange"> </nut-category-pane
+    <nut-category :category="data.category" @change="changeText">
+      <nut-category-pane type="text" :categoryChild="data.categoryChild2" @onChange="onChange"> </nut-category-pane
     ></nut-category>
 
     <h2>自定义分类</h2>
@@ -18,57 +18,43 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { categoryInfo, categoryChild, customCategory } from './data';
-import { reactive, toRefs, onMounted } from 'vue';
+import { reactive, onMounted } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 
-export default {
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const data = reactive({
-      category: [{}],
-      categoryChild1: [{}],
-      customCategory: [{}],
-      categoryChild2: [{}]
-    });
+const env = Taro.getEnv();
+const data = reactive({
+  category: [{}],
+  categoryChild1: [{}],
+  customCategory: [{}],
+  categoryChild2: [{}]
+});
 
-    onMounted(() => {
-      setTimeout(() => {
-        data.category = categoryInfo.category;
-        data.categoryChild1 = categoryChild;
-        data.customCategory = customCategory;
-        data.categoryChild2 = categoryChild;
-      }, 500);
-    });
+onMounted(() => {
+  setTimeout(() => {
+    data.category = categoryInfo.category;
+    data.categoryChild1 = categoryChild;
+    data.customCategory = customCategory;
+    data.categoryChild2 = categoryChild;
+  }, 500);
+});
 
-    const change = (index: any) => {
-      data.categoryChild1 = [].concat(data.category[index]?.children as any);
-    };
-
-    const changeText = (index: any) => {
-      data.categoryChild2 = [].concat(data.category[index]?.children as any);
-    };
+const change = (index: any) => {
+  data.categoryChild1 = [].concat(data.category[index]?.children as any);
+};
 
-    const changeCustom = () => {
-      console.log('点击分类数据');
-    };
+const changeText = (index: any) => {
+  data.categoryChild2 = [].concat(data.category[index]?.children as any);
+};
 
-    const onChange = () => {
-      console.log('当前分类数据');
-    };
+const changeCustom = () => {
+  console.log('点击分类数据');
+};
 
-    return {
-      change,
-      onChange,
-      changeText,
-      changeCustom,
-      ...toRefs(data),
-      env
-    };
-  }
+const onChange = () => {
+  console.log('当前分类数据');
 };
 </script>
 
diff --git a/packages/nutui-taro-demo/src/business/pages/comment/index.vue b/packages/nutui-taro-demo/src/business/pages/comment/index.vue
index eb29df7dea..8fefb810e0 100644
--- a/packages/nutui-taro-demo/src/business/pages/comment/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/comment/index.vue
@@ -62,46 +62,34 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default defineComponent({
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    let cmt = ref({});
+const env = Taro.getEnv();
+let cmt = ref({});
 
-    const handleclick = (info: any) => {
-      console.log('进行跳转', info);
-    };
+const handleclick = (info: any) => {
+  console.log('进行跳转', info);
+};
 
-    onMounted(() => {
-      getData();
-    });
-
-    const getData = () => {
-      Taro.request({
-        method: 'GET',
-        url: 'https://storage.360buyimg.com/nutui/3x/comment_data.json',
-        success: (res) => {
-          res.data.Comment.info.avatar =
-            'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png';
-          cmt.value = res.data.Comment;
-        }
-      });
-    };
+onMounted(() => {
+  getData();
+});
 
-    const clickImages = (imgs: any) => {
-      console.log('进行图片展示', imgs);
-    };
+const getData = () => {
+  Taro.request({
+    method: 'GET',
+    url: 'https://storage.360buyimg.com/nutui/3x/comment_data.json',
+    success: (res) => {
+      res.data.Comment.info.avatar =
+        'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png';
+      cmt.value = res.data.Comment;
+    }
+  });
+};
 
-    return {
-      cmt,
-      handleclick,
-      clickImages,
-      env
-    };
-  }
-});
+const clickImages = (imgs: any) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
diff --git a/packages/nutui-taro-demo/src/business/pages/ecard/index.vue b/packages/nutui-taro-demo/src/business/pages/ecard/index.vue
index bc6bd32416..699fb48843 100644
--- a/packages/nutui-taro-demo/src/business/pages/ecard/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/ecard/index.vue
@@ -13,47 +13,34 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, ref } from 'vue';
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default defineComponent({
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const dataList = reactive([
-      {
-        price: 10
-      },
-      {
-        price: 20
-      },
-      {
-        price: 30
-      },
-      {
-        price: 40
-      }
-    ]);
-    const money = ref(0);
-    const inputChange = (val: number) => {
-      money.value = val;
-    };
-    const change = (item: { price: number }) => {
-      money.value = item.price;
-    };
-    const changeStep = (num: number, price: number) => {
-      const val = price * num;
-      money.value = val;
-    };
-    return {
-      dataList,
-      inputChange,
-      change,
-      money,
-      changeStep,
-      env
-    };
+const env = Taro.getEnv();
+const dataList = reactive([
+  {
+    price: 10
+  },
+  {
+    price: 20
+  },
+  {
+    price: 30
+  },
+  {
+    price: 40
   }
-});
+]);
+const money = ref(0);
+const inputChange = (val: number) => {
+  money.value = val;
+};
+const change = (item: { price: number }) => {
+  money.value = item.price;
+};
+const changeStep = (num: number, price: number) => {
+  const val = price * num;
+  money.value = val;
+};
 </script>
diff --git a/packages/nutui-taro-demo/src/business/pages/invoice/index.vue b/packages/nutui-taro-demo/src/business/pages/invoice/index.vue
index 84172707e8..da948387dc 100644
--- a/packages/nutui-taro-demo/src/business/pages/invoice/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/invoice/index.vue
@@ -6,109 +6,93 @@
   </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';
+const env = Taro.getEnv();
+const formValue = reactive({
+  type: '企业',
+  name: '',
+  num: '',
+  adress: '',
+  tel: '',
+  address: '',
+  bank: '',
+  account: ''
+});
 
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const formValue = reactive({
-      type: '企业',
-      name: '',
-      num: '',
-      adress: '',
-      tel: '',
-      address: '',
-      bank: '',
-      account: ''
-    });
-
-    // Promise 异步校验
-    const asyncValidator = (val: string) => {
-      return new Promise((resolve) => {
-        console.log('模拟异步验证中...');
-        setTimeout(() => {
-          resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
-        }, 1000);
-      });
-    };
+// Promise 异步校验
+const asyncValidator = (val: string) => {
+  return new Promise((resolve) => {
+    console.log('模拟异步验证中...');
+    setTimeout(() => {
+      resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
+    }, 1000);
+  });
+};
 
-    let data: any = ref([
-      {
-        type: 'radio',
-        label: '发票类型',
-        radioLabel: [
-          {
-            label: '企业'
-          },
-          {
-            label: '个人或事业单位'
-          }
-        ],
-        formItemProp: 'type',
-        required: true
-      },
-      {
-        label: '发票抬头',
-        placeholder: '请输入发票抬头',
-        formItemProp: 'name',
-        required: true
-      },
-      {
-        label: '纳税人识别号',
-        placeholder: '请输入纳税人识别号',
-        formItemProp: 'num',
-        rules: [{ message: '请输入纳税人识别号' }]
-      },
-      {
-        label: '注册地址',
-        placeholder: '请输入注册地址',
-        formItemProp: 'adress',
-        rules: [{ required: true, message: '请输入地址' }],
-        required: true
-      },
+let data: any = ref([
+  {
+    type: 'radio',
+    label: '发票类型',
+    radioLabel: [
       {
-        label: '注册电话',
-        placeholder: '请输入注册电话',
-        formItemProp: 'tel',
-        rules: [
-          { required: true, message: '请输入联系电话' },
-          { validator: asyncValidator, message: '电话格式不正确' }
-        ],
-        required: true
+        label: '企业'
       },
       {
-        label: '开户行',
-        placeholder: '请输入开户行',
-        formItemProp: 'bank'
-      },
-      {
-        label: '银行账户',
-        placeholder: '请输入银行账户',
-        formItemProp: 'account'
-      }
-    ]);
-
-    const submit = (valid: boolean, errors: []) => {
-      if (valid) {
-        console.log('success', formValue);
-      } else {
-        console.log('error submit!!', errors);
+        label: '个人或事业单位'
       }
-    };
+    ],
+    formItemProp: 'type',
+    required: true
+  },
+  {
+    label: '发票抬头',
+    placeholder: '请输入发票抬头',
+    formItemProp: 'name',
+    required: true
+  },
+  {
+    label: '纳税人识别号',
+    placeholder: '请输入纳税人识别号',
+    formItemProp: 'num',
+    rules: [{ message: '请输入纳税人识别号' }]
+  },
+  {
+    label: '注册地址',
+    placeholder: '请输入注册地址',
+    formItemProp: 'adress',
+    rules: [{ required: true, message: '请输入地址' }],
+    required: true
+  },
+  {
+    label: '注册电话',
+    placeholder: '请输入注册电话',
+    formItemProp: 'tel',
+    rules: [
+      { required: true, message: '请输入联系电话' },
+      { validator: asyncValidator, message: '电话格式不正确' }
+    ],
+    required: true
+  },
+  {
+    label: '开户行',
+    placeholder: '请输入开户行',
+    formItemProp: 'bank'
+  },
+  {
+    label: '银行账户',
+    placeholder: '请输入银行账户',
+    formItemProp: 'account'
+  }
+]);
 
-    return {
-      data,
-      formValue,
-      submit,
-      asyncValidator,
-      env
-    };
+const submit = (valid: boolean, errors: []) => {
+  if (valid) {
+    console.log('success', formValue);
+  } else {
+    console.log('error submit!!', errors);
   }
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/business/pages/signature/index.vue b/packages/nutui-taro-demo/src/business/pages/signature/index.vue
index 30bfa063f0..fe0283b893 100644
--- a/packages/nutui-taro-demo/src/business/pages/signature/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/signature/index.vue
@@ -7,8 +7,8 @@
 
     <h2>修改颜色和签字粗细</h2>
     <nut-signature
-      :lineWidth="lineWidth"
-      :strokeStyle="strokeStyle"
+      :lineWidth="4"
+      strokeStyle="green"
       @confirm="confirm2"
       @clear="clear2"
       @start="start"
@@ -19,56 +19,45 @@
   </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 },
-  setup() {
-    const env = Taro.getEnv();
-    const demoSignUrl = ref('');
-    const demoSignUrl2 = ref('');
-    const state = reactive({
-      lineWidth: 4,
-      strokeStyle: 'green',
-      testimg: ''
-    });
-    const clear = () => {
-      demoSignUrl.value = '';
-      console.log('清除事件');
-    };
-    const clear2 = () => {
-      demoSignUrl2.value = '';
-      console.log('清除事件');
-    };
-    const confirm = (canvas, data: any) => {
-      if (data === '') {
-        console.log(canvas);
-        return false;
-      }
-      demoSignUrl.value = data;
-      console.log('图片地址', canvas, data);
-    };
-    const confirm2 = (canvas, data: any) => {
-      if (data === '') {
-        console.log(canvas);
-        return false;
-      }
-      demoSignUrl2.value = data;
-      console.log('图片地址', canvas, data);
-    };
-    const start = () => {
-      console.log('签名开始');
-    };
-    const signing = (e) => {
-      console.log('签名进行中', e);
-    };
-    const end = () => {
-      console.log('签名结束');
-    };
-    return { ...state, confirm, clear, start, signing, end, demoSignUrl, demoSignUrl2, confirm2, clear2, env };
+const env = Taro.getEnv();
+const demoSignUrl = ref('');
+const demoSignUrl2 = ref('');
+const clear = () => {
+  demoSignUrl.value = '';
+  console.log('清除事件');
+};
+const clear2 = () => {
+  demoSignUrl2.value = '';
+  console.log('清除事件');
+};
+const confirm = (canvas, data: any) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
+  }
+  demoSignUrl.value = data;
+  console.log('图片地址', canvas, data);
+};
+const confirm2 = (canvas, data: any) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
   }
+  demoSignUrl2.value = data;
+  console.log('图片地址', canvas, data);
+};
+const start = () => {
+  console.log('签名开始');
+};
+const signing = (e) => {
+  console.log('签名进行中', e);
+};
+const end = () => {
+  console.log('签名结束');
 };
 </script>
 
diff --git a/packages/nutui-taro-demo/src/business/pages/sku/index.vue b/packages/nutui-taro-demo/src/business/pages/sku/index.vue
index ceeb7a14d1..b1c8026f77 100644
--- a/packages/nutui-taro-demo/src/business/pages/sku/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/sku/index.vue
@@ -2,30 +2,30 @@
   <div class="demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
-    <nut-cell :title="`基础用法`" desc="" @click="base = true"></nut-cell>
+    <nut-cell :title="`基础用法`" desc="" @click="popup.base = true"></nut-cell>
 
     <h2>不可售</h2>
-    <nut-cell title="不可售" desc="" @click="notSell = true"></nut-cell>
+    <nut-cell title="不可售" desc="" @click="popup.notSell = true"></nut-cell>
 
     <h2>自定义计步器</h2>
-    <nut-cell title="自定义计步器" desc="" @click="customStepper = true"></nut-cell>
+    <nut-cell title="自定义计步器" desc="" @click="popup.customStepper = true"></nut-cell>
 
     <h2>自定义插槽</h2>
-    <nut-cell title="通过插槽自定义设置" desc="" @click="customBySlot = true"></nut-cell>
+    <nut-cell title="通过插槽自定义设置" desc="" @click="popup.customBySlot = true"></nut-cell>
 
     <nut-sku
-      v-model:visible="base"
-      :sku="skuData"
-      :goods="goodsInfo"
+      v-model:visible="popup.base"
+      :sku="data.skuData"
+      :goods="data.goodsInfo"
       @selectSku="selectSku"
       @clickBtnOperate="clickBtnOperate"
       @close="close"
     ></nut-sku>
 
     <nut-sku
-      v-model:visible="notSell"
-      :sku="skuData"
-      :goods="goodsInfo"
+      v-model:visible="popup.notSell"
+      :sku="data.skuData"
+      :goods="data.goodsInfo"
       :btnExtraText="btnExtraText"
       @changeStepper="changeStepper"
       :btnOptions="['buy', 'cart']"
@@ -41,9 +41,9 @@
     </nut-sku>
 
     <nut-sku
-      v-model:visible="customStepper"
-      :sku="skuData"
-      :goods="goodsInfo"
+      v-model:visible="popup.customStepper"
+      :sku="data.skuData"
+      :goods="data.goodsInfo"
       :stepperMax="7"
       :stepperMin="2"
       :stepperExtraText="stepperExtraText"
@@ -56,9 +56,9 @@
     ></nut-sku>
 
     <nut-sku
-      v-model:visible="customBySlot"
-      :sku="skuData"
-      :goods="goodsInfo"
+      v-model:visible="popup.customBySlot"
+      :sku="data.skuData"
+      :goods="data.goodsInfo"
       :btnOptions="['buy', 'cart']"
       @selectSku="selectSku"
       @clickBtnOperate="clickBtnOperate"
@@ -66,13 +66,13 @@
     >
       <template #sku-header-price>
         <div>
-          <nut-price :price="goodsInfo.price" :needSymbol="true" :thousands="false"> </nut-price>
+          <nut-price :price="data.goodsInfo.price" :needSymbol="true" :thousands="false"> </nut-price>
           <span class="tag"></span>
         </div>
       </template>
 
       <template #sku-header-extra>
-        <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{ goodsInfo.skuId }} </span>
+        <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{ data.goodsInfo.skuId }} </span>
       </template>
 
       <template #sku-operate>
@@ -88,14 +88,14 @@
             style="box-shadow: none; padding: 13px 0"
             title="送至"
             :desc="addressDesc"
-            @click="showAddressPopup = true"
+            @click="popup.showAddressPopup = true"
           ></nut-cell>
         </div>
       </template>
     </nut-sku>
 
     <nut-address
-      v-model:visible="showAddressPopup"
+      v-model:visible="popup.showAddressPopup"
       type="exist"
       :exist-address="existAddress"
       @close="close"
@@ -106,8 +106,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, ref, toRefs, onMounted, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue';
 import { Sku, Goods, imagePathMap } from './data';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
@@ -126,160 +126,131 @@ interface SkuItem {
   [key: string]: any;
 }
 
-interface GoodsProps {
-  skuId: string | number;
-  price: string; // 商品信息展示区，商品价格
-  imagePath?: string;
-  [key: string]: any;
-}
-
 interface Data {
   skuData: Skus[];
   goodsInfo: any;
   imagePathMap: any;
 }
+const env = Taro.getEnv();
+const popup = reactive({
+  base: false,
+  notSell: false,
+  customStepper: false,
+  customBySlot: false,
+
+  showAddressPopup: false
+});
 
-export default defineComponent({
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const popup = reactive({
-      base: false,
-      notSell: false,
-      customStepper: false,
-      customBySlot: false,
-
-      showAddressPopup: false
-    });
-
-    const data = reactive<Data>({
-      skuData: [],
-      goodsInfo: {},
-      imagePathMap: {}
-    });
-
-    const stepperExtraText = () => {
-      return `<view style="width:100%;text-align:right;color:#F00">2 件起售</view>`;
-    };
-
-    const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
-    const addressDesc = ref('(配送地会影响库存，请先确认)');
-    const existAddress = ref([
-      {
-        id: 1,
-        addressDetail: 'th ',
-        cityName: '石景山区',
-        countyName: '城区',
-        provinceName: '北京',
-        selectedAddress: true,
-        townName: ''
-      },
-      {
-        id: 2,
-        addressDetail: '12_ ',
-        cityName: '电饭锅',
-        countyName: '扶绥县',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      },
-      {
-        id: 3,
-        addressDetail: '发大水比 ',
-        cityName: '放到',
-        countyName: '广宁街道',
-        provinceName: '钓鱼岛全区',
-        selectedAddress: false,
-        townName: ''
-      },
-      {
-        id: 4,
-        addressDetail: '还是想吧百度吧 ',
-        cityName: '研发',
-        countyName: '八里庄街道',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      }
-    ]);
-    onMounted(() => {
-      getData();
-    });
-
-    const getData = () => {
-      setTimeout(() => {
-        data.skuData = Sku;
-        data.goodsInfo = Goods;
-        data.imagePathMap = imagePathMap;
-
-        console.log(Goods);
-      }, 500);
-    };
-    const selectSku = (s: any) => {
-      const { sku, parentIndex } = s;
-
-      if (sku.disable) return false;
-
-      data.skuData[parentIndex].list.forEach((s) => {
-        s.active = s.id == sku.id;
-      });
-
-      data.goodsInfo = {
-        skuId: sku.id,
-        price: '4599.00' // 商品信息展示区，商品价格
-      };
-
-      data.skuData[0].list.forEach((el) => {
-        if (el.active && !el.disable) {
-          data.goodsInfo.imagePath = data.imagePathMap[el.id];
-        }
-      });
-    };
-
-    // stepper 更改
-    const changeStepper = (count: number) => {
-      console.log('购买数量', count);
-    };
-
-    // stepper 极限值
-    const overLimit = (val: any) => {
-      if (val.action == 'reduce') {
-        console.log(`至少买${val.value}件哦`);
-      } else {
-        console.log(`最多买${val.value}件哦`);
-      }
-    };
-
-    const clickBtnOperate = (op: string) => {
-      console.log('点击了操作按钮', op);
-    };
-    // 关闭弹框
-    const close = () => {
-      console.log('选择弹框关闭');
-    };
-
-    const selectedAddress = (prevExistAdd: any, nowExistAdd: any) => {
-      const { provinceName, countyName, cityName } = nowExistAdd;
-      addressDesc.value = `${provinceName}${countyName}${cityName}`;
-    };
-
-    return {
-      selectSku,
-      changeStepper,
-      clickBtnOperate,
-      close,
-      existAddress,
-      selectedAddress,
-      addressDesc,
-      stepperExtraText,
-      btnExtraText,
-      overLimit,
-      ...toRefs(popup),
-      ...toRefs(data),
-      env
-    };
+const data = reactive<Data>({
+  skuData: [],
+  goodsInfo: {},
+  imagePathMap: {}
+});
+
+const stepperExtraText = () => {
+  return `<view style="width:100%;text-align:right;color:#F00">2 件起售</view>`;
+};
+
+const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
+const addressDesc = ref('(配送地会影响库存，请先确认)');
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: 'th ',
+    cityName: '石景山区',
+    countyName: '城区',
+    provinceName: '北京',
+    selectedAddress: true,
+    townName: ''
+  },
+  {
+    id: 2,
+    addressDetail: '12_ ',
+    cityName: '电饭锅',
+    countyName: '扶绥县',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 3,
+    addressDetail: '发大水比 ',
+    cityName: '放到',
+    countyName: '广宁街道',
+    provinceName: '钓鱼岛全区',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 4,
+    addressDetail: '还是想吧百度吧 ',
+    cityName: '研发',
+    countyName: '八里庄街道',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
   }
+]);
+onMounted(() => {
+  getData();
 });
+
+const getData = () => {
+  setTimeout(() => {
+    data.skuData = Sku;
+    data.goodsInfo = Goods;
+    data.imagePathMap = imagePathMap;
+
+    console.log(Goods);
+  }, 500);
+};
+const selectSku = (s: any) => {
+  const { sku, parentIndex } = s;
+
+  if (sku.disable) return false;
+
+  data.skuData[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+
+  data.goodsInfo = {
+    skuId: sku.id,
+    price: '4599.00' // 商品信息展示区，商品价格
+  };
+
+  data.skuData[0].list.forEach((el) => {
+    if (el.active && !el.disable) {
+      data.goodsInfo.imagePath = data.imagePathMap[el.id];
+    }
+  });
+};
+
+// stepper 更改
+const changeStepper = (count: number) => {
+  console.log('购买数量', count);
+};
+
+// stepper 极限值
+const overLimit = (val: any) => {
+  if (val.action == 'reduce') {
+    console.log(`至少买${val.value}件哦`);
+  } else {
+    console.log(`最多买${val.value}件哦`);
+  }
+};
+
+const clickBtnOperate = (op: string) => {
+  console.log('点击了操作按钮', op);
+};
+// 关闭弹框
+const close = () => {
+  console.log('选择弹框关闭');
+};
+
+const selectedAddress = (_prevExistAdd: any, nowExistAdd: any) => {
+  const { provinceName, countyName, cityName } = nowExistAdd;
+  addressDesc.value = `${provinceName}${countyName}${cityName}`;
+};
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/business/pages/timeselect/index.vue b/packages/nutui-taro-demo/src/business/pages/timeselect/index.vue
index e1c5981a53..a253437a35 100644
--- a/packages/nutui-taro-demo/src/business/pages/timeselect/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/timeselect/index.vue
@@ -6,10 +6,10 @@
       <span><label>请选择配送时间</label></span>
     </nut-cell>
     <nut-time-select
-      v-model:visible="visible1"
+      v-model:visible="state.visible1"
       height="50%"
-      :current-key="currentKey1"
-      :current-time="currentTime1"
+      :current-key="state.currentKey1"
+      :current-time="state.currentTime1"
       @select="handleSelected1"
     >
       <template #pannel>
@@ -17,7 +17,7 @@
         <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
+        <nut-time-detail :times="state.times1" @select="selectTime1"></nut-time-detail>
       </template>
     </nut-time-select>
     <h2>可选择多个日期时间</h2>
@@ -25,10 +25,10 @@
       <span><label>请选择配送时间</label></span>
     </nut-cell>
     <nut-time-select
-      v-model:visible="visible2"
+      v-model:visible="state.visible2"
       height="50%"
-      :current-key="currentKey2"
-      :current-time="currentTime2"
+      :current-key="state.currentKey2"
+      :current-time="state.currentTime2"
       @select="handleSelected2"
     >
       <template #pannel>
@@ -36,7 +36,7 @@
         <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+        <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
       </template>
     </nut-time-select>
     <h2>更改标题</h2>
@@ -44,10 +44,10 @@
       <span><label>请选择配送时间</label></span>
     </nut-cell>
     <nut-time-select
-      v-model:visible="visible3"
+      v-model:visible="state.visible3"
       height="50%"
-      :current-key="currentKey2"
-      :current-time="currentTime2"
+      :current-key="state.currentKey2"
+      :current-time="state.currentTime2"
       @select="handleSelected2"
     >
       <template #title>
@@ -61,151 +61,134 @@
         <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+        <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
       </template>
     </nut-time-select>
-    <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
+    <nut-toast
+      :msg="toastState.msg"
+      v-model:visible="toastState.show"
+      :type="toastState.type"
+      :cover="toastState.cover"
+    />
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default defineComponent({
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const state = reactive({
-      visible1: false,
-      currentKey1: 0,
-      currentTime1: [] as any[],
-      times1: [
-        {
-          key: 0,
-          list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-        },
-        {
-          key: 1,
-          list: ['9:00-10:00', '10:00-11:00']
-        }
-      ],
-      visible2: false,
-      currentKey2: 0,
-      currentTime2: [] as any[],
-      times2: [
-        {
-          key: 0,
-          list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-        },
-        {
-          key: 1,
-          list: ['9:00-10:00', '10:00-11:00']
-        }
-      ],
-      visible3: false
-    });
-
-    const toastState = reactive({
-      msg: 'toast',
-      type: 'text',
-      show: false,
-      cover: false
-    });
+const env = Taro.getEnv();
+const state = reactive({
+  visible1: false,
+  currentKey1: 0,
+  currentTime1: [] as any[],
+  times1: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
+    }
+  ],
+  visible2: false,
+  currentKey2: 0,
+  currentTime2: [] as any[],
+  times2: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
+    }
+  ],
+  visible3: false
+});
 
-    const handleChange1 = (pannelKey: number) => {
-      state.currentKey1 = pannelKey;
-      state.currentTime1 = [];
-      state.currentTime1.push({
-        key: state.currentKey1,
-        list: []
-      });
-    };
+const toastState = reactive({
+  msg: 'toast',
+  type: 'text',
+  show: false,
+  cover: false
+});
 
-    const handleClick1 = () => {
-      state.visible1 = true;
-    };
+const handleChange1 = (pannelKey: number) => {
+  state.currentKey1 = pannelKey;
+  state.currentTime1 = [];
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
+  });
+};
 
-    const selectTime1 = (item: string) => {
-      let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
-      if (curTimeIndex === -1) {
-        state.currentTime1[0]['list'].push(item);
-      } else {
-        state.currentTime1[0]['list'].splice(curTimeIndex, 1);
-      }
-    };
+const handleClick1 = () => {
+  state.visible1 = true;
+};
 
-    const handleSelected1 = (obj: any) => {
-      toastState.show = true;
-      toastState.msg = JSON.stringify(obj);
-      toastState.type = 'text';
-      toastState.cover = false;
-    };
+const selectTime1 = (item: string) => {
+  let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime1[0]['list'].push(item);
+  } else {
+    state.currentTime1[0]['list'].splice(curTimeIndex, 1);
+  }
+};
 
-    const handleChange2 = (pannelKey: number) => {
-      state.currentKey2 = pannelKey;
-      let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
-      if (!curTime) {
-        state.currentTime2.push({
-          key: pannelKey,
-          list: []
-        });
-      }
-    };
+const handleSelected1 = (obj: any) => {
+  toastState.show = true;
+  toastState.msg = JSON.stringify(obj);
+  toastState.type = 'text';
+  toastState.cover = false;
+};
 
-    const handleClick2 = () => {
-      state.visible2 = true;
-    };
+const handleChange2 = (pannelKey: number) => {
+  state.currentKey2 = pannelKey;
+  let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
+  if (!curTime) {
+    state.currentTime2.push({
+      key: pannelKey,
+      list: []
+    });
+  }
+};
 
-    const selectTime2 = (item: string) => {
-      let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
-      let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
-      if (curTimeIndex === -1) {
-        state.currentTime2[findIndex]['list'].push(item);
-      } else {
-        state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
-      }
-    };
+const handleClick2 = () => {
+  state.visible2 = true;
+};
 
-    const handleSelected2 = (obj: any) => {
-      toastState.show = true;
-      toastState.msg = JSON.stringify(obj);
-      toastState.type = 'text';
-      toastState.cover = false;
-    };
+const selectTime2 = (item: string) => {
+  let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
+  let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime2[findIndex]['list'].push(item);
+  } else {
+    state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
+  }
+};
 
-    const handleClick3 = () => {
-      state.visible3 = true;
-    };
+const handleSelected2 = (obj: any) => {
+  toastState.show = true;
+  toastState.msg = JSON.stringify(obj);
+  toastState.type = 'text';
+  toastState.cover = false;
+};
 
-    onMounted(() => {
-      state.currentTime1.push({
-        key: state.currentKey1,
-        list: []
-      });
-      state.currentTime2.push({
-        key: state.currentKey2,
-        list: []
-      });
-    });
+const handleClick3 = () => {
+  state.visible3 = true;
+};
 
-    return {
-      ...toRefs(state),
-      ...toRefs(toastState),
-      handleChange1,
-      handleSelected1,
-      selectTime1,
-      handleClick1,
-      handleChange2,
-      handleSelected2,
-      selectTime2,
-      handleClick2,
-      handleClick3,
-      env
-    };
-  }
+onMounted(() => {
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
+  });
+  state.currentTime2.push({
+    key: state.currentKey2,
+    list: []
+  });
 });
 </script>
 
diff --git a/src/packages/__VUE/address/demo.vue b/src/packages/__VUE/address/demo.vue
index 5f4d409a20..16b6cb0df5 100644
--- a/src/packages/__VUE/address/demo.vue
+++ b/src/packages/__VUE/address/demo.vue
@@ -1,54 +1,54 @@
 <template>
   <div class="demo">
     <h2>{{ translate('customAddress') }}</h2>
-    <nut-cell :title="translate('title')" :desc="one" is-link @click="showAddress"></nut-cell>
+    <nut-cell :title="translate('title')" :desc="text.one" is-link @click="showAddress"></nut-cell>
 
     <nut-address
-      v-model:visible="normal"
-      :province="province"
-      :city="city"
-      :country="country"
-      :town="town"
+      v-model:visible="showPopup.normal"
+      :province="address.province"
+      :city="address.city"
+      :country="address.country"
+      :town="address.town"
       @change="(cal) => onChange(cal, 'normal')"
       @close="close1"
     ></nut-address>
 
     <h2>{{ translate('selectCity') }}</h2>
-    <nut-cell :title="translate('title')" :desc="six" is-link @click="showSelected"></nut-cell>
+    <nut-cell :title="translate('title')" :desc="text.six" is-link @click="showSelected"></nut-cell>
 
     <nut-address
       v-model="value"
-      v-model:visible="select"
-      :province="province"
-      :city="city"
-      :country="country"
-      :town="town"
+      v-model:visible="showPopup.select"
+      :province="address.province"
+      :city="address.city"
+      :country="address.country"
+      :town="address.town"
       :columns-placeholder="placeholder"
       @change="(cal) => onChange(cal, 'select')"
       @close="close6"
     ></nut-address>
 
     <h2>{{ translate('customAddress2') }}</h2>
-    <nut-cell :title="translate('title')" :desc="five" is-link @click="showAddress2"></nut-cell>
+    <nut-cell :title="translate('title')" :desc="text.five" is-link @click="showAddress2"></nut-cell>
 
     <nut-address
       v-model="value2"
-      v-model:visible="normal2"
+      v-model:visible="showPopup.normal2"
       type="custom2"
-      :province="province"
-      :city="city"
-      :country="country"
-      :town="town"
+      :province="address.province"
+      :city="address.city"
+      :country="address.country"
+      :town="address.town"
       height="270px"
       @change="(cal) => onChange(cal, 'normal2')"
       @close="close5"
     ></nut-address>
 
     <h2>{{ translate('existAddress') }}</h2>
-    <nut-cell :title="translate('title')" :desc="two" is-link @click="showAddressExist"></nut-cell>
+    <nut-cell :title="translate('title')" :desc="text.two" is-link @click="showAddressExist"></nut-cell>
 
     <nut-address
-      v-model:visible="exist"
+      v-model:visible="showPopup.exist"
       type="exist"
       :exist-address="existAddress"
       :is-show-custom-address="false"
@@ -57,10 +57,10 @@
     ></nut-address>
 
     <h2>{{ translate('icon') }}</h2>
-    <nut-cell :title="translate('title')" :desc="three" is-link @click="showCustomImg"></nut-cell>
+    <nut-cell :title="translate('title')" :desc="text.three" is-link @click="showCustomImg"></nut-cell>
 
     <nut-address
-      v-model:visible="customImg"
+      v-model:visible="showPopup.customImg"
       type="exist"
       :exist-address="existAddress"
       :is-show-custom-address="false"
@@ -81,16 +81,16 @@
     </nut-address>
 
     <h2>{{ translate('change') }}</h2>
-    <nut-cell :title="translate('title')" :desc="four" is-link @click="showAddressOther"></nut-cell>
+    <nut-cell :title="translate('title')" :desc="text.four" is-link @click="showAddressOther"></nut-cell>
 
     <nut-address
-      v-model:visible="other"
+      v-model:visible="showPopup.other"
       type="exist"
       :exist-address="existAddress"
-      :province="province"
-      :city="city"
-      :country="country"
-      :town="town"
+      :province="address.province"
+      :city="address.city"
+      :country="address.country"
+      :town="address.town"
       @change="(cal) => onChange(cal, 'other')"
       @close="close4"
       @selected="selected"
@@ -100,38 +100,36 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { onMounted, reactive, ref, toRefs, defineComponent } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const { translate } = createComponent('address');
 import { HeartFill, Heart1 } from '@nutui/icons-vue';
-
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title: '选择地址',
-      customAddress: '选择自定义地址',
-      selectCity: '选中省市区',
-      customAddress2: '选择自定义地址2',
-      existAddress: '选择已有地址',
-      icon: '自定义图标',
-      change: '自定义地址与已有地址切换',
-      textAddress: '北京朝阳区八里庄街道'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title: 'Choose Address',
-      customAddress: 'Choose Custom Address',
-      selectCity: 'Choose City',
-      customAddress2: 'Choose Custom Address2',
-      existAddress: 'Choose Exist Address',
-      icon: 'Custom Icon',
-      change: 'Custom Or Exist',
-      textAddress: 'Balizhuang Street, Chaoyang District, Beijing'
-    }
-  });
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title: '选择地址',
+    customAddress: '选择自定义地址',
+    selectCity: '选中省市区',
+    customAddress2: '选择自定义地址2',
+    existAddress: '选择已有地址',
+    icon: '自定义图标',
+    change: '自定义地址与已有地址切换',
+    textAddress: '北京朝阳区八里庄街道'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title: 'Choose Address',
+    customAddress: 'Choose Custom Address',
+    selectCity: 'Choose City',
+    customAddress2: 'Choose Custom Address2',
+    existAddress: 'Choose Exist Address',
+    icon: 'Custom Icon',
+    change: 'Custom Or Exist',
+    textAddress: 'Balizhuang Street, Chaoyang District, Beijing'
+  }
+});
 
 interface CalBack {
   next: string;
@@ -163,226 +161,183 @@ interface AddressResult extends AddressList {
   country: RegionData[];
   town: RegionData[];
 }
-export default defineComponent({
-  components: { HeartFill, Heart1 },
-  props: {},
-  setup() {
-    initTranslate();
-    const address = reactive({
-      province: [],
-      city: [
-        { id: 7, name: '朝阳区', title: 'C' },
-        { id: 8, name: '崇文区', title: 'C' },
-        { id: 9, name: '昌平区', title: 'C' },
-        { id: 6, name: '石景山区', title: 'S' },
-        { id: 3, name: '八里庄街道', title: 'B' },
-        { id: 10, name: '北苑', title: 'B' }
-      ],
-      country: [
-        { id: 3, name: '八里庄街道', title: 'B' },
-        { id: 9, name: '北苑', title: 'B' },
-        { id: 4, name: '常营乡', title: 'C' }
-      ],
-      town: []
-    });
-
-    onMounted(() => {
-      setTimeout(() => {
-        address.province = [
-          { id: 1, name: '北京', title: 'B' },
-          { id: 2, name: '广西', title: 'G' },
-          { id: 3, name: '江西', title: 'J' },
-          { id: 4, name: '四川', title: 'S' },
-          { id: 5, name: '浙江', title: 'Z' }
-        ];
-      }, 1000);
-    });
-
-    const placeholder = ref(['请选择省', '请选择市', '请选择县']);
-    const value = ref([1, 7, 3]);
-    const value2 = ref([1, 7, 3]);
-
-    const showPopup = reactive({
-      normal: false,
-      normal2: false,
-      exist: false,
-      customImg: false,
-      other: false,
-      select: false
-    });
-
-    const icon = reactive({
-      selectedIcon: 'heart-fill',
-      defaultIcon: 'heart1',
-      closeBtnIcon: 'close',
-      backBtnIcon: 'left'
-    });
-
-    const existAddress = ref([
-      {
-        id: 1,
-        addressDetail: '',
-        cityName: '次渠镇',
-        countyName: '通州区',
-        provinceName: '北京市',
-        selectedAddress: true,
-        townName: '',
-        name: '探探鱼',
-        phone: '182****1718'
-      },
-      {
-        id: 2,
-        addressDetail: '',
-        cityName: '钓鱼岛',
-        countyName: '',
-        provinceName: '钓鱼岛',
-        selectedAddress: false,
-        townName: '',
-        name: '探探鱼',
-        phone: '182****1718'
-      },
-      {
-        id: 3,
-        addressDetail: '京东大厦',
-        cityName: '大兴区',
-        countyName: '科创十一街18号院',
-        provinceName: '北京市',
-        selectedAddress: false,
-        townName: '',
-        name: '探探鱼',
-        phone: '182****1718'
-      }
-    ]);
-
-    const text = reactive({
-      one: translate('title'),
-      two: translate('title'),
-      three: translate('title'),
-      four: translate('title'),
-      five: translate('textAddress'),
-      six: translate('textAddress')
-    });
-
-    const showAddress = () => {
-      showPopup.normal = !showPopup.normal;
-    };
-
-    const showAddress2 = () => {
-      showPopup.normal2 = !showPopup.normal2;
-    };
-
-    const showSelected = () => {
-      showPopup.select = !showPopup.select;
-    };
-
-    const onChange = (cal: CalBack, tag: string) => {
-      console.log('地址选择', cal);
-      const name = (address as any)[cal.next];
-      if (!name) {
-        (showPopup as any)[tag] = false;
-      }
-    };
-    const close1 = (val: CalResult) => {
-      text.one = val.data.addressStr;
-    };
-
-    const close5 = (val: CalResult) => {
-      text.five = val.data.addressStr;
-      value2.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-    };
-
-    const close6 = (val: CalResult) => {
-      text.six = val.data.addressStr;
-      value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-    };
-
-    const showAddressExist = () => {
-      showPopup.exist = true;
-    };
-
-    const close2 = (val: CalResult) => {
-      console.log(val);
-      if (val.type == 'exist') {
-        const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-        text.two = provinceName + cityName + countyName + townName + addressDetail;
-      } else {
-        text.two = val.data.addressStr;
-      }
-    };
-    const selected = (prevExistAdd: AddressList, nowExistAdd: RegionData) => {
-      console.log(prevExistAdd);
-      console.log(nowExistAdd);
-    };
-
-    const showAddressOther = () => {
-      showPopup.other = true;
-    };
-    const showCustomImg = () => {
-      showPopup.customImg = true;
-    };
-
-    const close3 = (val: CalResult) => {
-      console.log(val);
-      if (val.type == 'exist') {
-        const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-        text.three = provinceName + cityName + countyName + townName + addressDetail;
-      } else {
-        text.three = val.data.addressStr;
-      }
-    };
-
-    const close4 = (val: CalResult) => {
-      console.log(val);
-      if (val.type == 'exist') {
-        const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-        text.four = provinceName + cityName + countyName + townName + addressDetail;
-      } else {
-        text.four = val.data.addressStr;
-      }
-    };
-
-    const switchModule = (val: CalResult) => {
-      if (val.type == 'custom') {
-        console.log('点击了“选择其他地址”按钮');
-      } else {
-        console.log('点击了自定义地址左上角的返回按钮');
-      }
-    };
-
-    const closeMask = (val: CalResult) => {
-      console.log('关闭弹层', val);
-    };
-
-    return {
-      value,
-      value2,
-      showAddress,
-      showAddress2,
-      showPopup,
-      onChange,
-      close1,
-      showAddressExist,
-      close2,
-      close5,
-      close6,
-      selected,
-      showSelected,
-      existAddress,
-      showAddressOther,
-      showCustomImg,
-      close3,
-      close4,
-      switchModule,
-      closeMask,
-      placeholder,
-      translate,
-      ...toRefs(icon),
-      ...toRefs(text),
-      ...toRefs(showPopup),
-      ...toRefs(address)
-    };
+const address = reactive({
+  province: [{}],
+  city: [
+    { id: 7, name: '朝阳区', title: 'C' },
+    { id: 8, name: '崇文区', title: 'C' },
+    { id: 9, name: '昌平区', title: 'C' },
+    { id: 6, name: '石景山区', title: 'S' },
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 10, name: '北苑', title: 'B' }
+  ],
+  country: [
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 9, name: '北苑', title: 'B' },
+    { id: 4, name: '常营乡', title: 'C' }
+  ],
+  town: []
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    address.province = [
+      { id: 1, name: '北京', title: 'B' },
+      { id: 2, name: '广西', title: 'G' },
+      { id: 3, name: '江西', title: 'J' },
+      { id: 4, name: '四川', title: 'S' },
+      { id: 5, name: '浙江', title: 'Z' }
+    ];
+  }, 1000);
+});
+
+const placeholder = ref(['请选择省', '请选择市', '请选择县']);
+const value = ref([1, 7, 3]);
+const value2 = ref([1, 7, 3]);
+
+const showPopup = reactive({
+  normal: false,
+  normal2: false,
+  exist: false,
+  customImg: false,
+  other: false,
+  select: false
+});
+
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
   }
+]);
+
+const text = reactive({
+  one: translate('title'),
+  two: translate('title'),
+  three: translate('title'),
+  four: translate('title'),
+  five: translate('textAddress'),
+  six: translate('textAddress')
 });
+
+const showAddress = () => {
+  showPopup.normal = !showPopup.normal;
+};
+
+const showAddress2 = () => {
+  showPopup.normal2 = !showPopup.normal2;
+};
+
+const showSelected = () => {
+  showPopup.select = !showPopup.select;
+};
+
+const onChange = (cal: CalBack, tag: string) => {
+  console.log('地址选择', cal);
+  const name = (address as any)[cal.next];
+  if (!name) {
+    (showPopup as any)[tag] = false;
+  }
+};
+const close1 = (val: CalResult) => {
+  text.one = val.data.addressStr;
+};
+
+const close5 = (val: CalResult) => {
+  text.five = val.data.addressStr;
+  value2.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
+
+const close6 = (val: CalResult) => {
+  text.six = val.data.addressStr;
+  value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
+
+const showAddressExist = () => {
+  showPopup.exist = true;
+};
+
+const close2 = (val: CalResult) => {
+  console.log(val);
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.two = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.two = val.data.addressStr;
+  }
+};
+const selected = (prevExistAdd: AddressList, nowExistAdd: RegionData) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
+
+const showAddressOther = () => {
+  showPopup.other = true;
+};
+const showCustomImg = () => {
+  showPopup.customImg = true;
+};
+
+const close3 = (val: CalResult) => {
+  console.log(val);
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.three = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.three = val.data.addressStr;
+  }
+};
+
+const close4 = (val: CalResult) => {
+  console.log(val);
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.four = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.four = val.data.addressStr;
+  }
+};
+
+const switchModule = (val: CalResult) => {
+  if (val.type == 'custom') {
+    console.log('点击了“选择其他地址”按钮');
+  } else {
+    console.log('点击了自定义地址左上角的返回按钮');
+  }
+};
+
+const closeMask = (val: CalResult) => {
+  console.log('关闭弹层', val);
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/address/doc.en-US.md b/src/packages/__VUE/address/doc.en-US.md
index 82505adb02..f13c97f9b7 100644
--- a/src/packages/__VUE/address/doc.en-US.md
+++ b/src/packages/__VUE/address/doc.en-US.md
@@ -6,7 +6,7 @@ Used for level four address selection
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Address } from '@nutui/nutui';
 
@@ -18,65 +18,59 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Choose Address" :desc="text" is-link @click="showAddress"></nut-cell>
   <nut-address
     v-model:visible="showPopup"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @change="onChange"
     @close="close"
     custom-address-title="Choose Address"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopup = ref(false);
-      const address = reactive({
-        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: []
-      });
-
-      const text = ref('Choose Address');
-
-      const showAddress = () => {
-        showPopup.value = !showPopup.value;
-      };
-
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopup.value = false;
-        }
-      };
-      const close = (val) => {
-        text.value = val.data.addressStr;
-      };
-
-      return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopup = ref(false);
+const address = reactive({
+  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: []
+});
+
+const text = ref('Choose Address');
+
+const showAddress = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopup.value = false;
+  }
+};
+const close = (val) => {
+  text.value = val.data.addressStr;
+};
 </script>
 ```
 
@@ -88,68 +82,62 @@ If you want to select a province, you need to set the region ID in the order of
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Choose City" :desc="text" is-link @click="showAddress"></nut-cell>
   <nut-address
     v-model="value"
     v-model:visible="showPopup"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @change="onChange"
     @close="close"
     custom-address-title="Choose City"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopup = ref(false);
-      const value = ref([1, 7, 3]);
-      const address = reactive({
-        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: []
-      });
-
-      const text = ref('Balizhuang Street, Chaoyang District, Beijing');
-
-      const showAddress = () => {
-        showPopup.value = !showPopup.value;
-      };
-
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopup.value = false;
-        }
-      };
-      const close = (val) => {
-        text.value = val.data.addressStr;
-        value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-      };
-
-      return { showPopup, text, showAddress, onChange, close, value, ...toRefs(address) };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopup = ref(false);
+const value = ref([1, 7, 3]);
+const address = reactive({
+  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: []
+});
+
+const text = ref('Balizhuang Street, Chaoyang District, Beijing');
+
+const showAddress = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopup.value = false;
+  }
+};
+const close = (val) => {
+  text.value = val.data.addressStr;
+  value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
 </script>
 ```
 
@@ -159,72 +147,66 @@ If you want to select a province, you need to set the region ID in the order of
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Choose Address" :desc="text" type="custom2" is-link @click="showAddress"></nut-cell>
   <nut-address
     v-model="value"
     v-model:visible="showPopup"
     type="custom2"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @change="onChange"
     @close="close"
     height="270px"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopup = ref(false);
-      const value = ref([1, 7, 3]);
-      const address = reactive({
-        province: [
-          { id: 1, name: '北京', title: 'B' },
-          { id: 2, name: '广西', title: 'G' },
-          { id: 3, name: '江西', title: 'J' },
-          { id: 4, name: '四川', title: 'S' },
-          { id: 5, name: '浙江', title: 'Z' }
-        ],
-        city: [
-          { id: 7, name: '朝阳区', title: 'C' },
-          { id: 8, name: '崇文区', title: 'C' },
-          { id: 9, name: '昌平区', title: 'C' },
-          { id: 6, name: '石景山区', title: 'S' },
-          { id: 3, name: '八里庄街道', title: 'B' },
-          { id: 9, name: '北苑', title: 'B' }
-        ],
-        country: [
-          { id: 3, name: '八里庄街道', title: 'B' },
-          { id: 9, name: '北苑', title: 'B' },
-          { id: 4, name: '常营乡', title: 'C' }
-        ],
-        town: []
-      });
-
-      const text = ref('Balizhuang Street, Chaoyang District, Beijing');
-
-      const showAddress = () => {
-        showPopup.value = !showPopup.value;
-      };
-
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopup.value = false;
-        }
-      };
-      const close = (val) => {
-        text.value = val.data.addressStr;
-        value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-      };
-
-      return { showPopup, text, showAddress, onChange, close, value, ...toRefs(address) };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopup = ref(false);
+const value = ref([1, 7, 3]);
+const address = reactive({
+  province: [
+    { id: 1, name: '北京', title: 'B' },
+    { id: 2, name: '广西', title: 'G' },
+    { id: 3, name: '江西', title: 'J' },
+    { id: 4, name: '四川', title: 'S' },
+    { id: 5, name: '浙江', title: 'Z' }
+  ],
+  city: [
+    { id: 7, name: '朝阳区', title: 'C' },
+    { id: 8, name: '崇文区', title: 'C' },
+    { id: 9, name: '昌平区', title: 'C' },
+    { id: 6, name: '石景山区', title: 'S' },
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 9, name: '北苑', title: 'B' }
+  ],
+  country: [
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 9, name: '北苑', title: 'B' },
+    { id: 4, name: '常营乡', title: 'C' }
+  ],
+  town: []
+});
+
+const text = ref('Balizhuang Street, Chaoyang District, Beijing');
+
+const showAddress = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopup.value = false;
+  }
+};
+const close = (val) => {
+  text.value = val.data.addressStr;
+  value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
 </script>
 ```
 
@@ -234,7 +216,7 @@ If you want to select a province, you need to set the region ID in the order of
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Choose Address" :desc="text" is-link @click="showAddressExist"></nut-cell>
   <nut-address
@@ -247,70 +229,64 @@ If you want to select a province, you need to set the region ID in the order of
     exist-address-title="Delivery To"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopupExist = ref(false);
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: '',
-          cityName: '次渠镇',
-          countyName: '通州区',
-          provinceName: '北京市',
-          selectedAddress: true,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 2,
-          addressDetail: '',
-          cityName: '钓鱼岛全区',
-          countyName: '',
-          provinceName: '钓鱼岛',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 3,
-          addressDetail: '京东大厦',
-          cityName: '大兴区',
-          countyName: '科创十一街18号院',
-          provinceName: '北京市',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        }
-      ]);
-
-      const text = ref('Choose Address');
-
-      const showAddressExist = () => {
-        showPopupExist.value = true;
-      };
-
-      const close = (val) => {
-        if (val.type == 'exist') {
-          const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-          text.value = provinceName + cityName + countyName + townName + addressDetail;
-        } else {
-          text.value = val.data.addressStr;
-        }
-      };
-
-      const selected = (prevExistAdd, nowExistAdd, arr) => {
-        console.log(prevExistAdd);
-        console.log(nowExistAdd);
-      };
-
-      return { showPopupExist, existAddress, showAddressExist, text, close, selected };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopupExist = ref(false);
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  }
+]);
+
+const text = ref('Choose Address');
+
+const showAddressExist = () => {
+  showPopupExist.value = true;
+};
+
+const close = (val) => {
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.value = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.value = val.data.addressStr;
+  }
+};
+
+const selected = (prevExistAdd, nowExistAdd, arr) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
 </script>
 ```
 
@@ -320,7 +296,7 @@ If you want to select a province, you need to set the region ID in the order of
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
   <nut-address
@@ -343,91 +319,84 @@ If you want to select a province, you need to set the region ID in the order of
     </template>
   </nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  import { HeartFill, Heart1 } from '@nutui/icons-vue';
-  export default {
-    components: { HeartFill, Heart1 },
-    setup() {
-      const showPopupCustomImg = ref(false);
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: '',
-          cityName: '次渠镇',
-          countyName: '通州区',
-          provinceName: '北京市',
-          selectedAddress: true,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 2,
-          addressDetail: '',
-          cityName: '钓鱼岛全区',
-          countyName: '',
-          provinceName: '钓鱼岛',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 3,
-          addressDetail: '京东大厦',
-          cityName: '大兴区',
-          countyName: '科创十一街18号院',
-          provinceName: '北京市',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        }
-      ]);
-
-      const text = ref('Choose Address');
-
-      const showCustomImg = () => {
-        showPopupCustomImg.value = true;
-      };
-
-      const close = (val) => {
-        if (val.type == 'exist') {
-          const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-          text.value = provinceName + cityName + countyName + townName + addressDetail;
-        } else {
-          text.value = val.data.addressStr;
-        }
-      };
-
-      const selected = (prevExistAdd, nowExistAdd, arr) => {
-        console.log(prevExistAdd);
-        console.log(nowExistAdd);
-      };
-
-      return { showPopupCustomImg, existAddress, text, showCustomImg, close, selected };
-    }
-  };
-</script>
-<style>
-  .nut-address-custom-buttom {
-    width: 100%;
-    height: 54px;
-    padding: 6px 0px 0;
-    border-top: 1px solid #f2f2f2;
+<script setup>
+import { ref, reactive } from 'vue';
+import { HeartFill, Heart1 } from '@nutui/icons-vue';
+const showPopupCustomImg = ref(false);
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
   }
-  .btn {
-    width: 90%;
-    height: 42px;
-    line-height: 42px;
-    margin: auto;
-    text-align: center;
-    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-    border-radius: 21px;
-    font-size: 15px;
-    color: white;
+]);
+
+const text = ref('Choose Address');
+
+const showCustomImg = () => {
+  showPopupCustomImg.value = true;
+};
+
+const close = (val) => {
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.value = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.value = val.data.addressStr;
   }
+};
+
+const selected = (prevExistAdd, nowExistAdd, arr) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
+</script>
+<style>
+.nut-address-custom-buttom {
+  width: 100%;
+  height: 54px;
+  padding: 6px 0px 0;
+  border-top: 1px solid #f2f2f2;
+}
+.btn {
+  width: 90%;
+  height: 42px;
+  line-height: 42px;
+  margin: auto;
+  text-align: center;
+  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+  border-radius: 21px;
+  font-size: 15px;
+  color: white;
+}
 </style>
 ```
 
@@ -437,17 +406,17 @@ If you want to select a province, you need to set the region ID in the order of
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Choose Address" :desc="text" is-link @click="showAddressOther"></nut-cell>
   <nut-address
     v-model:visible="showPopupOther"
     type="exist"
     :exist-address="existAddress"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @close="close"
     @selected="selected"
     custom-and-exist-title="Choose Other Address"
@@ -456,120 +425,102 @@ If you want to select a province, you need to set the region ID in the order of
     @change="onChange"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopupOther = ref(false);
-      const address = reactive({
-        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: []
-      });
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: '',
-          cityName: '次渠镇',
-          countyName: '通州区',
-          provinceName: '北京市',
-          selectedAddress: true,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 2,
-          addressDetail: '',
-          cityName: '钓鱼岛全区',
-          countyName: '',
-          provinceName: '钓鱼岛',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 3,
-          addressDetail: '京东大厦',
-          cityName: '大兴区',
-          countyName: '科创十一街18号院',
-          provinceName: '北京市',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        }
-      ]);
-      const backBtnIcon = ref('left');
-      const text = ref('Choose Address');
-
-      const showAddressOther = () => {
-        showPopupOther.value = true;
-      };
-
-      const close = (val) => {
-        if (val.type == 'exist') {
-          const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-          text.value = provinceName + cityName + countyName + townName + addressDetail;
-        } else {
-          text.value = val.data.addressStr;
-        }
-      };
-
-      const selected = (prevExistAdd, nowExistAdd, arr) => {
-        console.log(prevExistAdd);
-        console.log(nowExistAdd);
-      };
-
-      const switchModule = (cal) => {
-        if (cal.type == 'custom') {
-          console.log('点击了“选择其他地址”按钮');
-        } else {
-          console.log('点击了自定义地址左上角的返回按钮');
-        }
-      };
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopupOther.value = false;
-        }
-      };
-
-      const closeMask = (val) => {
-        console.log('关闭弹层', val);
-      };
-
-      return {
-        onChange,
-        showPopupOther,
-        text,
-        existAddress,
-        showAddressOther,
-        switchModule,
-        closeMask,
-        close,
-        selected,
-        backBtnIcon,
-        ...toRefs(address)
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopupOther = ref(false);
+const address = reactive({
+  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: []
+});
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  }
+]);
+const backBtnIcon = ref('left');
+const text = ref('Choose Address');
+
+const showAddressOther = () => {
+  showPopupOther.value = true;
+};
+
+const close = (val) => {
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.value = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.value = val.data.addressStr;
+  }
+};
+
+const selected = (prevExistAdd, nowExistAdd, arr) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
+
+const switchModule = (cal) => {
+  if (cal.type == 'custom') {
+    console.log('点击了“选择其他地址”按钮');
+  } else {
+    console.log('点击了自定义地址左上角的返回按钮');
+  }
+};
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopupOther.value = false;
+  }
+};
+
+const closeMask = (val) => {
+  console.log('关闭弹层', val);
+};
 </script>
 ```
 
@@ -577,66 +528,66 @@ If you want to select a province, you need to set the region ID in the order of
 
 # API
 
-| Attribute              | Description                                                   | Type             | Default                  |
-| ---------------------- | ------------------------------------------------------------- | ---------------- | ------------------------ |
-| v-model:visible        | Whether to open address                                       | boolean          | `false`                  |
-| v-model:value          | Default value                                                 | Array            | `[]`                     |
-| type                   | Choose type: `exist/custom/custom2`                           | string           | `custom`                 |
-| province               | Province data                                                 | Array            | `[]`                     |
-| city                   | City data                                                     | Array            | `[]`                     |
-| country                | Country data                                                  | Array            | `[]`                     |
-| town                   | Town dta                                                      | Array            | `[]`                     |
-| height                 | Popup height                                                  | string \| number | `200px`                  |
-| exist-address          | Exist address list data                                       | Array            | `[]`                     |
-| is-show-custom-address | Whether to change custom address                              | boolean          | `true`                   |
-| custom-address-title   | Custom address title                                          | string           | `Select Region`          |
-| exist-address-title    | Exist address title                                           | string           | `Delivery To`            |
-| custom-and-exist-title | Custom address and existing address switch button copywriting | string           | `Choose Another Address` |
-| columns-placeholder    | Columns placeholder text                                      | string \| Array  | `Select`                 |
-| lock-scroll            | Whether the background is locked                              | boolean          | `true`                   |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model:visible | Whether to open address | boolean | `false` |
+| v-model:value | Default value | Array | `[]` |
+| type | Choose type: `exist/custom/custom2` | string | `custom` |
+| province | Province data | Array | `[]` |
+| city | City data | Array | `[]` |
+| country | Country data | Array | `[]` |
+| town | Town dta | Array | `[]` |
+| height | Popup height | string \| number | `200px` |
+| exist-address | Exist address list data | Array | `[]` |
+| is-show-custom-address | Whether to change custom address | boolean | `true` |
+| custom-address-title | Custom address title | string | `Select Region` |
+| exist-address-title | Exist address title | string | `Delivery To` |
+| custom-and-exist-title | Custom address and existing address switch button copywriting | string | `Choose Another Address` |
+| columns-placeholder | Columns placeholder text | string \| Array | `Select` |
+| lock-scroll | Whether the background is locked | boolean | `true` |
 
 ## Event
 
-| Event         | Description                                                                                                      | Arguments                         |
-| ------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- |
-| change        | Emitted when to selected custom address                                                                          | reference `onChange`              |
-| selected      | Emitted when to selected exist address                                                                           | reference `selected`              |
-| close         | Emitted when to close                                                                                            | reference `close`                 |
-| close-mask    | Emitted when to close mask                                                                                       | {closeWay:'mask'/'cross'}         |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| change | Emitted when to selected custom address | reference `onChange` |
+| selected | Emitted when to selected exist address | reference `selected` |
+| close | Emitted when to close | reference `close` |
+| close-mask | Emitted when to close mask | {closeWay:'mask'/'cross'} |
 | switch-module | Click to select another address or custom address to select the upper left corner of the return button triggered | {type:'exist'/'custom'/'custom2'} |
 
 ## change
 
-| Attribute | Description                                                   | Options                            |
-| --------- | ------------------------------------------------------------- | ---------------------------------- |
-| custom    | The administrative region currently clicked                   | `province / city / country / town` |
-| next      | The next level of the administrative region currently clicked | `province / city / country / town` |
-| value     | The value of the currently clicked administrative region      | `{}`                               |
+| Attribute | Description | Options |
+| --- | --- | --- |
+| custom | The administrative region currently clicked | `province / city / country / town` |
+| next | The next level of the administrative region currently clicked | `province / city / country / town` |
+| value | The value of the currently clicked administrative region | `{}` |
 
 ## selected
 
-| Attribute                    | Description                               | Options |
-| ---------------------------- | ----------------------------------------- | ------- |
-| First Option（prevExistAdd） | Select the previously selected address    | `{}`    |
-| Second Option（nowExistAdd） | Currently selected address                | `{}`    |
-| Third Option（arr）          | After selecting the existing address list | `{}`    |
+| Attribute | Description | Options |
+| --- | --- | --- |
+| First Option（prevExistAdd） | Select the previously selected address | `{}` |
+| Second Option（nowExistAdd） | Currently selected address | `{}` |
+| Third Option（arr） | After selecting the existing address list | `{}` |
 
 ## close
 
-| Attribute | Description   | Options                |
-| --------- | ------------- | ---------------------- |
-| type      | Selected Type | `exist/custom/custom2` |
-| data      | Selected Data | `{}`                   |
+| Attribute | Description | Options |
+| --- | --- | --- |
+| type | Selected Type | `exist/custom/custom2` |
+| data | Selected Data | `{}` |
 
 ## Slot
 
-| Name            | Description          |
-| --------------- | -------------------- |
-| bottom          | Bottom slot          |
-| icon            | Selected icon slot   |
+| Name | Description |
+| --- | --- |
+| bottom | Bottom slot |
+| icon | Selected icon slot |
 | unselected-icon | Unselected icon slot |
-| close-icon      | Close icon slot      |
-| back-icon       | Change icon slot     |
+| close-icon | Close icon slot |
+| back-icon | Change icon slot |
 
 ## Theming
 
@@ -644,17 +595,17 @@ If you want to select a province, you need to set the region ID in the order of
 
 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-address-region-tab-line                    | _linear-gradient(90deg, var(--nut-primary-color) 0%, rgba(#fa2c19, 0.15) 100%)_ |
-| --nut-address-icon-color                         | _var(--nut-primary-color)_                                                      |
-| --nut-address-header-title-font-size             | _18px_                                                                          |
-| --nut-address-header-title-color                 | _#262626_                                                                       |
-| --nut-address-region-tab-font-size               | _13px_                                                                          |
-| --nut-address-region-tab-color                   | _#1d1e1e_                                                                       |
-| --nut-address-region-tab-active-item-font-weight | _bold_                                                                          |
-| --nut-address-region-tab-line-border-radius      | _0_                                                                             |
-| --nut-address-region-tab-line-opacity            | _1_                                                                             |
-| --nut-address-region-item-color                  | _#333_                                                                          |
-| --nut-address-region-item-font-size              | _var(--nut-font-size-1)_                                                        |
-| --nut-address-item-margin-right                  | _9px_                                                                           |
+| Name | Default Value |
+| --- | --- |
+| --nut-address-region-tab-line | _linear-gradient(90deg, var(--nut-primary-color) 0%, rgba(#fa2c19, 0.15) 100%)_ |
+| --nut-address-icon-color | _var(--nut-primary-color)_ |
+| --nut-address-header-title-font-size | _18px_ |
+| --nut-address-header-title-color | _#262626_ |
+| --nut-address-region-tab-font-size | _13px_ |
+| --nut-address-region-tab-color | _#1d1e1e_ |
+| --nut-address-region-tab-active-item-font-weight | _bold_ |
+| --nut-address-region-tab-line-border-radius | _0_ |
+| --nut-address-region-tab-line-opacity | _1_ |
+| --nut-address-region-item-color | _#333_ |
+| --nut-address-region-item-font-size | _var(--nut-font-size-1)_ |
+| --nut-address-item-margin-right | _9px_ |
diff --git a/src/packages/__VUE/address/doc.md b/src/packages/__VUE/address/doc.md
index 35afc37496..4e9e059559 100644
--- a/src/packages/__VUE/address/doc.md
+++ b/src/packages/__VUE/address/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Address } from '@nutui/nutui';
 
@@ -18,65 +18,59 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
   <nut-address
     v-model:visible="showPopup"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @change="onChange"
     @close="close"
     custom-address-title="请选择所在地区"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopup = ref(false);
-      const address = reactive({
-        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: []
-      });
-
-      const text = ref('选择地址');
-
-      const showAddress = () => {
-        showPopup.value = !showPopup.value;
-      };
-
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopup.value = false;
-        }
-      };
-      const close = (val) => {
-        text.value = val.data.addressStr;
-      };
-
-      return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopup = ref(false);
+const address = reactive({
+  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: []
+});
+
+const text = ref('选择地址');
+
+const showAddress = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopup.value = false;
+  }
+};
+const close = (val) => {
+  text.value = val.data.addressStr;
+};
 </script>
 ```
 
@@ -88,68 +82,62 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
   <nut-address
     v-model="value"
     v-model:visible="showPopup"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @change="onChange"
     @close="close"
     custom-address-title="请选择所在地区"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopup = ref(false);
-      const value = ref([1, 7, 3]);
-      const address = reactive({
-        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: []
-      });
-
-      const text = ref('北京朝阳区八里庄街道');
-
-      const showAddress = () => {
-        showPopup.value = !showPopup.value;
-      };
-
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopup.value = false;
-        }
-      };
-      const close = (val) => {
-        text.value = val.data.addressStr;
-        value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-      };
-
-      return { showPopup, text, showAddress, onChange, close, value, ...toRefs(address) };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopup = ref(false);
+const value = ref([1, 7, 3]);
+const address = reactive({
+  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: []
+});
+
+const text = ref('北京朝阳区八里庄街道');
+
+const showAddress = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopup.value = false;
+  }
+};
+const close = (val) => {
+  text.value = val.data.addressStr;
+  value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
 </script>
 ```
 
@@ -159,72 +147,66 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" type="custom2" is-link @click="showAddress"></nut-cell>
   <nut-address
     v-model="value"
     v-model:visible="showPopup"
     type="custom2"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @change="onChange"
     @close="close"
     height="270px"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopup = ref(false);
-      const value = ref([1, 7, 3]);
-      const address = reactive({
-        province: [
-          { id: 1, name: '北京', title: 'B' },
-          { id: 2, name: '广西', title: 'G' },
-          { id: 3, name: '江西', title: 'J' },
-          { id: 4, name: '四川', title: 'S' },
-          { id: 5, name: '浙江', title: 'Z' }
-        ],
-        city: [
-          { id: 7, name: '朝阳区', title: 'C' },
-          { id: 8, name: '崇文区', title: 'C' },
-          { id: 9, name: '昌平区', title: 'C' },
-          { id: 6, name: '石景山区', title: 'S' },
-          { id: 3, name: '八里庄街道', title: 'B' },
-          { id: 9, name: '北苑', title: 'B' }
-        ],
-        country: [
-          { id: 3, name: '八里庄街道', title: 'B' },
-          { id: 9, name: '北苑', title: 'B' },
-          { id: 4, name: '常营乡', title: 'C' }
-        ],
-        town: []
-      });
-
-      const text = ref('北京朝阳区八里庄街道');
-
-      const showAddress = () => {
-        showPopup.value = !showPopup.value;
-      };
-
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopup.value = false;
-        }
-      };
-      const close = (val) => {
-        text.value = val.data.addressStr;
-        value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-      };
-
-      return { showPopup, text, showAddress, onChange, close, value, ...toRefs(address) };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopup = ref(false);
+const value = ref([1, 7, 3]);
+const address = reactive({
+  province: [
+    { id: 1, name: '北京', title: 'B' },
+    { id: 2, name: '广西', title: 'G' },
+    { id: 3, name: '江西', title: 'J' },
+    { id: 4, name: '四川', title: 'S' },
+    { id: 5, name: '浙江', title: 'Z' }
+  ],
+  city: [
+    { id: 7, name: '朝阳区', title: 'C' },
+    { id: 8, name: '崇文区', title: 'C' },
+    { id: 9, name: '昌平区', title: 'C' },
+    { id: 6, name: '石景山区', title: 'S' },
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 9, name: '北苑', title: 'B' }
+  ],
+  country: [
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 9, name: '北苑', title: 'B' },
+    { id: 4, name: '常营乡', title: 'C' }
+  ],
+  town: []
+});
+
+const text = ref('北京朝阳区八里庄街道');
+
+const showAddress = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopup.value = false;
+  }
+};
+const close = (val) => {
+  text.value = val.data.addressStr;
+  value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
 </script>
 ```
 
@@ -234,7 +216,7 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showAddressExist"></nut-cell>
   <nut-address
@@ -247,70 +229,64 @@ app.use(Address);
     exist-address-title="配送至"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopupExist = ref(false);
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: '',
-          cityName: '次渠镇',
-          countyName: '通州区',
-          provinceName: '北京市',
-          selectedAddress: true,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 2,
-          addressDetail: '',
-          cityName: '钓鱼岛全区',
-          countyName: '',
-          provinceName: '钓鱼岛',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 3,
-          addressDetail: '京东大厦',
-          cityName: '大兴区',
-          countyName: '科创十一街18号院',
-          provinceName: '北京市',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        }
-      ]);
-
-      const text = ref('选择地址');
-
-      const showAddressExist = () => {
-        showPopupExist.value = true;
-      };
-
-      const close = (val) => {
-        if (val.type == 'exist') {
-          const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-          text.value = provinceName + cityName + countyName + townName + addressDetail;
-        } else {
-          text.value = val.data.addressStr;
-        }
-      };
-
-      const selected = (prevExistAdd, nowExistAdd, arr) => {
-        console.log(prevExistAdd);
-        console.log(nowExistAdd);
-      };
-
-      return { showPopupExist, existAddress, showAddressExist, text, close, selected };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopupExist = ref(false);
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  }
+]);
+
+const text = ref('选择地址');
+
+const showAddressExist = () => {
+  showPopupExist.value = true;
+};
+
+const close = (val) => {
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.value = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.value = val.data.addressStr;
+  }
+};
+
+const selected = (prevExistAdd, nowExistAdd, arr) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
 </script>
 ```
 
@@ -320,7 +296,7 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
   <nut-address
@@ -343,91 +319,84 @@ app.use(Address);
     </template>
   </nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  import { HeartFill, Heart1 } from '@nutui/icons-vue';
-  export default {
-    components: { HeartFill, Heart1 },
-    setup() {
-      const showPopupCustomImg = ref(false);
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: '',
-          cityName: '次渠镇',
-          countyName: '通州区',
-          provinceName: '北京市',
-          selectedAddress: true,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 2,
-          addressDetail: '',
-          cityName: '钓鱼岛全区',
-          countyName: '',
-          provinceName: '钓鱼岛',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 3,
-          addressDetail: '京东大厦',
-          cityName: '大兴区',
-          countyName: '科创十一街18号院',
-          provinceName: '北京市',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        }
-      ]);
-
-      const text = ref('选择地址');
-
-      const showCustomImg = () => {
-        showPopupCustomImg.value = true;
-      };
-
-      const close = (val) => {
-        if (val.type == 'exist') {
-          const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-          text.value = provinceName + cityName + countyName + townName + addressDetail;
-        } else {
-          text.value = val.data.addressStr;
-        }
-      };
-
-      const selected = (prevExistAdd, nowExistAdd, arr) => {
-        console.log(prevExistAdd);
-        console.log(nowExistAdd);
-      };
-
-      return { showPopupCustomImg, existAddress, text, showCustomImg, close, selected };
-    }
-  };
-</script>
-<style>
-  .nut-address-custom-buttom {
-    width: 100%;
-    height: 54px;
-    padding: 6px 0px 0;
-    border-top: 1px solid #f2f2f2;
+<script setup>
+import { ref, reactive } from 'vue';
+import { HeartFill, Heart1 } from '@nutui/icons-vue';
+const showPopupCustomImg = ref(false);
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
   }
-  .btn {
-    width: 90%;
-    height: 42px;
-    line-height: 42px;
-    margin: auto;
-    text-align: center;
-    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-    border-radius: 21px;
-    font-size: 15px;
-    color: white;
+]);
+
+const text = ref('选择地址');
+
+const showCustomImg = () => {
+  showPopupCustomImg.value = true;
+};
+
+const close = (val) => {
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.value = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.value = val.data.addressStr;
   }
+};
+
+const selected = (prevExistAdd, nowExistAdd, arr) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
+</script>
+<style>
+.nut-address-custom-buttom {
+  width: 100%;
+  height: 54px;
+  padding: 6px 0px 0;
+  border-top: 1px solid #f2f2f2;
+}
+.btn {
+  width: 90%;
+  height: 42px;
+  line-height: 42px;
+  margin: auto;
+  text-align: center;
+  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+  border-radius: 21px;
+  font-size: 15px;
+  color: white;
+}
 </style>
 ```
 
@@ -437,17 +406,17 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
   <nut-address
     v-model:visible="showPopupOther"
     type="exist"
     :exist-address="existAddress"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @close="close"
     @selected="selected"
     custom-and-exist-title="选择其他地址"
@@ -456,120 +425,102 @@ app.use(Address);
     @change="onChange"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopupOther = ref(false);
-      const address = reactive({
-        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: []
-      });
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: '',
-          cityName: '次渠镇',
-          countyName: '通州区',
-          provinceName: '北京市',
-          selectedAddress: true,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 2,
-          addressDetail: '',
-          cityName: '钓鱼岛全区',
-          countyName: '',
-          provinceName: '钓鱼岛',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 3,
-          addressDetail: '京东大厦',
-          cityName: '大兴区',
-          countyName: '科创十一街18号院',
-          provinceName: '北京市',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        }
-      ]);
-      const backBtnIcon = ref('left');
-      const text = ref('选择地址');
-
-      const showAddressOther = () => {
-        showPopupOther.value = true;
-      };
-
-      const close = (val) => {
-        if (val.type == 'exist') {
-          const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-          text.value = provinceName + cityName + countyName + townName + addressDetail;
-        } else {
-          text.value = val.data.addressStr;
-        }
-      };
-
-      const selected = (prevExistAdd, nowExistAdd, arr) => {
-        console.log(prevExistAdd);
-        console.log(nowExistAdd);
-      };
-
-      const switchModule = (cal) => {
-        if (cal.type == 'custom') {
-          console.log('点击了“选择其他地址”按钮');
-        } else {
-          console.log('点击了自定义地址左上角的返回按钮');
-        }
-      };
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopupOther.value = false;
-        }
-      };
-
-      const closeMask = (val) => {
-        console.log('关闭弹层', val);
-      };
-
-      return {
-        onChange,
-        showPopupOther,
-        text,
-        existAddress,
-        showAddressOther,
-        switchModule,
-        closeMask,
-        close,
-        selected,
-        backBtnIcon,
-        ...toRefs(address)
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopupOther = ref(false);
+const address = reactive({
+  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: []
+});
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  }
+]);
+const backBtnIcon = ref('left');
+const text = ref('选择地址');
+
+const showAddressOther = () => {
+  showPopupOther.value = true;
+};
+
+const close = (val) => {
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.value = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.value = val.data.addressStr;
+  }
+};
+
+const selected = (prevExistAdd, nowExistAdd, arr) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
+
+const switchModule = (cal) => {
+  if (cal.type == 'custom') {
+    console.log('点击了“选择其他地址”按钮');
+  } else {
+    console.log('点击了自定义地址左上角的返回按钮');
+  }
+};
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopupOther.value = false;
+  }
+};
+
+const closeMask = (val) => {
+  console.log('关闭弹层', val);
+};
 </script>
 ```
 
@@ -579,23 +530,23 @@ app.use(Address);
 
 ### Props
 
-| 参数                   | 说明                                                                                                                                            | 类型             | 默认值           |
-| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- |
-| v-model:visible        | 是否打开地址选择                                                                                                                                | boolean          | `false`          |
-| v-model:value          | 设置默认选中值                                                                                                                                  | Array            | `[]`             |
-| type                   | 地址选择类型 `exist/custom/custom2`                                                                                                             | string           | `custom`         |
-| province               | 省，每个省的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母                                                   | Array            | `[]`             |
-| city                   | 市，每个市的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母                                                   | Array            | `[]`             |
-| country                | 县，每个县的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母                                                   | Array            | `[]`             |
-| town                   | 乡/镇，每个乡/镇的对象中,必须有 `name` 字段,如果类型选择 `custom2`，必须指定 `title` 字段为首字母                                               | Array            | `[]`             |
-| height                 | 弹层中内容容器的高度，仅在 `type="custom2"` 时有效                                                                                              | string \| number | `200px`          |
-| exist-address          | 已存在地址列表，每个地址对象中，必传值 `provinceName`、`cityName`、`countyName`、`townName`、`addressDetail`、`selectedAddress`（字段解释见下） | Array            | `[]`             |
-| is-show-custom-address | 是否可以切换自定义地址选择，`type=‘exist’` 时生效                                                                                               | boolean          | `true`           |
-| custom-address-title   | 自定义地址选择文案，`type='custom'` 时生效                                                                                                      | string           | `请选择所在地区` |
-| exist-address-title    | 已有地址文案 ，`type=‘exist’` 时生效                                                                                                            | string           | `配送至`         |
-| custom-and-exist-title | 自定义地址与已有地址切换按钮文案 ，`type=‘exist’` 时生效                                                                                        | string           | `选择其他地址`   |
-| columns-placeholder    | 列提示文字                                                                                                                                      | string \| Array  | `请选择`         |
-| lock-scroll            | 背景是否锁定                                                                                                                                    | boolean          | `true`           |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:visible | 是否打开地址选择 | boolean | `false` |
+| v-model:value | 设置默认选中值 | Array | `[]` |
+| type | 地址选择类型 `exist/custom/custom2` | string | `custom` |
+| province | 省，每个省的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母 | Array | `[]` |
+| city | 市，每个市的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母 | Array | `[]` |
+| country | 县，每个县的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母 | Array | `[]` |
+| town | 乡/镇，每个乡/镇的对象中,必须有 `name` 字段,如果类型选择 `custom2`，必须指定 `title` 字段为首字母 | Array | `[]` |
+| height | 弹层中内容容器的高度，仅在 `type="custom2"` 时有效 | string \| number | `200px` |
+| exist-address | 已存在地址列表，每个地址对象中，必传值 `provinceName`、`cityName`、`countyName`、`townName`、`addressDetail`、`selectedAddress`（字段解释见下） | Array | `[]` |
+| is-show-custom-address | 是否可以切换自定义地址选择，`type=‘exist’` 时生效 | boolean | `true` |
+| custom-address-title | 自定义地址选择文案，`type='custom'` 时生效 | string | `请选择所在地区` |
+| exist-address-title | 已有地址文案 ，`type=‘exist’` 时生效 | string | `配送至` |
+| custom-and-exist-title | 自定义地址与已有地址切换按钮文案 ，`type=‘exist’` 时生效 | string | `选择其他地址` |
+| columns-placeholder | 列提示文字 | string \| Array | `请选择` |
+| lock-scroll | 背景是否锁定 | boolean | `true` |
 
 - `provinceName` 省的名字
 - `cityName` 市的名字
@@ -606,46 +557,46 @@ app.use(Address);
 
 ### Events
 
-| 事件名        | 说明                                                 | 回调参数                          |
-| ------------- | ---------------------------------------------------- | --------------------------------- |
-| change        | 自定义选择地址时，选择地区时触发                     | 参考 `onChange`                   |
-| selected      | 选择已有地址列表时触发                               | 参考 `selected`                   |
-| close         | 地址选择弹框关闭时触发                               | 参考 `close`                      |
-| close-mask    | 点击遮罩层或点击右上角叉号关闭时触发                 | {closeWay:'mask'/'cross'}         |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 自定义选择地址时，选择地区时触发 | 参考 `onChange` |
+| selected | 选择已有地址列表时触发 | 参考 `selected` |
+| close | 地址选择弹框关闭时触发 | 参考 `close` |
+| close-mask | 点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'} |
 | switch-module | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'/'custom2'} |
 
 ### change 回调参数
 
-| 参数   | 说明                                   | 可选值                                             |
-| ------ | -------------------------------------- | -------------------------------------------------- |
-| custom | 当前点击的行政区域                     | `province(省) / city(市) / country(县) / town(乡)` |
-| next   | 当前点击的行政区域的下一级             | `province(省) / city(市) / country(县) / town(乡)` |
-| value  | 当前点击的行政区域的值（返回传入的值） | `{}`                                               |
+| 参数 | 说明 | 可选值 |
+| --- | --- | --- |
+| custom | 当前点击的行政区域 | `province(省) / city(市) / country(县) / town(乡)` |
+| next | 当前点击的行政区域的下一级 | `province(省) / city(市) / country(县) / town(乡)` |
+| value | 当前点击的行政区域的值（返回传入的值） | `{}` |
 
 ### selected 回调参数
 
-| 参数                         | 说明                                                     | 可能值 |
-| ---------------------------- | -------------------------------------------------------- | ------ |
-| 第一个参数`（prevExistAdd）` | 选择前选中的地址                                         | `{}`   |
-| 第二个参数`（nowExistAdd）`  | 当前选中的地址                                           | `{}`   |
-| 第三个参数`（arr）`          | 选择完之后的已有地址列表（`selectedAddress` 值发生改变） | `{}`   |
+| 参数 | 说明 | 可能值 |
+| --- | --- | --- |
+| 第一个参数`（prevExistAdd）` | 选择前选中的地址 | `{}` |
+| 第二个参数`（nowExistAdd）` | 当前选中的地址 | `{}` |
+| 第三个参数`（arr）` | 选择完之后的已有地址列表（`selectedAddress` 值发生改变） | `{}` |
 
 ### close 回调参数
 
-| 参数 | 说明                                                    | 可能值                 |
-| ---- | ------------------------------------------------------- | ---------------------- |
-| type | 地址选择类型 `exist/custom/custom2`                     | `exist/custom/custom2` |
-| data | 选择地址的值,`custom` 时，`addressStr` 为选择的地址组合 | `{}`                   |
+| 参数 | 说明 | 可能值 |
+| --- | --- | --- |
+| type | 地址选择类型 `exist/custom/custom2` | `exist/custom/custom2` |
+| data | 选择地址的值,`custom` 时，`addressStr` 为选择的地址组合 | `{}` |
 
 ### Slots
 
-| 名称            | 说明                                 |
-| --------------- | ------------------------------------ |
-| bottom          | 可自定义底部                         |
-| icon            | 自定义选中项的图标                   |
-| unselected-icon | 未选中地址时的图标                   |
-| close-icon      | 关闭弹层的图标                       |
-| back-icon       | 自定义地址与已有地址切换时返回的图标 |
+| 名称 | 说明 |
+| --- | --- |
+| bottom | 可自定义底部 |
+| icon | 自定义选中项的图标 |
+| unselected-icon | 未选中地址时的图标 |
+| close-icon | 关闭弹层的图标 |
+| back-icon | 自定义地址与已有地址切换时返回的图标 |
 
 ## 主题定制
 
@@ -653,17 +604,17 @@ app.use(Address);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                             | 默认值                                                                          |
-| ------------------------------------------------ | ------------------------------------------------------------------------------- |
-| --nut-address-region-tab-line                    | _linear-gradient(90deg, var(--nut-primary-color) 0%, rgba(#fa2c19, 0.15) 100%)_ |
-| --nut-address-icon-color                         | _var(--nut-primary-color)_                                                      |
-| --nut-address-header-title-font-size             | _18px_                                                                          |
-| --nut-address-header-title-color                 | _#262626_                                                                       |
-| --nut-address-region-tab-font-size               | _13px_                                                                          |
-| --nut-address-region-tab-color                   | _#1d1e1e_                                                                       |
-| --nut-address-region-tab-active-item-font-weight | _bold_                                                                          |
-| --nut-address-region-tab-line-border-radius      | _0_                                                                             |
-| --nut-address-region-tab-line-opacity            | _1_                                                                             |
-| --nut-address-region-item-color                  | _#333_                                                                          |
-| --nut-address-region-item-font-size              | _var(--nut-font-size-1)_                                                        |
-| --nut-address-item-margin-right                  | _9px_                                                                           |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-address-region-tab-line | _linear-gradient(90deg, var(--nut-primary-color) 0%, rgba(#fa2c19, 0.15) 100%)_ |
+| --nut-address-icon-color | _var(--nut-primary-color)_ |
+| --nut-address-header-title-font-size | _18px_ |
+| --nut-address-header-title-color | _#262626_ |
+| --nut-address-region-tab-font-size | _13px_ |
+| --nut-address-region-tab-color | _#1d1e1e_ |
+| --nut-address-region-tab-active-item-font-weight | _bold_ |
+| --nut-address-region-tab-line-border-radius | _0_ |
+| --nut-address-region-tab-line-opacity | _1_ |
+| --nut-address-region-item-color | _#333_ |
+| --nut-address-region-item-font-size | _var(--nut-font-size-1)_ |
+| --nut-address-item-margin-right | _9px_ |
diff --git a/src/packages/__VUE/address/doc.taro.md b/src/packages/__VUE/address/doc.taro.md
index b3b58bd23a..b3a0021445 100644
--- a/src/packages/__VUE/address/doc.taro.md
+++ b/src/packages/__VUE/address/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Address } from '@nutui/nutui-taro';
 
@@ -18,65 +18,59 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
   <nut-address
     v-model:visible="showPopup"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @change="onChange"
     @close="close"
     custom-address-title="请选择所在地区"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopup = ref(false);
-      const address = reactive({
-        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: []
-      });
-
-      const text = ref('选择地址');
-
-      const showAddress = () => {
-        showPopup.value = !showPopup.value;
-      };
-
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopup.value = false;
-        }
-      };
-      const close = (val) => {
-        text.value = val.data.addressStr;
-      };
-
-      return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopup = ref(false);
+const address = reactive({
+  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: []
+});
+
+const text = ref('选择地址');
+
+const showAddress = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopup.value = false;
+  }
+};
+const close = (val) => {
+  text.value = val.data.addressStr;
+};
 </script>
 ```
 
@@ -88,68 +82,62 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
   <nut-address
     v-model="value"
     v-model:visible="showPopup"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @change="onChange"
     @close="close"
     custom-address-title="请选择所在地区"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopup = ref(false);
-      const value = ref([1, 7, 3]);
-      const address = reactive({
-        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: []
-      });
-
-      const text = ref('北京朝阳区八里庄街道');
-
-      const showAddress = () => {
-        showPopup.value = !showPopup.value;
-      };
-
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopup.value = false;
-        }
-      };
-      const close = (val) => {
-        text.value = val.data.addressStr;
-        value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-      };
-
-      return { showPopup, text, showAddress, onChange, close, value, ...toRefs(address) };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopup = ref(false);
+const value = ref([1, 7, 3]);
+const address = reactive({
+  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: []
+});
+
+const text = ref('北京朝阳区八里庄街道');
+
+const showAddress = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopup.value = false;
+  }
+};
+const close = (val) => {
+  text.value = val.data.addressStr;
+  value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
 </script>
 ```
 
@@ -159,72 +147,66 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" type="custom2" is-link @click="showAddress"></nut-cell>
   <nut-address
     v-model="value"
     v-model:visible="showPopup"
     type="custom2"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @change="onChange"
     @close="close"
     height="270px"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopup = ref(false);
-      const value = ref([1, 7, 3]);
-      const address = reactive({
-        province: [
-          { id: 1, name: '北京', title: 'B' },
-          { id: 2, name: '广西', title: 'G' },
-          { id: 3, name: '江西', title: 'J' },
-          { id: 4, name: '四川', title: 'S' },
-          { id: 5, name: '浙江', title: 'Z' }
-        ],
-        city: [
-          { id: 7, name: '朝阳区', title: 'C' },
-          { id: 8, name: '崇文区', title: 'C' },
-          { id: 9, name: '昌平区', title: 'C' },
-          { id: 6, name: '石景山区', title: 'S' },
-          { id: 3, name: '八里庄街道', title: 'B' },
-          { id: 9, name: '北苑', title: 'B' }
-        ],
-        country: [
-          { id: 3, name: '八里庄街道', title: 'B' },
-          { id: 9, name: '北苑', title: 'B' },
-          { id: 4, name: '常营乡', title: 'C' }
-        ],
-        town: []
-      });
-
-      const text = ref('北京朝阳区八里庄街道');
-
-      const showAddress = () => {
-        showPopup.value = !showPopup.value;
-      };
-
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopup.value = false;
-        }
-      };
-      const close = (val) => {
-        text.value = val.data.addressStr;
-        value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
-      };
-
-      return { showPopup, text, showAddress, onChange, close, value, ...toRefs(address) };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopup = ref(false);
+const value = ref([1, 7, 3]);
+const address = reactive({
+  province: [
+    { id: 1, name: '北京', title: 'B' },
+    { id: 2, name: '广西', title: 'G' },
+    { id: 3, name: '江西', title: 'J' },
+    { id: 4, name: '四川', title: 'S' },
+    { id: 5, name: '浙江', title: 'Z' }
+  ],
+  city: [
+    { id: 7, name: '朝阳区', title: 'C' },
+    { id: 8, name: '崇文区', title: 'C' },
+    { id: 9, name: '昌平区', title: 'C' },
+    { id: 6, name: '石景山区', title: 'S' },
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 9, name: '北苑', title: 'B' }
+  ],
+  country: [
+    { id: 3, name: '八里庄街道', title: 'B' },
+    { id: 9, name: '北苑', title: 'B' },
+    { id: 4, name: '常营乡', title: 'C' }
+  ],
+  town: []
+});
+
+const text = ref('北京朝阳区八里庄街道');
+
+const showAddress = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopup.value = false;
+  }
+};
+const close = (val) => {
+  text.value = val.data.addressStr;
+  value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
+};
 </script>
 ```
 
@@ -234,7 +216,7 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showAddressExist"></nut-cell>
   <nut-address
@@ -247,70 +229,64 @@ app.use(Address);
     exist-address-title="配送至"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopupExist = ref(false);
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: '',
-          cityName: '次渠镇',
-          countyName: '通州区',
-          provinceName: '北京市',
-          selectedAddress: true,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 2,
-          addressDetail: '',
-          cityName: '钓鱼岛全区',
-          countyName: '',
-          provinceName: '钓鱼岛',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 3,
-          addressDetail: '京东大厦',
-          cityName: '大兴区',
-          countyName: '科创十一街18号院',
-          provinceName: '北京市',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        }
-      ]);
-
-      const text = ref('选择地址');
-
-      const showAddressExist = () => {
-        showPopupExist.value = true;
-      };
-
-      const close = (val) => {
-        if (val.type == 'exist') {
-          const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-          text.value = provinceName + cityName + countyName + townName + addressDetail;
-        } else {
-          text.value = val.data.addressStr;
-        }
-      };
-
-      const selected = (prevExistAdd, nowExistAdd, arr) => {
-        console.log(prevExistAdd);
-        console.log(nowExistAdd);
-      };
-
-      return { showPopupExist, existAddress, showAddressExist, text, close, selected };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopupExist = ref(false);
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  }
+]);
+
+const text = ref('选择地址');
+
+const showAddressExist = () => {
+  showPopupExist.value = true;
+};
+
+const close = (val) => {
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.value = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.value = val.data.addressStr;
+  }
+};
+
+const selected = (prevExistAdd, nowExistAdd, arr) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
 </script>
 ```
 
@@ -320,7 +296,7 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
   <nut-address
@@ -343,91 +319,84 @@ app.use(Address);
     </template>
   </nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  import { HeartFill, Heart1 } from '@nutui/icons-vue-taro';
-  export default {
-    components: { HeartFill, Heart1 },
-    setup() {
-      const showPopupCustomImg = ref(false);
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: '',
-          cityName: '次渠镇',
-          countyName: '通州区',
-          provinceName: '北京市',
-          selectedAddress: true,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 2,
-          addressDetail: '',
-          cityName: '钓鱼岛全区',
-          countyName: '',
-          provinceName: '钓鱼岛',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 3,
-          addressDetail: '京东大厦',
-          cityName: '大兴区',
-          countyName: '科创十一街18号院',
-          provinceName: '北京市',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        }
-      ]);
-
-      const text = ref('选择地址');
-
-      const showCustomImg = () => {
-        showPopupCustomImg.value = true;
-      };
-
-      const close = (val) => {
-        if (val.type == 'exist') {
-          const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-          text.value = provinceName + cityName + countyName + townName + addressDetail;
-        } else {
-          text.value = val.data.addressStr;
-        }
-      };
-
-      const selected = (prevExistAdd, nowExistAdd, arr) => {
-        console.log(prevExistAdd);
-        console.log(nowExistAdd);
-      };
-
-      return { showPopupCustomImg, existAddress, text, showCustomImg, close, selected };
-    }
-  };
-</script>
-<style>
-  .nut-address-custom-buttom {
-    width: 100%;
-    height: 54px;
-    padding: 6px 0px 0;
-    border-top: 1px solid #f2f2f2;
+<script setup>
+import { ref, reactive } from 'vue';
+import { HeartFill, Heart1 } from '@nutui/icons-vue-taro';
+const showPopupCustomImg = ref(false);
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
   }
-  .btn {
-    width: 90%;
-    height: 42px;
-    line-height: 42px;
-    margin: auto;
-    text-align: center;
-    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-    border-radius: 21px;
-    font-size: 15px;
-    color: white;
+]);
+
+const text = ref('选择地址');
+
+const showCustomImg = () => {
+  showPopupCustomImg.value = true;
+};
+
+const close = (val) => {
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.value = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.value = val.data.addressStr;
   }
+};
+
+const selected = (prevExistAdd, nowExistAdd, arr) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
+</script>
+<style>
+.nut-address-custom-buttom {
+  width: 100%;
+  height: 54px;
+  padding: 6px 0px 0;
+  border-top: 1px solid #f2f2f2;
+}
+.btn {
+  width: 90%;
+  height: 42px;
+  line-height: 42px;
+  margin: auto;
+  text-align: center;
+  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+  border-radius: 21px;
+  font-size: 15px;
+  color: white;
+}
 </style>
 ```
 
@@ -437,17 +406,17 @@ app.use(Address);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
   <nut-address
     v-model:visible="showPopupOther"
     type="exist"
     :exist-address="existAddress"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
+    :province="address.province"
+    :city="address.city"
+    :country="address.country"
+    :town="address.town"
     @close="close"
     @selected="selected"
     custom-and-exist-title="选择其他地址"
@@ -456,120 +425,102 @@ app.use(Address);
     @change="onChange"
   ></nut-address>
 </template>
-<script>
-  import { ref, reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const showPopupOther = ref(false);
-      const address = reactive({
-        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: []
-      });
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: '',
-          cityName: '次渠镇',
-          countyName: '通州区',
-          provinceName: '北京市',
-          selectedAddress: true,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 2,
-          addressDetail: '',
-          cityName: '钓鱼岛全区',
-          countyName: '',
-          provinceName: '钓鱼岛',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        },
-        {
-          id: 3,
-          addressDetail: '京东大厦',
-          cityName: '大兴区',
-          countyName: '科创十一街18号院',
-          provinceName: '北京市',
-          selectedAddress: false,
-          townName: '',
-          name: '探探鱼',
-          phone: '182****1718'
-        }
-      ]);
-      const backBtnIcon = ref('left');
-      const text = ref('选择地址');
-
-      const showAddressOther = () => {
-        showPopupOther.value = true;
-      };
-
-      const close = (val) => {
-        if (val.type == 'exist') {
-          const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
-          text.value = provinceName + cityName + countyName + townName + addressDetail;
-        } else {
-          text.value = val.data.addressStr;
-        }
-      };
-
-      const selected = (prevExistAdd, nowExistAdd, arr) => {
-        console.log(prevExistAdd);
-        console.log(nowExistAdd);
-      };
-
-      const switchModule = (cal) => {
-        if (cal.type == 'custom') {
-          console.log('点击了“选择其他地址”按钮');
-        } else {
-          console.log('点击了自定义地址左上角的返回按钮');
-        }
-      };
-      const onChange = (cal) => {
-        const name = address[cal.next];
-        if (!name || name.length < 1) {
-          showPopupOther.value = false;
-        }
-      };
-
-      const closeMask = (val) => {
-        console.log('关闭弹层', val);
-      };
-
-      return {
-        onChange,
-        showPopupOther,
-        text,
-        existAddress,
-        showAddressOther,
-        switchModule,
-        closeMask,
-        close,
-        selected,
-        backBtnIcon,
-        ...toRefs(address)
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const showPopupOther = ref(false);
+const address = reactive({
+  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: []
+});
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: '',
+    cityName: '次渠镇',
+    countyName: '通州区',
+    provinceName: '北京市',
+    selectedAddress: true,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 2,
+    addressDetail: '',
+    cityName: '钓鱼岛全区',
+    countyName: '',
+    provinceName: '钓鱼岛',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  },
+  {
+    id: 3,
+    addressDetail: '京东大厦',
+    cityName: '大兴区',
+    countyName: '科创十一街18号院',
+    provinceName: '北京市',
+    selectedAddress: false,
+    townName: '',
+    name: '探探鱼',
+    phone: '182****1718'
+  }
+]);
+const backBtnIcon = ref('left');
+const text = ref('选择地址');
+
+const showAddressOther = () => {
+  showPopupOther.value = true;
+};
+
+const close = (val) => {
+  if (val.type == 'exist') {
+    const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
+    text.value = provinceName + cityName + countyName + townName + addressDetail;
+  } else {
+    text.value = val.data.addressStr;
+  }
+};
+
+const selected = (prevExistAdd, nowExistAdd, arr) => {
+  console.log(prevExistAdd);
+  console.log(nowExistAdd);
+};
+
+const switchModule = (cal) => {
+  if (cal.type == 'custom') {
+    console.log('点击了“选择其他地址”按钮');
+  } else {
+    console.log('点击了自定义地址左上角的返回按钮');
+  }
+};
+const onChange = (cal) => {
+  const name = address[cal.next];
+  if (!name || name.length < 1) {
+    showPopupOther.value = false;
+  }
+};
+
+const closeMask = (val) => {
+  console.log('关闭弹层', val);
+};
 </script>
 ```
 
@@ -579,23 +530,23 @@ app.use(Address);
 
 ### Props
 
-| 参数                   | 说明                                                                                                                                            | 类型             | 默认值           |
-| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- |
-| v-model:visible        | 是否打开地址选择                                                                                                                                | boolean          | `false`          |
-| v-model:value          | 设置默认选中值                                                                                                                                  | Array            | `[]`             |
-| type                   | 地址选择类型 `exist/custom/custom2`                                                                                                             | string           | `custom`         |
-| province               | 省，每个省的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母                                                   | Array            | `[]`             |
-| city                   | 市，每个市的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母                                                   | Array            | `[]`             |
-| country                | 县，每个县的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母                                                   | Array            | `[]`             |
-| town                   | 乡/镇，每个乡/镇的对象中,必须有 `name` 字段,如果类型选择 `custom2`，必须指定 `title` 字段为首字母                                               | Array            | `[]`             |
-| height                 | 弹层中内容容器的高度，仅在 `type="custom2"` 时有效                                                                                              | string \| number | `200px`          |
-| exist-address          | 已存在地址列表，每个地址对象中，必传值 `provinceName`、`cityName`、`countyName`、`townName`、`addressDetail`、`selectedAddress`（字段解释见下） | Array            | `[]`             |
-| is-show-custom-address | 是否可以切换自定义地址选择，`type=‘exist’` 时生效                                                                                               | boolean          | `true`           |
-| custom-address-title   | 自定义地址选择文案，`type='custom'` 时生效                                                                                                      | string           | `请选择所在地区` |
-| exist-address-title    | 已有地址文案 ，`type=‘exist’` 时生效                                                                                                            | string           | `配送至`         |
-| custom-and-exist-title | 自定义地址与已有地址切换按钮文案 ，`type=‘exist’` 时生效                                                                                        | string           | `选择其他地址`   |
-| columns-placeholder    | 列提示文字                                                                                                                                      | string \| Array  | `请选择`         |
-| lock-scroll            | 背景是否锁定                                                                                                                                    | boolean          | `true`           |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:visible | 是否打开地址选择 | boolean | `false` |
+| v-model:value | 设置默认选中值 | Array | `[]` |
+| type | 地址选择类型 `exist/custom/custom2` | string | `custom` |
+| province | 省，每个省的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母 | Array | `[]` |
+| city | 市，每个市的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母 | Array | `[]` |
+| country | 县，每个县的对象中，必须有 `name` 字段，如果类型选择 `custom2`，必须指定 `title` 字段为首字母 | Array | `[]` |
+| town | 乡/镇，每个乡/镇的对象中,必须有 `name` 字段,如果类型选择 `custom2`，必须指定 `title` 字段为首字母 | Array | `[]` |
+| height | 弹层中内容容器的高度，仅在 `type="custom2"` 时有效 | string \| number | `200px` |
+| exist-address | 已存在地址列表，每个地址对象中，必传值 `provinceName`、`cityName`、`countyName`、`townName`、`addressDetail`、`selectedAddress`（字段解释见下） | Array | `[]` |
+| is-show-custom-address | 是否可以切换自定义地址选择，`type=‘exist’` 时生效 | boolean | `true` |
+| custom-address-title | 自定义地址选择文案，`type='custom'` 时生效 | string | `请选择所在地区` |
+| exist-address-title | 已有地址文案 ，`type=‘exist’` 时生效 | string | `配送至` |
+| custom-and-exist-title | 自定义地址与已有地址切换按钮文案 ，`type=‘exist’` 时生效 | string | `选择其他地址` |
+| columns-placeholder | 列提示文字 | string \| Array | `请选择` |
+| lock-scroll | 背景是否锁定 | boolean | `true` |
 
 - `provinceName` 省的名字
 - `cityName` 市的名字
@@ -606,46 +557,46 @@ app.use(Address);
 
 ### Events
 
-| 事件名        | 说明                                                 | 回调参数                          |
-| ------------- | ---------------------------------------------------- | --------------------------------- |
-| change        | 自定义选择地址时，选择地区时触发                     | 参考 `onChange`                   |
-| selected      | 选择已有地址列表时触发                               | 参考 `selected`                   |
-| close         | 地址选择弹框关闭时触发                               | 参考 `close`                      |
-| close-mask    | 点击遮罩层或点击右上角叉号关闭时触发                 | {closeWay:'mask'/'cross'}         |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 自定义选择地址时，选择地区时触发 | 参考 `onChange` |
+| selected | 选择已有地址列表时触发 | 参考 `selected` |
+| close | 地址选择弹框关闭时触发 | 参考 `close` |
+| close-mask | 点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'} |
 | switch-module | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'/'custom2'} |
 
 ### change 回调参数
 
-| 参数   | 说明                                   | 可选值                                             |
-| ------ | -------------------------------------- | -------------------------------------------------- |
-| custom | 当前点击的行政区域                     | `province(省) / city(市) / country(县) / town(乡)` |
-| next   | 当前点击的行政区域的下一级             | `province(省) / city(市) / country(县) / town(乡)` |
-| value  | 当前点击的行政区域的值（返回传入的值） | `{}`                                               |
+| 参数 | 说明 | 可选值 |
+| --- | --- | --- |
+| custom | 当前点击的行政区域 | `province(省) / city(市) / country(县) / town(乡)` |
+| next | 当前点击的行政区域的下一级 | `province(省) / city(市) / country(县) / town(乡)` |
+| value | 当前点击的行政区域的值（返回传入的值） | `{}` |
 
 ### selected 回调参数
 
-| 参数                         | 说明                                                     | 可能值 |
-| ---------------------------- | -------------------------------------------------------- | ------ |
-| 第一个参数`（prevExistAdd）` | 选择前选中的地址                                         | `{}`   |
-| 第二个参数`（nowExistAdd）`  | 当前选中的地址                                           | `{}`   |
-| 第三个参数`（arr）`          | 选择完之后的已有地址列表（`selectedAddress` 值发生改变） | `{}`   |
+| 参数 | 说明 | 可能值 |
+| --- | --- | --- |
+| 第一个参数`（prevExistAdd）` | 选择前选中的地址 | `{}` |
+| 第二个参数`（nowExistAdd）` | 当前选中的地址 | `{}` |
+| 第三个参数`（arr）` | 选择完之后的已有地址列表（`selectedAddress` 值发生改变） | `{}` |
 
 ### close 回调参数
 
-| 参数 | 说明                                                    | 可能值                 |
-| ---- | ------------------------------------------------------- | ---------------------- |
-| type | 地址选择类型 `exist/custom/custom2`                     | `exist/custom/custom2` |
-| data | 选择地址的值,`custom` 时，`addressStr` 为选择的地址组合 | `{}`                   |
+| 参数 | 说明 | 可能值 |
+| --- | --- | --- |
+| type | 地址选择类型 `exist/custom/custom2` | `exist/custom/custom2` |
+| data | 选择地址的值,`custom` 时，`addressStr` 为选择的地址组合 | `{}` |
 
 ### Slots
 
-| 名称            | 说明                                 |
-| --------------- | ------------------------------------ |
-| bottom          | 可自定义底部                         |
-| icon            | 自定义选中项的图标                   |
-| unselected-icon | 未选中地址时的图标                   |
-| close-icon      | 关闭弹层的图标                       |
-| back-icon       | 自定义地址与已有地址切换时返回的图标 |
+| 名称 | 说明 |
+| --- | --- |
+| bottom | 可自定义底部 |
+| icon | 自定义选中项的图标 |
+| unselected-icon | 未选中地址时的图标 |
+| close-icon | 关闭弹层的图标 |
+| back-icon | 自定义地址与已有地址切换时返回的图标 |
 
 ## 主题定制
 
@@ -653,17 +604,17 @@ app.use(Address);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                             | 默认值                                                                          |
-| ------------------------------------------------ | ------------------------------------------------------------------------------- |
-| --nut-address-region-tab-line                    | _linear-gradient(90deg, var(--nut-primary-color) 0%, rgba(#fa2c19, 0.15) 100%)_ |
-| --nut-address-icon-color                         | _var(--nut-primary-color)_                                                      |
-| --nut-address-header-title-font-size             | _18px_                                                                          |
-| --nut-address-header-title-color                 | _#262626_                                                                       |
-| --nut-address-region-tab-font-size               | _13px_                                                                          |
-| --nut-address-region-tab-color                   | _#1d1e1e_                                                                       |
-| --nut-address-region-tab-active-item-font-weight | _bold_                                                                          |
-| --nut-address-region-tab-line-border-radius      | _0_                                                                             |
-| --nut-address-region-tab-line-opacity            | _1_                                                                             |
-| --nut-address-region-item-color                  | _#333_                                                                          |
-| --nut-address-region-item-font-size              | _var(--nut-font-size-1)_                                                        |
-| --nut-address-item-margin-right                  | _9px_                                                                           |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-address-region-tab-line | _linear-gradient(90deg, var(--nut-primary-color) 0%, rgba(#fa2c19, 0.15) 100%)_ |
+| --nut-address-icon-color | _var(--nut-primary-color)_ |
+| --nut-address-header-title-font-size | _18px_ |
+| --nut-address-header-title-color | _#262626_ |
+| --nut-address-region-tab-font-size | _13px_ |
+| --nut-address-region-tab-color | _#1d1e1e_ |
+| --nut-address-region-tab-active-item-font-weight | _bold_ |
+| --nut-address-region-tab-line-border-radius | _0_ |
+| --nut-address-region-tab-line-opacity | _1_ |
+| --nut-address-region-item-color | _#333_ |
+| --nut-address-region-item-font-size | _var(--nut-font-size-1)_ |
+| --nut-address-item-margin-right | _9px_ |
diff --git a/src/packages/__VUE/addresslist/demo.vue b/src/packages/__VUE/addresslist/demo.vue
index 060b86a63e..0be60823de 100644
--- a/src/packages/__VUE/addresslist/demo.vue
+++ b/src/packages/__VUE/addresslist/demo.vue
@@ -40,89 +40,69 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { reactive, ref, defineComponent } from 'vue';
+import { reactive, ref } from 'vue';
 const { translate } = createComponent('address-list');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '长按功能',
-      title2: '滑动功能'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Long Press Function',
-      title2: 'Swipe Function'
-    }
-  });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const data = ref([
-      {
-        testid: 3,
-        testaddressName: '姓名',
-        phone: '123****4567',
-        defaultAddress: false,
-        fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-      },
-      {
-        testid: 4,
-        testaddressName: '姓名',
-        phone: '123****4567',
-        defaultAddress: true,
-        fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-      }
-    ]);
-    const dataOptions = reactive({
-      id: 'testid',
-      addressDetail: 'testaddressDetail',
-      addressName: 'testaddressName'
-    });
-
-    const clickItem = () => {
-      console.log('Click To Address');
-    };
-    const delClick = () => {
-      console.log('Click To Delete');
-    };
-    const editClick = () => {
-      console.log('Click To Edit');
-    };
-    const copyClick = () => {
-      console.log('Click To Copy');
-    };
-    const setClick = () => {
-      console.log('Click On Settings');
-    };
-    const delClickLong = () => {
-      console.log('Click On DelClickLong');
-    };
-    const delClickSwipe = () => {
-      console.log('Click On DelClickSwipe');
-    };
-    const addAddress = () => {
-      console.log('Click To Add');
-    };
-    return {
-      data,
-      clickItem,
-      delClick,
-      editClick,
-      copyClick,
-      setClick,
-      delClickLong,
-      delClickSwipe,
-      addAddress,
-      dataOptions,
-      translate
-    };
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '长按功能',
+    title2: '滑动功能'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Long Press Function',
+    title2: 'Swipe Function'
+  }
+});
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
   }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
 });
+
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
+const copyClick = () => {
+  console.log('Click To Copy');
+};
+const setClick = () => {
+  console.log('Click On Settings');
+};
+const delClickLong = () => {
+  console.log('Click On DelClickLong');
+};
+const delClickSwipe = () => {
+  console.log('Click On DelClickSwipe');
+};
+const addAddress = () => {
+  console.log('Click To Add');
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/addresslist/doc.en-US.md b/src/packages/__VUE/addresslist/doc.en-US.md
index a85e78517c..f32e152a15 100644
--- a/src/packages/__VUE/addresslist/doc.en-US.md
+++ b/src/packages/__VUE/addresslist/doc.en-US.md
@@ -6,7 +6,7 @@ It is mainly used to display and operate the address list.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { AddressList } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(AddressList);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-address-list
     :data="data"
@@ -30,49 +30,38 @@ app.use(AddressList);
   >
   </nut-address-list>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const data = ref([
-        {
-          testid: 3,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: false,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        },
-        {
-          testid: 4,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: true,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        }
-      ]);
-      const dataOptions = reactive({
-        id: 'testid',
-        addressDetail: 'testaddressDetail',
-        addressName: 'testaddressName'
-      });
-      const clickItem = () => {
-        console.log('Click To Address');
-      };
-      const delClick = () => {
-        console.log('Click To Delete');
-      };
-      const editClick = () => {
-        console.log('Click To Edit');
-      };
-      return {
-        data,
-        clickItem,
-        delClick,
-        editClick,
-        dataOptions
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
 </script>
 ```
 
@@ -82,7 +71,7 @@ app.use(AddressList);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-address-list
     :data="data"
@@ -98,61 +87,47 @@ app.use(AddressList);
   >
   </nut-address-list>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const data = ref([
-        {
-          testid: 3,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: false,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        },
-        {
-          testid: 4,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: true,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        }
-      ]);
-      const dataOptions = reactive({
-        id: 'testid',
-        addressDetail: 'testaddressDetail',
-        addressName: 'testaddressName'
-      });
-      const clickItem = () => {
-        console.log('Click To Address');
-      };
-      const delClick = () => {
-        console.log('Click To Delete');
-      };
-      const editClick = () => {
-        console.log('Click To Edit');
-      };
-      const copyClick = () => {
-        console.log('Click To Copy');
-      };
-      const setClick = () => {
-        console.log('Click On Settings');
-      };
-      const delClickLong = () => {
-        console.log('Click To Add');
-      };
-      return {
-        data,
-        clickItem,
-        delClick,
-        editClick,
-        copyClick,
-        setClick,
-        delClickLong,
-        dataOptions
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
+const copyClick = () => {
+  console.log('Click To Copy');
+};
+const setClick = () => {
+  console.log('Click On Settings');
+};
+const delClickLong = () => {
+  console.log('Click To Add');
+};
 </script>
 ```
 
@@ -162,7 +137,7 @@ app.use(AddressList);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-address-list
     :data="data"
@@ -177,57 +152,44 @@ app.use(AddressList);
   >
   </nut-address-list>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const data = ref([
-        {
-          testid: 3,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: false,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        },
-        {
-          testid: 4,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: true,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        }
-      ]);
-      const dataOptions = reactive({
-        id: 'testid',
-        addressDetail: 'testaddressDetail',
-        addressName: 'testaddressName'
-      });
-      const clickItem = () => {
-        console.log('Click To Address');
-      };
-      const editClick = () => {
-        console.log('Click To Edit');
-      };
-      const delClick = () => {
-        console.log('Click To Delete');
-      };
-      const delClickSwipe = () => {
-        console.log('Click On DelClickSwipe');
-      };
-      const addAddress = () => {
-        console.log('Click To Add');
-      };
-      return {
-        data,
-        clickItem,
-        delClick,
-        editClick,
-        delClickSwipe,
-        addAddress,
-        dataOptions
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const delClickSwipe = () => {
+  console.log('Click On DelClickSwipe');
+};
+const addAddress = () => {
+  console.log('Click To Add');
+};
 </script>
 ```
 
@@ -237,38 +199,38 @@ app.use(AddressList);
 
 ### Props
 
-| Attribute          | Description                                                    | Type    | Default |
-| ------------------ | -------------------------------------------------------------- | ------- | ------- |
-| data               | Address array                                                  | Array   | -       |
-| long-press         | Long Press Function                                            | boolean | `false` |
-| swipe-edition      | Swipe right                                                    | boolean | `false` |
-| show-bottom-button | Whether to show the bottom button                              | boolean | `true`  |
-| data-options       | When customizing the `key` value, set the mapping relationship |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| data | Address array | Array | - |
+| long-press | Long Press Function | boolean | `false` |
+| swipe-edition | Swipe right | boolean | `false` |
+| show-bottom-button | Whether to show the bottom button | boolean | `true` |
+| data-options | When customizing the `key` value, set the mapping relationship |
 
 ### Events
 
-| Event      | Description                                | Arguments         | Remark                                |
-| ---------- | ------------------------------------------ | ----------------- | ------------------------------------- |
-| del-icon   | Click the delete icon                      | event: Event,item | public                                |
-| edit-icon  | Click the edit icon                        | event: Event,item | public                                |
-| click-item | Click on each item in the address list     | event: Event,item | public                                |
-| add        | Click the Add Address button at the bottom | event: Event      | public                                |
-| long-copy  | Click the Copy Address button              | event: Event,item | Click event under long press function |
-| long-set   | Click the Set Default button               | event: Event,item | Click event under long press function |
-| long-del   | Click the Delete Address button            | event: Event,item | Click event under long press function |
-| swipe-del  | Default right swipe delete button          | event: Event,item | Click event under swipe function      |
+| Event | Description | Arguments | Remark |
+| --- | --- | --- | --- |
+| del-icon | Click the delete icon | event: Event,item | public |
+| edit-icon | Click the edit icon | event: Event,item | public |
+| click-item | Click on each item in the address list | event: Event,item | public |
+| add | Click the Add Address button at the bottom | event: Event | public |
+| long-copy | Click the Copy Address button | event: Event,item | Click event under long press function |
+| long-set | Click the Set Default button | event: Event,item | Click event under long press function |
+| long-del | Click the Delete Address button | event: Event,item | Click event under long press function |
+| swipe-del | Default right swipe delete button | event: Event,item | Click event under swipe function |
 
 ### Slots
 
 The `AddressList` component is divided into several areas by default, and these areas are defined as slots, which can be replaced as needed
 
-| Name           | Description                                     | Slots      |
-| -------------- | ----------------------------------------------- | ---------- |
-| item-infos     | Address list item name/contact/default one line | `{ item }` |
-| item-icon      | address list item icon                          | `{ item }` |
-| item-addr      | Address list item detailed address              | `{ item }` |
-| swipe-right    | Address list item right swipe area              | `{ item }` |
-| longpress-btns | Address list item long press to mask content    | `{ item }` |
+| Name | Description | Slots |
+| --- | --- | --- |
+| item-infos | Address list item name/contact/default one line | `{ item }` |
+| item-icon | address list item icon | `{ item }` |
+| item-addr | Address list item detailed address | `{ item }` |
+| swipe-right | Address list item right swipe area | `{ item }` |
+| longpress-btns | Address list item long press to mask content | `{ item }` |
 
 ### Each item in the data array is smoothed with the parameters of the dataOptions object
 
@@ -300,16 +262,16 @@ const dataOptions = {
 
 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-addresslist-bg                      | _#fff_                     |
-| --nut-addresslist-border                  | _#f0f0f0_                  |
-| --nut-addresslist-font-color              | _#333333_                  |
-| --nut-addresslist-font-size               | _16px_                     |
-| --nut-addresslist-mask-bg                 | _rgba(0, 0, 0, 0.4)_       |
-| --nut-addresslist-addr-font-color         | _#666666_                  |
-| --nut-addresslist-addr-font-size          | _12px_                     |
-| --nut-addresslist-set-bg                  | _#f5a623_                  |
-| --nut-addresslist-del-bg                  | _#e1251b_                  |
+| Name | Default Value |
+| --- | --- |
+| --nut-addresslist-bg | _#fff_ |
+| --nut-addresslist-border | _#f0f0f0_ |
+| --nut-addresslist-font-color | _#333333_ |
+| --nut-addresslist-font-size | _16px_ |
+| --nut-addresslist-mask-bg | _rgba(0, 0, 0, 0.4)_ |
+| --nut-addresslist-addr-font-color | _#666666_ |
+| --nut-addresslist-addr-font-size | _12px_ |
+| --nut-addresslist-set-bg | _#f5a623_ |
+| --nut-addresslist-del-bg | _#e1251b_ |
 | --nut-addresslist-contnts-contact-default | _var(--nut-primary-color)_ |
-| --nut-addresslist-contnts-contact-color   | _var(--nut-white)_         |
+| --nut-addresslist-contnts-contact-color | _var(--nut-white)_ |
diff --git a/src/packages/__VUE/addresslist/doc.md b/src/packages/__VUE/addresslist/doc.md
index e4ad5901dc..e34e97a4ec 100644
--- a/src/packages/__VUE/addresslist/doc.md
+++ b/src/packages/__VUE/addresslist/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { AddressList } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(AddressList);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-address-list
     :data="data"
@@ -30,49 +30,38 @@ app.use(AddressList);
   >
   </nut-address-list>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const data = ref([
-        {
-          testid: 3,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: false,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        },
-        {
-          testid: 4,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: true,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        }
-      ]);
-      const dataOptions = reactive({
-        id: 'testid',
-        addressDetail: 'testaddressDetail',
-        addressName: 'testaddressName'
-      });
-      const clickItem = () => {
-        console.log('Click To Address');
-      };
-      const delClick = () => {
-        console.log('Click To Delete');
-      };
-      const editClick = () => {
-        console.log('Click To Edit');
-      };
-      return {
-        data,
-        clickItem,
-        delClick,
-        editClick,
-        dataOptions
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
 </script>
 ```
 
@@ -82,7 +71,7 @@ app.use(AddressList);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-address-list
     :data="data"
@@ -98,61 +87,47 @@ app.use(AddressList);
   >
   </nut-address-list>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const data = ref([
-        {
-          testid: 3,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: false,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        },
-        {
-          testid: 4,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: true,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        }
-      ]);
-      const dataOptions = reactive({
-        id: 'testid',
-        addressDetail: 'testaddressDetail',
-        addressName: 'testaddressName'
-      });
-      const clickItem = () => {
-        console.log('Click To Address');
-      };
-      const delClick = () => {
-        console.log('Click To Delete');
-      };
-      const editClick = () => {
-        console.log('Click To Edit');
-      };
-      const copyClick = () => {
-        console.log('Click To Copy');
-      };
-      const setClick = () => {
-        console.log('Click On Settings');
-      };
-      const delClickLong = () => {
-        console.log('Click To Add');
-      };
-      return {
-        data,
-        clickItem,
-        delClick,
-        editClick,
-        copyClick,
-        setClick,
-        delClickLong,
-        dataOptions
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
+const copyClick = () => {
+  console.log('Click To Copy');
+};
+const setClick = () => {
+  console.log('Click On Settings');
+};
+const delClickLong = () => {
+  console.log('Click To Add');
+};
 </script>
 ```
 
@@ -162,7 +137,7 @@ app.use(AddressList);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-address-list
     :data="data"
@@ -177,57 +152,44 @@ app.use(AddressList);
   >
   </nut-address-list>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const data = ref([
-        {
-          testid: 3,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: false,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        },
-        {
-          testid: 4,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: true,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        }
-      ]);
-      const dataOptions = reactive({
-        id: 'testid',
-        addressDetail: 'testaddressDetail',
-        addressName: 'testaddressName'
-      });
-      const clickItem = () => {
-        console.log('Click To Address');
-      };
-      const editClick = () => {
-        console.log('Click To Edit');
-      };
-      const delClick = () => {
-        console.log('Click To Delete');
-      };
-      const delClickSwipe = () => {
-        console.log('Click On DelClickSwipe');
-      };
-      const addAddress = () => {
-        console.log('Click To Add');
-      };
-      return {
-        data,
-        clickItem,
-        delClick,
-        editClick,
-        delClickSwipe,
-        addAddress,
-        dataOptions
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const delClickSwipe = () => {
+  console.log('Click On DelClickSwipe');
+};
+const addAddress = () => {
+  console.log('Click To Add');
+};
 </script>
 ```
 
@@ -237,38 +199,38 @@ app.use(AddressList);
 
 ### Props
 
-| 参数               | 说明                            | 类型    | 默认值  |
-| ------------------ | ------------------------------- | ------- | ------- |
-| data               | 地址数组                        | Array   | -       |
-| long-press         | 长按功能                        | boolean | `false` |
-| swipe-edition      | 右滑功能                        | boolean | `false` |
-| show-bottom-button | 是否展示底部按钮                | boolean | `true`  |
-| data-options       | 自定义 `key` 值时，设置映射关系 | Object  | -       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| data | 地址数组 | Array | - |
+| long-press | 长按功能 | boolean | `false` |
+| swipe-edition | 右滑功能 | boolean | `false` |
+| show-bottom-button | 是否展示底部按钮 | boolean | `true` |
+| data-options | 自定义 `key` 值时，设置映射关系 | Object | - |
 
 ### Events
 
-| 事件名     | 说明                 | 回调参数          | 备注               |
-| ---------- | -------------------- | ----------------- | ------------------ |
-| del-icon   | 点击删除图标         | event: Event,item | 公共               |
-| edit-icon  | 点击编辑图标         | event: Event,item | 公共               |
-| click-item | 点击地址列表每一项   | event: Event,item | 公共               |
-| add        | 点击底部添加地址按钮 | event: Event      | 公共               |
-| long-copy  | 点击复制地址按钮     | event: Event,item | 长按功能下点击事件 |
-| long-set   | 点击设置默认按钮     | event: Event,item | 长按功能下点击事件 |
-| long-del   | 点击删除地址按钮     | event: Event,item | 长按功能下点击事件 |
-| swipe-del  | 默认右滑删除按钮     | event: Event,item | 滑动功能下点击事件 |
+| 事件名 | 说明 | 回调参数 | 备注 |
+| --- | --- | --- | --- |
+| del-icon | 点击删除图标 | event: Event,item | 公共 |
+| edit-icon | 点击编辑图标 | event: Event,item | 公共 |
+| click-item | 点击地址列表每一项 | event: Event,item | 公共 |
+| add | 点击底部添加地址按钮 | event: Event | 公共 |
+| long-copy | 点击复制地址按钮 | event: Event,item | 长按功能下点击事件 |
+| long-set | 点击设置默认按钮 | event: Event,item | 长按功能下点击事件 |
+| long-del | 点击删除地址按钮 | event: Event,item | 长按功能下点击事件 |
+| swipe-del | 默认右滑删除按钮 | event: Event,item | 滑动功能下点击事件 |
 
 ### Slots
 
 `AddressList` 组件默认划分为若干区域，这些区域都定义成了插槽，可以按照需求进行替换
 
-| 名称           | 说明                             | 作用域参数 |
-| -------------- | -------------------------------- | ---------- |
-| item-infos     | 地址列表项姓名/联系方式/默认一行 | `{ item }` |
-| item-icon      | 地址列表项图标                   | `{ item }` |
-| item-addr      | 地址列表项详细地址               | `{ item }` |
-| swipe-right    | 地址列表项右滑区域               | `{ item }` |
-| longpress-btns | 地址列表项长按遮罩内容           | `{ item }` |
+| 名称 | 说明 | 作用域参数 |
+| --- | --- | --- |
+| item-infos | 地址列表项姓名/联系方式/默认一行 | `{ item }` |
+| item-icon | 地址列表项图标 | `{ item }` |
+| item-addr | 地址列表项详细地址 | `{ item }` |
+| swipe-right | 地址列表项右滑区域 | `{ item }` |
+| longpress-btns | 地址列表项长按遮罩内容 | `{ item }` |
 
 ### data 数组中每一项 与 dataOptions 对象的参数磨平
 
@@ -300,16 +262,16 @@ const dataOptions = {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                      | 默认值                     |
-| ----------------------------------------- | -------------------------- |
-| --nut-addresslist-bg                      | _#fff_                     |
-| --nut-addresslist-border                  | _#f0f0f0_                  |
-| --nut-addresslist-font-color              | _#333333_                  |
-| --nut-addresslist-font-size               | _16px_                     |
-| --nut-addresslist-mask-bg                 | _rgba(0, 0, 0, 0.4)_       |
-| --nut-addresslist-addr-font-color         | _#666666_                  |
-| --nut-addresslist-addr-font-size          | _12px_                     |
-| --nut-addresslist-set-bg                  | _#f5a623_                  |
-| --nut-addresslist-del-bg                  | _#e1251b_                  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-addresslist-bg | _#fff_ |
+| --nut-addresslist-border | _#f0f0f0_ |
+| --nut-addresslist-font-color | _#333333_ |
+| --nut-addresslist-font-size | _16px_ |
+| --nut-addresslist-mask-bg | _rgba(0, 0, 0, 0.4)_ |
+| --nut-addresslist-addr-font-color | _#666666_ |
+| --nut-addresslist-addr-font-size | _12px_ |
+| --nut-addresslist-set-bg | _#f5a623_ |
+| --nut-addresslist-del-bg | _#e1251b_ |
 | --nut-addresslist-contnts-contact-default | _var(--nut-primary-color)_ |
-| --nut-addresslist-contnts-contact-color   | _var(--nut-white)_         |
+| --nut-addresslist-contnts-contact-color | _var(--nut-white)_ |
diff --git a/src/packages/__VUE/addresslist/doc.taro.md b/src/packages/__VUE/addresslist/doc.taro.md
index ba7138e83f..a33b2d3cb2 100644
--- a/src/packages/__VUE/addresslist/doc.taro.md
+++ b/src/packages/__VUE/addresslist/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { AddressList } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(AddressList);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-address-list
     :data="data"
@@ -30,49 +30,38 @@ app.use(AddressList);
   >
   </nut-address-list>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const data = ref([
-        {
-          testid: 3,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: false,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        },
-        {
-          testid: 4,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: true,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        }
-      ]);
-      const dataOptions = reactive({
-        id: 'testid',
-        addressDetail: 'testaddressDetail',
-        addressName: 'testaddressName'
-      });
-      const clickItem = () => {
-        console.log('Click To Address');
-      };
-      const delClick = () => {
-        console.log('Click To Delete');
-      };
-      const editClick = () => {
-        console.log('Click To Edit');
-      };
-      return {
-        data,
-        clickItem,
-        delClick,
-        editClick,
-        dataOptions
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
 </script>
 ```
 
@@ -82,7 +71,7 @@ app.use(AddressList);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-address-list
     :data="data"
@@ -98,61 +87,47 @@ app.use(AddressList);
   >
   </nut-address-list>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const data = ref([
-        {
-          testid: 3,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: false,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        },
-        {
-          testid: 4,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: true,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        }
-      ]);
-      const dataOptions = reactive({
-        id: 'testid',
-        addressDetail: 'testaddressDetail',
-        addressName: 'testaddressName'
-      });
-      const clickItem = () => {
-        console.log('Click To Address');
-      };
-      const delClick = () => {
-        console.log('Click To Delete');
-      };
-      const editClick = () => {
-        console.log('Click To Edit');
-      };
-      const copyClick = () => {
-        console.log('Click To Copy');
-      };
-      const setClick = () => {
-        console.log('Click On Settings');
-      };
-      const delClickLong = () => {
-        console.log('Click To Add');
-      };
-      return {
-        data,
-        clickItem,
-        delClick,
-        editClick,
-        copyClick,
-        setClick,
-        delClickLong,
-        dataOptions
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
+const copyClick = () => {
+  console.log('Click To Copy');
+};
+const setClick = () => {
+  console.log('Click On Settings');
+};
+const delClickLong = () => {
+  console.log('Click To Add');
+};
 </script>
 ```
 
@@ -162,7 +137,7 @@ app.use(AddressList);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-address-list
     :data="data"
@@ -177,57 +152,44 @@ app.use(AddressList);
   >
   </nut-address-list>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const data = ref([
-        {
-          testid: 3,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: false,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        },
-        {
-          testid: 4,
-          testaddressName: '姓名',
-          phone: '123****4567',
-          defaultAddress: true,
-          fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
-        }
-      ]);
-      const dataOptions = reactive({
-        id: 'testid',
-        addressDetail: 'testaddressDetail',
-        addressName: 'testaddressName'
-      });
-      const clickItem = () => {
-        console.log('Click To Address');
-      };
-      const editClick = () => {
-        console.log('Click To Edit');
-      };
-      const delClick = () => {
-        console.log('Click To Delete');
-      };
-      const delClickSwipe = () => {
-        console.log('Click On DelClickSwipe');
-      };
-      const addAddress = () => {
-        console.log('Click To Add');
-      };
-      return {
-        data,
-        clickItem,
-        delClick,
-        editClick,
-        delClickSwipe,
-        addAddress,
-        dataOptions
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const data = ref([
+  {
+    testid: 3,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: false,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  },
+  {
+    testid: 4,
+    testaddressName: '姓名',
+    phone: '123****4567',
+    defaultAddress: true,
+    fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
+  }
+]);
+const dataOptions = reactive({
+  id: 'testid',
+  addressDetail: 'testaddressDetail',
+  addressName: 'testaddressName'
+});
+const clickItem = () => {
+  console.log('Click To Address');
+};
+const editClick = () => {
+  console.log('Click To Edit');
+};
+const delClick = () => {
+  console.log('Click To Delete');
+};
+const delClickSwipe = () => {
+  console.log('Click On DelClickSwipe');
+};
+const addAddress = () => {
+  console.log('Click To Add');
+};
 </script>
 ```
 
@@ -237,38 +199,38 @@ app.use(AddressList);
 
 ### Props
 
-| 参数               | 说明                            | 类型    | 默认值  |
-| ------------------ | ------------------------------- | ------- | ------- |
-| data               | 地址数组                        | Array   | -       |
-| long-press         | 长按功能                        | boolean | `false` |
-| swipe-edition      | 右滑功能                        | boolean | `false` |
-| show-bottom-button | 是否展示底部按钮                | boolean | `true`  |
-| data-options       | 自定义 `key` 值时，设置映射关系 | Object  | -       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| data | 地址数组 | Array | - |
+| long-press | 长按功能 | boolean | `false` |
+| swipe-edition | 右滑功能 | boolean | `false` |
+| show-bottom-button | 是否展示底部按钮 | boolean | `true` |
+| data-options | 自定义 `key` 值时，设置映射关系 | Object | - |
 
 ### Events
 
-| 事件名     | 说明                 | 回调参数          | 备注               |
-| ---------- | -------------------- | ----------------- | ------------------ |
-| del-icon   | 点击删除图标         | event: Event,item | 公共               |
-| edit-icon  | 点击编辑图标         | event: Event,item | 公共               |
-| click-item | 点击地址列表每一项   | event: Event,item | 公共               |
-| add        | 点击底部添加地址按钮 | event: Event      | 公共               |
-| long-copy  | 点击复制地址按钮     | event: Event,item | 长按功能下点击事件 |
-| long-set   | 点击设置默认按钮     | event: Event,item | 长按功能下点击事件 |
-| long-del   | 点击删除地址按钮     | event: Event,item | 长按功能下点击事件 |
-| swipe-del  | 默认右滑删除按钮     | event: Event,item | 滑动功能下点击事件 |
+| 事件名 | 说明 | 回调参数 | 备注 |
+| --- | --- | --- | --- |
+| del-icon | 点击删除图标 | event: Event,item | 公共 |
+| edit-icon | 点击编辑图标 | event: Event,item | 公共 |
+| click-item | 点击地址列表每一项 | event: Event,item | 公共 |
+| add | 点击底部添加地址按钮 | event: Event | 公共 |
+| long-copy | 点击复制地址按钮 | event: Event,item | 长按功能下点击事件 |
+| long-set | 点击设置默认按钮 | event: Event,item | 长按功能下点击事件 |
+| long-del | 点击删除地址按钮 | event: Event,item | 长按功能下点击事件 |
+| swipe-del | 默认右滑删除按钮 | event: Event,item | 滑动功能下点击事件 |
 
 ### Slots
 
 `AddressList` 组件默认划分为若干区域，这些区域都定义成了插槽，可以按照需求进行替换
 
-| 名称           | 说明                             | 作用域参数 |
-| -------------- | -------------------------------- | ---------- |
-| item-infos     | 地址列表项姓名/联系方式/默认一行 | `{ item }` |
-| item-icon      | 地址列表项图标                   | `{ item }` |
-| item-addr      | 地址列表项详细地址               | `{ item }` |
-| swipe-right    | 地址列表项右滑区域               | `{ item }` |
-| longpress-btns | 地址列表项长按遮罩内容           | `{ item }` |
+| 名称 | 说明 | 作用域参数 |
+| --- | --- | --- |
+| item-infos | 地址列表项姓名/联系方式/默认一行 | `{ item }` |
+| item-icon | 地址列表项图标 | `{ item }` |
+| item-addr | 地址列表项详细地址 | `{ item }` |
+| swipe-right | 地址列表项右滑区域 | `{ item }` |
+| longpress-btns | 地址列表项长按遮罩内容 | `{ item }` |
 
 ### data 数组中每一项 与 dataOptions 对象的参数磨平
 
@@ -300,16 +262,16 @@ const dataOptions = {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                      | 默认值                     |
-| ----------------------------------------- | -------------------------- |
-| --nut-addresslist-bg                      | _#fff_                     |
-| --nut-addresslist-border                  | _#f0f0f0_                  |
-| --nut-addresslist-font-color              | _#333333_                  |
-| --nut-addresslist-font-size               | _16px_                     |
-| --nut-addresslist-mask-bg                 | _rgba(0, 0, 0, 0.4)_       |
-| --nut-addresslist-addr-font-color         | _#666666_                  |
-| --nut-addresslist-addr-font-size          | _12px_                     |
-| --nut-addresslist-set-bg                  | _#f5a623_                  |
-| --nut-addresslist-del-bg                  | _#e1251b_                  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-addresslist-bg | _#fff_ |
+| --nut-addresslist-border | _#f0f0f0_ |
+| --nut-addresslist-font-color | _#333333_ |
+| --nut-addresslist-font-size | _16px_ |
+| --nut-addresslist-mask-bg | _rgba(0, 0, 0, 0.4)_ |
+| --nut-addresslist-addr-font-color | _#666666_ |
+| --nut-addresslist-addr-font-size | _12px_ |
+| --nut-addresslist-set-bg | _#f5a623_ |
+| --nut-addresslist-del-bg | _#e1251b_ |
 | --nut-addresslist-contnts-contact-default | _var(--nut-primary-color)_ |
-| --nut-addresslist-contnts-contact-color   | _var(--nut-white)_         |
+| --nut-addresslist-contnts-contact-color | _var(--nut-white)_ |
diff --git a/src/packages/__VUE/barrage/demo.vue b/src/packages/__VUE/barrage/demo.vue
index 2bb50f618f..fac77fda73 100644
--- a/src/packages/__VUE/barrage/demo.vue
+++ b/src/packages/__VUE/barrage/demo.vue
@@ -19,44 +19,29 @@
   </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('barrage');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      slotTitle: 'slot 用法',
-      btn1: '随机添加'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      slotTitle: 'slot usage',
-      btn1: 'Random addition'
-    }
-  });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const inputVal = ref('');
-    const danmu = ref();
-    let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']);
-    function addDanmu() {
-      let n = Math.random();
-      danmu.value.add('随机——' + String(n).substr(2, 10));
-    }
-    return {
-      inputVal,
-      danmu,
-      list,
-      addDanmu,
-      translate
-    };
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    slotTitle: 'slot 用法',
+    btn1: '随机添加'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    slotTitle: 'slot usage',
+    btn1: 'Random addition'
   }
 });
+const danmu = ref();
+let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']);
+function addDanmu() {
+  let n = Math.random();
+  danmu.value.add('随机——' + String(n).substr(2, 10));
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/barrage/doc.en-US.md b/src/packages/__VUE/barrage/doc.en-US.md
index 570f4a49cc..d7347fce65 100644
--- a/src/packages/__VUE/barrage/doc.en-US.md
+++ b/src/packages/__VUE/barrage/doc.en-US.md
@@ -6,7 +6,7 @@ It is used for the rotation display of words and phrases, which is suitable for
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Barrage } from '@nutui/nutui';
 
@@ -19,33 +19,21 @@ app.use(Barrage);
 `Icon's' name 'attribute supports the incoming icon name or picture link.
 :::demo
 
-```html
+```vue
 <template>
   <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
   <div class="test">
     <button @click="addDanmu" class="add nut-button--primary">add randomly</button>
   </div>
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const inputVal = ref('');
-      const danmu = ref();
-      let list = ref(['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee', 'ffff']);
-      function addDanmu() {
-        let n = Math.random();
-        danmu.value.add('randomly——' + String(n).substr(2, 10));
-      }
-      return {
-        inputVal,
-        danmu,
-        list,
-        addDanmu
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const danmu = ref();
+let list = ref(['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee', 'ffff']);
+function addDanmu() {
+  let n = Math.random();
+  danmu.value.add('randomly——' + String(n).substr(2, 10));
+}
 </script>
 ```
 
@@ -57,7 +45,7 @@ app.use(Barrage);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-barrage>
     <span>aaa</span>
@@ -74,17 +62,17 @@ app.use(Barrage);
 
 ### Props
 
-| Parameter | Description                                                 | Type    | Default |
-| --------- | ----------------------------------------------------------- | ------- | ------- |
-| danmu     | Danmaku list data                                           | Array   | `[]`    |
-| frequency | the time interval of each barrage in the visible area       | number  | `500`   |
-| speeds    | scrolling time of each barrage                              | number  | `5000`  |
-| rows      | Number of bullet chatting lines, displayed in several lines | number  | `3`     |
-| top       | vertical distance of the barrage                            | number  | `10`    |
-| loop      | Whether to play in a loop                                   | boolean | `true`  |
+| Parameter | Description | Type | Default |
+| --- | --- | --- | --- |
+| danmu | Danmaku list data | Array | `[]` |
+| frequency | the time interval of each barrage in the visible area | number | `500` |
+| speeds | scrolling time of each barrage | number | `5000` |
+| rows | Number of bullet chatting lines, displayed in several lines | number | `3` |
+| top | vertical distance of the barrage | number | `10` |
+| loop | Whether to play in a loop | boolean | `true` |
 
 ### Events
 
-| Event Name | Description                     | Callback Parameters |
-| ---------- | ------------------------------- | ------------------- |
-| add        | add data(used via ref instance) | -                   |
+| Event Name | Description | Callback Parameters |
+| --- | --- | --- |
+| add | add data(used via ref instance) | - |
diff --git a/src/packages/__VUE/barrage/doc.md b/src/packages/__VUE/barrage/doc.md
index f67ef0da5d..7545d2a47f 100644
--- a/src/packages/__VUE/barrage/doc.md
+++ b/src/packages/__VUE/barrage/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Barrage } from '@nutui/nutui';
 
@@ -18,33 +18,21 @@ app.use(Barrage);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
   <div class="test">
     <button @click="addDanmu" class="add nut-button--primary">随机添加</button>
   </div>
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const inputVal = ref('');
-      const danmu = ref();
-      let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
-      function addDanmu() {
-        let n = Math.random();
-        danmu.value.add('随机——' + String(n).substr(2, 10));
-      }
-      return {
-        inputVal,
-        danmu,
-        list,
-        addDanmu
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const danmu = ref();
+let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
+function addDanmu() {
+  let n = Math.random();
+  danmu.value.add('随机——' + String(n).substr(2, 10));
+}
 </script>
 ```
 
@@ -56,7 +44,7 @@ app.use(Barrage);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-barrage>
     <span>aaa</span>
@@ -73,17 +61,17 @@ app.use(Barrage);
 
 ### Props
 
-| 参数      | 说明                             | 类型    | 默认值 |
-| --------- | -------------------------------- | ------- | ------ |
-| danmu     | 弹幕列表数据                     | Array   | `[]`   |
-| frequency | 可视区域内每个弹幕出现的时间间隔 | number  | `500`  |
-| speeds    | 每个弹幕的滚动时间               | number  | `5000` |
-| rows      | 弹幕行数，分几行展示             | number  | `3`    |
-| top       | 弹幕垂直距离                     | number  | `10`   |
-| loop      | 是否循环播放                     | boolean | `true` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| danmu | 弹幕列表数据 | Array | `[]` |
+| frequency | 可视区域内每个弹幕出现的时间间隔 | number | `500` |
+| speeds | 每个弹幕的滚动时间 | number | `5000` |
+| rows | 弹幕行数，分几行展示 | number | `3` |
+| top | 弹幕垂直距离 | number | `10` |
+| loop | 是否循环播放 | boolean | `true` |
 
 ### Events
 
-| 事件名 | 说明                        | 回调参数 |
-| ------ | --------------------------- | -------- |
-| add    | 添加数据(通过 ref 实例使用) | -        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| add | 添加数据(通过 ref 实例使用) | - |
diff --git a/src/packages/__VUE/barrage/doc.taro.md b/src/packages/__VUE/barrage/doc.taro.md
index 6f9c2a6796..42b57323e8 100644
--- a/src/packages/__VUE/barrage/doc.taro.md
+++ b/src/packages/__VUE/barrage/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Barrage } from '@nutui/nutui-taro';
 
@@ -18,33 +18,21 @@ app.use(Barrage);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
   <div class="test">
     <button @click="addDanmu" class="add nut-button--primary">随机添加</button>
   </div>
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const inputVal = ref('');
-      const danmu = ref();
-      let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
-      function addDanmu() {
-        let n = Math.random();
-        danmu.value.add('随机——' + String(n).substr(2, 10));
-      }
-      return {
-        inputVal,
-        danmu,
-        list,
-        addDanmu
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const danmu = ref();
+let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
+function addDanmu() {
+  let n = Math.random();
+  danmu.value.add('随机——' + String(n).substr(2, 10));
+}
 </script>
 ```
 
@@ -54,17 +42,17 @@ app.use(Barrage);
 
 ### Props
 
-| 参数      | 说明                             | 类型    | 默认值 |
-| --------- | -------------------------------- | ------- | ------ |
-| danmu     | 弹幕列表数据                     | Array   | `[]`   |
-| frequency | 可视区域内每个弹幕出现的时间间隔 | number  | `500`  |
-| speeds    | 每个弹幕的滚动时间               | number  | `5000` |
-| rows      | 弹幕行数，分几行展示             | number  | `3`    |
-| top       | 弹幕垂直距离                     | number  | `10`   |
-| loop      | 是否循环播放                     | boolean | `true` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| danmu | 弹幕列表数据 | Array | `[]` |
+| frequency | 可视区域内每个弹幕出现的时间间隔 | number | `500` |
+| speeds | 每个弹幕的滚动时间 | number | `5000` |
+| rows | 弹幕行数，分几行展示 | number | `3` |
+| top | 弹幕垂直距离 | number | `10` |
+| loop | 是否循环播放 | boolean | `true` |
 
 ### Events
 
-| 事件名 | 说明                        | 回调参数 |
-| ------ | --------------------------- | -------- |
-| add    | 添加数据(通过 ref 实例使用) | -        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| add | 添加数据(通过 ref 实例使用) | - |
diff --git a/src/packages/__VUE/card/demo.vue b/src/packages/__VUE/card/demo.vue
index 056aebbc35..e3a7072b1b 100644
--- a/src/packages/__VUE/card/demo.vue
+++ b/src/packages/__VUE/card/demo.vue
@@ -75,40 +75,38 @@ import { computed, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('card');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      customProduct: '自定义商品标签',
-      customPro1: '活鲜',
-      customPro2: '礼盒',
-      customPro3: '国产',
-      title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
-      customShop: '自定义店铺介绍',
-      customFooter: '自定义右下角内容',
-      customContent: '自定义',
-      desc: '自营',
-      delivery: '厂商配送',
-      shopName: '阳澄湖大闸蟹自营店>',
-      question: '询价'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      customProduct: 'Custom prolist',
-      customPro1: 'tag',
-      customPro2: 'tag',
-      customPro3: 'tag',
-      title: 'title',
-      customShop: 'Custom Content',
-      customFooter: 'Customize bottom right content',
-      customContent: 'custom',
-      desc: 'desc',
-      delivery: 'delivery',
-      shopName: 'shopName>',
-      question: 'inquiry'
-    }
-  });
-initTranslate();
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    customProduct: '自定义商品标签',
+    customPro1: '活鲜',
+    customPro2: '礼盒',
+    customPro3: '国产',
+    title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+    customShop: '自定义店铺介绍',
+    customFooter: '自定义右下角内容',
+    customContent: '自定义',
+    desc: '自营',
+    delivery: '厂商配送',
+    shopName: '阳澄湖大闸蟹自营店>',
+    question: '询价'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    customProduct: 'Custom prolist',
+    customPro1: 'tag',
+    customPro2: 'tag',
+    customPro3: 'tag',
+    title: 'title',
+    customShop: 'Custom Content',
+    customFooter: 'Customize bottom right content',
+    customContent: 'custom',
+    desc: 'desc',
+    delivery: 'delivery',
+    shopName: 'shopName>',
+    question: 'inquiry'
+  }
+});
 const state = reactive({
   imgUrl:
     '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
diff --git a/src/packages/__VUE/category/demo.vue b/src/packages/__VUE/category/demo.vue
index 51b256e824..6da03b89a3 100644
--- a/src/packages/__VUE/category/demo.vue
+++ b/src/packages/__VUE/category/demo.vue
@@ -1,99 +1,84 @@
 <template>
   <div class="demo">
     <h2>{{ translate('title1') }}</h2>
-    <nut-category :category="category" @change="change">
-      <nut-category-pane :category-child="categoryChild1" @on-change="onChange"> </nut-category-pane>
+    <nut-category :category="data.category" @change="change">
+      <nut-category-pane :category-child="data.categoryChild1" @on-change="onChange"> </nut-category-pane>
     </nut-category>
     <h2>{{ translate('title2') }}</h2>
-    <nut-category :category="category" @change="changeText">
-      <nut-category-pane type="text" :category-child="categoryChild2" @on-change="onChange"> </nut-category-pane
+    <nut-category :category="data.category" @change="changeText">
+      <nut-category-pane type="text" :category-child="data.categoryChild2" @on-change="onChange"> </nut-category-pane
     ></nut-category>
 
     <h2>{{ translate('title3') }}</h2>
     <nut-category
-      ><nut-category-pane type="custom" :custom-category="customCategory" @on-change="changeCustom"> </nut-category-pane
+      ><nut-category-pane type="custom" :custom-category="data.customCategory" @on-change="changeCustom">
+      </nut-category-pane
     ></nut-category>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { reactive, onMounted } from 'vue';
 const { translate } = createComponent('cmt');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title1: '经典分类模式',
-      title2: '只显示文字',
-      title3: '自定义分类'
-    },
-    'en-US': {
-      title1: 'Classic Classification Mode',
-      title2: 'Show Text Only',
-      title3: 'Custom taxonomy'
-    }
-  });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const data = reactive({
-      categoryInfo1: {},
-      category: [{}],
-      categoryChild1: [{}],
-      customCategory: [{}],
-      categoryInfo2: {},
-      categoryChild2: [{}]
-    });
-
-    onMounted(() => {
-      setTimeout(() => {
-        getData();
-      }, 500);
-    });
+useTranslate({
+  'zh-CN': {
+    title1: '经典分类模式',
+    title2: '只显示文字',
+    title3: '自定义分类'
+  },
+  'en-US': {
+    title1: 'Classic Classification Mode',
+    title2: 'Show Text Only',
+    title3: 'Custom taxonomy'
+  }
+});
+const data = reactive({
+  categoryInfo1: {},
+  category: [{}],
+  categoryChild1: [{}],
+  customCategory: [{}],
+  categoryInfo2: {},
+  categoryChild2: [{}]
+});
 
-    const getData = () => {
-      fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-        .then((response) => response.json())
-        .then((res) => {
-          const { categoryInfo, categoryChild, customCategory } = res;
-          data.categoryInfo1 = categoryInfo;
-          data.category = categoryInfo.category;
-          data.categoryChild1 = categoryChild;
-          data.customCategory = customCategory;
-          data.categoryInfo2 = categoryInfo;
-          data.categoryChild2 = categoryChild;
-        })
-        .catch((err) => console.log('Oh, error', err));
-    };
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
 
-    const change = (index: any) => {
-      data.categoryChild1 = [].concat(data?.categoryInfo1?.category[index]?.children as any);
-    };
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { categoryInfo, categoryChild, customCategory } = res;
+      data.categoryInfo1 = categoryInfo;
+      data.category = categoryInfo.category;
+      data.categoryChild1 = categoryChild;
+      data.customCategory = customCategory;
+      data.categoryInfo2 = categoryInfo;
+      data.categoryChild2 = categoryChild;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
 
-    const changeText = (index: any) => {
-      data.categoryChild2 = [].concat(data.categoryInfo2.category[index].children as any);
-    };
+const change = (index: any) => {
+  data.categoryChild1 = [].concat(data?.categoryInfo1?.category[index]?.children as any);
+};
 
-    const changeCustom = (v: any) => {
-      console.log('点击分类数据:' + JSON.stringify(v));
-    };
+const changeText = (index: any) => {
+  data.categoryChild2 = [].concat(data.categoryInfo2.category[index].children as any);
+};
 
-    const onChange = (v: any) => {
-      console.log('当前分类数据:' + JSON.stringify(v));
-    };
+const changeCustom = (v: any) => {
+  console.log('点击分类数据:' + JSON.stringify(v));
+};
 
-    return {
-      change,
-      onChange,
-      changeText,
-      changeCustom,
-      ...toRefs(data),
-      translate
-    };
-  }
-});
+const onChange = (v: any) => {
+  console.log('当前分类数据:' + JSON.stringify(v));
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/category/doc.en-US.md b/src/packages/__VUE/category/doc.en-US.md
index d43fb0f613..0ec4540ebc 100644
--- a/src/packages/__VUE/category/doc.en-US.md
+++ b/src/packages/__VUE/category/doc.en-US.md
@@ -6,7 +6,7 @@ Component for displaying product categories.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Category, CategoryPane } from '@nutui/nutui';
 
@@ -22,54 +22,44 @@ data defination
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-category :category="category" @change="change">
-    <nut-category-pane :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane>
+  <nut-category :category="data.category" @change="change">
+    <nut-category-pane :categoryChild="data.categoryChild" @onChange="onChange"> </nut-category-pane>
   </nut-category>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const data = reactive({
-        categoryInfo: {},
-        category: [{}],
-        categoryChild: [{}]
-      });
-
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-
-      const getData = () => {
-        fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { categoryInfo, categoryChild } = res;
-            data.categoryInfo = categoryInfo;
-            data.category = categoryInfo.category;
-            data.categoryChild = categoryChild;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      };
-
-      const change = (index: any) => {
-        data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
-      };
-      const onChange = () => {
-        console.log('Click on current category data');
-      };
-      return {
-        onChange,
-        change,
-        ...toRefs(data)
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const data = reactive({
+  categoryInfo: {},
+  category: [{}],
+  categoryChild: [{}]
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
+
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { categoryInfo, categoryChild } = res;
+      data.categoryInfo = categoryInfo;
+      data.category = categoryInfo.category;
+      data.categoryChild = categoryChild;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
+
+const change = (index) => {
+  data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children);
+};
+const onChange = () => {
+  console.log('Click on current category data');
+};
 </script>
 ```
 
@@ -79,56 +69,46 @@ data defination
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-category :category="category" @change="changeText">
-    <nut-category-pane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane
+  <nut-category :category="data.category" @change="changeText">
+    <nut-category-pane type="text" :categoryChild="data.categoryChild" @onChange="onChange"> </nut-category-pane
   ></nut-category>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const data = reactive({
-        categoryInfo: {},
-        category: [{}],
-        categoryChild: [{}]
-      });
-
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-
-      const getData = () => {
-        fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-          .then((response) => response.json())
-          .then((res) => {
-            console.log('res', res);
-            const { categoryInfo, categoryChild } = res;
-            data.categoryInfo = categoryInfo;
-            data.category = categoryInfo.category;
-            data.categoryChild = categoryChild;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      };
-
-      const changeText = (index: any) => {
-        data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
-      };
-
-      const onChange = () => {
-        console.log('Click on current category data');
-      };
-      return {
-        changeText,
-        onChange,
-        ...toRefs(data)
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const data = reactive({
+  categoryInfo: {},
+  category: [{}],
+  categoryChild: [{}]
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
+
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      console.log('res', res);
+      const { categoryInfo, categoryChild } = res;
+      data.categoryInfo = categoryInfo;
+      data.category = categoryInfo.category;
+      data.categoryChild = categoryChild;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
+
+const changeText = (index) => {
+  data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children);
+};
+
+const onChange = () => {
+  console.log('Click on current category data');
+};
 </script>
 ```
 
@@ -138,43 +118,35 @@ data defination
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-category @change="changeCustom"
-    ><nut-category-pane type="custom" :customCategory="customCategory" @onChange="changeCustom"> </nut-category-pane
+    ><nut-category-pane type="custom" :customCategory="data.customCategory" @onChange="changeCustom">
+    </nut-category-pane
   ></nut-category>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const data = reactive({
-        customCategory: [{}]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-      const getData = () => {
-        fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { customCategory } = res;
-            data.customCategory = customCategory;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      };
-      const changeCustom = () => {
-        console.log('Click to categorize data');
-      };
-      return {
-        changeCustom,
-        ...toRefs(data)
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const data = reactive({
+  customCategory: [{}]
+});
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { customCategory } = res;
+      data.customCategory = customCategory;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
+const changeCustom = () => {
+  console.log('Click to categorize data');
+};
 </script>
 ```
 
@@ -184,36 +156,36 @@ data defination
 
 ### Category Props
 
-| Attribute | Description                                       | Type   | Default    |
-| --------- | ------------------------------------------------- | ------ | ---------- |
-| type      | Classification mode: `classify`, `text`, `custom` | string | `classify` |
-| category  | Left navigation bar data list                     | Array  | `[]`       |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| type | Classification mode: `classify`, `text`, `custom` | string | `classify` |
+| category | Left navigation bar data list | Array | `[]` |
 
 ### Category Events
 
-| Event         | Description                                                                                     | Arguments        |
-| ------------- | ----------------------------------------------------------------------------------------------- | ---------------- |
-| change        | Classic classification, click on the left navigation bar to get the data list on the right      | Clicked data     |
-| change-text   | In text classification mode, click on the left navigation bar to get the data list on the right | Input data       |
-| change-custom | Customize, click the left navigation bar to get the data list on the right                      | Current quantity |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| change | Classic classification, click on the left navigation bar to get the data list on the right | Clicked data |
+| change-text | In text classification mode, click on the left navigation bar to get the data list on the right | Input data |
+| change-custom | Customize, click the left navigation bar to get the data list on the right | Current quantity |
 
 ### CategoryPane Props
 
-| Attribute       | Description                                               | Type  | Default |
-| --------------- | --------------------------------------------------------- | ----- | ------- |
-| category-child  | The current classification data is displayed on the right | Array | `[]`    |
-| custom-category | Custom categorical data                                   | Array | `[]`    |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| category-child | The current classification data is displayed on the right | Array | `[]` |
+| custom-category | Custom categorical data | Array | `[]` |
 
 ### CategoryPane Events
 
-| Event     | Description                                | Arguments    |
-| --------- | ------------------------------------------ | ------------ |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | on-change | Click on the right classified data trigger | Clicked data |
 
 ### CategoryPane Slots
 
-| Name    | Description    |
-| ------- | -------------- |
+| Name | Description |
+| --- | --- |
 | default | Custom content |
 
 ## Theming
@@ -222,13 +194,13 @@ data defination
 
 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-category-bg-color                       | _rgba(255, 255, 255, 1)_   |
-| --nut-category-list-left-bg-color             | _rgba(246, 247, 249, 1)_   |
-| --nut-category-list-item-color                | _var(--nut-title-color)_   |
-| --nut-category-list-item-checked-color        | _rgba(255, 255, 255, 1)_   |
+| Name | Default Value |
+| --- | --- |
+| --nut-category-bg-color | _rgba(255, 255, 255, 1)_ |
+| --nut-category-list-left-bg-color | _rgba(246, 247, 249, 1)_ |
+| --nut-category-list-item-color | _var(--nut-title-color)_ |
+| --nut-category-list-item-checked-color | _rgba(255, 255, 255, 1)_ |
 | --nut-category-list-item-checked-img-bg-color | _var(--nut-primary-color)_ |
-| --nut-category-pane-gray-color                | _#666_                     |
-| --nut-category-pane-border-color              | _rgb(153, 153, 153)_       |
-| --nut-category-pane-title-color               | _rgba(51, 51, 51, 1)_      |
+| --nut-category-pane-gray-color | _#666_ |
+| --nut-category-pane-border-color | _rgb(153, 153, 153)_ |
+| --nut-category-pane-title-color | _rgba(51, 51, 51, 1)_ |
diff --git a/src/packages/__VUE/category/doc.md b/src/packages/__VUE/category/doc.md
index 470269dad8..70369914df 100644
--- a/src/packages/__VUE/category/doc.md
+++ b/src/packages/__VUE/category/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Category, CategoryPane } from '@nutui/nutui';
 
@@ -22,54 +22,44 @@ data 数据格式可参考
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-category :category="category" @change="change">
-    <nut-category-pane :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane>
+  <nut-category :category="data.category" @change="change">
+    <nut-category-pane :categoryChild="data.categoryChild" @onChange="onChange"> </nut-category-pane>
   </nut-category>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const data = reactive({
-        categoryInfo: {},
-        category: [{}],
-        categoryChild: [{}]
-      });
-
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-
-      const getData = () => {
-        fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { categoryInfo, categoryChild } = res;
-            data.categoryInfo = categoryInfo;
-            data.category = categoryInfo.category;
-            data.categoryChild = categoryChild;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      };
-
-      const change = (index: any) => {
-        data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
-      };
-      const onChange = () => {
-        console.log('当前分类数据');
-      };
-      return {
-        onChange,
-        change,
-        ...toRefs(data)
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const data = reactive({
+  categoryInfo: {},
+  category: [{}],
+  categoryChild: [{}]
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
+
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { categoryInfo, categoryChild } = res;
+      data.categoryInfo = categoryInfo;
+      data.category = categoryInfo.category;
+      data.categoryChild = categoryChild;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
+
+const change = (index) => {
+  data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children);
+};
+const onChange = () => {
+  console.log('当前分类数据');
+};
 </script>
 ```
 
@@ -79,56 +69,46 @@ data 数据格式可参考
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-category :category="category" @change="changeText">
-    <nut-category-pane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane
+  <nut-category :category="data.category" @change="changeText">
+    <nut-category-pane type="text" :categoryChild="data.categoryChild" @onChange="onChange"> </nut-category-pane
   ></nut-category>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const data = reactive({
-        categoryInfo: {},
-        category: [{}],
-        categoryChild: [{}]
-      });
-
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-
-      const getData = () => {
-        fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-          .then((response) => response.json())
-          .then((res) => {
-            console.log('res', res);
-            const { categoryInfo, categoryChild } = res;
-            data.categoryInfo = categoryInfo;
-            data.category = categoryInfo.category;
-            data.categoryChild = categoryChild;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      };
-
-      const changeText = (index: any) => {
-        data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
-      };
-
-      const onChange = () => {
-        console.log('当前分类数据');
-      };
-      return {
-        changeText,
-        onChange,
-        ...toRefs(data)
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const data = reactive({
+  categoryInfo: {},
+  category: [{}],
+  categoryChild: [{}]
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
+
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      console.log('res', res);
+      const { categoryInfo, categoryChild } = res;
+      data.categoryInfo = categoryInfo;
+      data.category = categoryInfo.category;
+      data.categoryChild = categoryChild;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
+
+const changeText = (index) => {
+  data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children);
+};
+
+const onChange = () => {
+  console.log('当前分类数据');
+};
 </script>
 ```
 
@@ -138,43 +118,35 @@ data 数据格式可参考
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-category @change="changeCustom"
-    ><nut-category-pane type="custom" :customCategory="customCategory" @onChange="changeCustom"> </nut-category-pane
+    ><nut-category-pane type="custom" :customCategory="data.customCategory" @onChange="changeCustom">
+    </nut-category-pane
   ></nut-category>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const data = reactive({
-        customCategory: [{}]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-      const getData = () => {
-        fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { customCategory } = res;
-            data.customCategory = customCategory;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      };
-      const changeCustom = () => {
-        console.log('点击分类数据');
-      };
-      return {
-        changeCustom,
-        ...toRefs(data)
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const data = reactive({
+  customCategory: [{}]
+});
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { customCategory } = res;
+      data.customCategory = customCategory;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
+const changeCustom = () => {
+  console.log('点击分类数据');
+};
 </script>
 ```
 
@@ -184,36 +156,36 @@ data 数据格式可参考
 
 ### Category Props
 
-| 参数     | 说明                                   | 类型   | 默认值     |
-| -------- | -------------------------------------- | ------ | ---------- |
-| type     | 分类模式：`classify`，`text`，`custom` | string | `classify` |
-| category | 左侧导航栏数据列表                     | Array  | `[]`       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 分类模式：`classify`，`text`，`custom` | string | `classify` |
+| category | 左侧导航栏数据列表 | Array | `[]` |
 
 ### Category Events
 
-| 事件名        | 说明                                             | 回调参数   |
-| ------------- | ------------------------------------------------ | ---------- |
-| change        | 经典分类，点击左侧导航栏，获取右侧数据列表       | 点击的数据 |
-| change-text   | 文本分类模式，更点击左侧导航栏，获取右侧数据列表 | 输入的数据 |
-| change-custom | 自定义，点击左侧导航栏，获取右侧数据列表         | 当前数量   |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 经典分类，点击左侧导航栏，获取右侧数据列表 | 点击的数据 |
+| change-text | 文本分类模式，更点击左侧导航栏，获取右侧数据列表 | 输入的数据 |
+| change-custom | 自定义，点击左侧导航栏，获取右侧数据列表 | 当前数量 |
 
 ### CategoryPane Props
 
-| 参数            | 说明                 | 类型  | 默认值 |
-| --------------- | -------------------- | ----- | ------ |
-| category-child  | 右侧展示当前分类数据 | Array | `[]`   |
-| custom-category | 自定义分类数据       | Array | `[]`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| category-child | 右侧展示当前分类数据 | Array | `[]` |
+| custom-category | 自定义分类数据 | Array | `[]` |
 
 ### CategoryPane Events
 
-| 事件名    | 说明                 | 回调参数   |
-| --------- | -------------------- | ---------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | on-change | 点击右侧分类数据触发 | 点击的数据 |
 
 ### CategoryPane Slots
 
-| 名称    | 说明       |
-| ------- | ---------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 自定义内容 |
 
 ## 主题定制
@@ -222,13 +194,13 @@ data 数据格式可参考
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                          | 默认值                     |
-| --------------------------------------------- | -------------------------- |
-| --nut-category-bg-color                       | _rgba(255, 255, 255, 1)_   |
-| --nut-category-list-left-bg-color             | _rgba(246, 247, 249, 1)_   |
-| --nut-category-list-item-color                | _var(--nut-title-color)_   |
-| --nut-category-list-item-checked-color        | _rgba(255, 255, 255, 1)_   |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-category-bg-color | _rgba(255, 255, 255, 1)_ |
+| --nut-category-list-left-bg-color | _rgba(246, 247, 249, 1)_ |
+| --nut-category-list-item-color | _var(--nut-title-color)_ |
+| --nut-category-list-item-checked-color | _rgba(255, 255, 255, 1)_ |
 | --nut-category-list-item-checked-img-bg-color | _var(--nut-primary-color)_ |
-| --nut-category-pane-gray-color                | _#666_                     |
-| --nut-category-pane-border-color              | _rgb(153, 153, 153)_       |
-| --nut-category-pane-title-color               | _rgba(51, 51, 51, 1)_      |
+| --nut-category-pane-gray-color | _#666_ |
+| --nut-category-pane-border-color | _rgb(153, 153, 153)_ |
+| --nut-category-pane-title-color | _rgba(51, 51, 51, 1)_ |
diff --git a/src/packages/__VUE/category/doc.taro.md b/src/packages/__VUE/category/doc.taro.md
index 544194e35e..ccea74fed9 100644
--- a/src/packages/__VUE/category/doc.taro.md
+++ b/src/packages/__VUE/category/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Category, CategoryPane } from '@nutui/nutui-taro';
 
@@ -22,42 +22,44 @@ data 数据格式可参考
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-category :category="category" @change="change">
-    <nut-category-pane :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane>
+  <nut-category :category="data.category" @change="change">
+    <nut-category-pane :categoryChild="data.categoryChild" @onChange="onChange"> </nut-category-pane>
   </nut-category>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { categoryInfo, categoryChild, customCategory } from './data';
-
-  export default {
-    setup() {
-      const data = reactive({
-        category: [{}],
-        categoryChild: [{}]
-      });
-
-      onMounted(() => {
-        data.category = categoryInfo.category;
-        data.categoryChild = categoryChild;
-        data.customCategory = customCategory;
-      });
-
-      const change = (index: any) => {
-        data.categoryChild = [].concat(data.category.category[index].children as any);
-      };
-      const onChange = () => {
-        console.log('当前分类数据');
-      };
-      return {
-        onChange,
-        change,
-        ...toRefs(data)
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const data = reactive({
+  categoryInfo: {},
+  category: [{}],
+  categoryChild: [{}]
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
+
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { categoryInfo, categoryChild } = res;
+      data.categoryInfo = categoryInfo;
+      data.category = categoryInfo.category;
+      data.categoryChild = categoryChild;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
+
+const change = (index) => {
+  data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children);
+};
+const onChange = () => {
+  console.log('当前分类数据');
+};
 </script>
 ```
 
@@ -67,42 +69,46 @@ data 数据格式可参考
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-category :category="category" @change="changeText">
-    <nut-category-pane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane
+  <nut-category :category="data.category" @change="changeText">
+    <nut-category-pane type="text" :categoryChild="data.categoryChild" @onChange="onChange"> </nut-category-pane
   ></nut-category>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { categoryInfo, categoryChild, customCategory } from './data';
-
-  export default {
-    setup() {
-      const data = reactive({
-        category: [{}],
-        categoryChild: [{}]
-      });
-
-      onMounted(() => {
-        category: [{}],
-        categoryChild: [{}]
-      });
-
-      const changeText = (index: any) => {
-        data.categoryChild = [].concat(data.category.category[index].children as any);
-      };
-
-      const onChange =()=>{
-        console.log("当前分类数据");
-      }
-      return {
-        changeText,
-        onChange,
-        ...toRefs(data)
-      }
-    }
-  };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const data = reactive({
+  categoryInfo: {},
+  category: [{}],
+  categoryChild: [{}]
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
+
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      console.log('res', res);
+      const { categoryInfo, categoryChild } = res;
+      data.categoryInfo = categoryInfo;
+      data.category = categoryInfo.category;
+      data.categoryChild = categoryChild;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
+
+const changeText = (index) => {
+  data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children);
+};
+
+const onChange = () => {
+  console.log('当前分类数据');
+};
 </script>
 ```
 
@@ -112,35 +118,35 @@ data 数据格式可参考
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-category @change="changeCustom"
-    ><nut-category-pane type="custom" :customCategory="customCategory" @onChange="changeCustom"> </nut-category-pane
+    ><nut-category-pane type="custom" :customCategory="data.customCategory" @onChange="changeCustom">
+    </nut-category-pane
   ></nut-category>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { categoryInfo, categoryChild, customCategory } from './data';
-
-  export default {
-    setup() {
-      const data = reactive({
-        customCategory: [{}]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-      const changeCustom = () => {
-        console.log('点击分类数据');
-      };
-      return {
-        changeCustom,
-        ...toRefs(data)
-      };
-    }
-  };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const data = reactive({
+  customCategory: [{}]
+});
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { customCategory } = res;
+      data.customCategory = customCategory;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
+const changeCustom = () => {
+  console.log('点击分类数据');
+};
 </script>
 ```
 
@@ -150,36 +156,36 @@ data 数据格式可参考
 
 ### Category Props
 
-| 参数     | 说明                                   | 类型   | 默认值     |
-| -------- | -------------------------------------- | ------ | ---------- |
-| type     | 分类模式：`classify`，`text`，`custom` | string | `classify` |
-| category | 左侧导航栏数据列表                     | Array  | `[]`       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 分类模式：`classify`，`text`，`custom` | string | `classify` |
+| category | 左侧导航栏数据列表 | Array | `[]` |
 
 ### Category Events
 
-| 事件名        | 说明                                             | 回调参数   |
-| ------------- | ------------------------------------------------ | ---------- |
-| change        | 经典分类，点击左侧导航栏，获取右侧数据列表       | 点击的数据 |
-| change-text   | 文本分类模式，更点击左侧导航栏，获取右侧数据列表 | 输入的数据 |
-| change-custom | 自定义，点击左侧导航栏，获取右侧数据列表         | 当前数量   |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 经典分类，点击左侧导航栏，获取右侧数据列表 | 点击的数据 |
+| change-text | 文本分类模式，更点击左侧导航栏，获取右侧数据列表 | 输入的数据 |
+| change-custom | 自定义，点击左侧导航栏，获取右侧数据列表 | 当前数量 |
 
 ### CategoryPane Props
 
-| 参数            | 说明                 | 类型  | 默认值 |
-| --------------- | -------------------- | ----- | ------ |
-| category-child  | 右侧展示当前分类数据 | Array | `[]`   |
-| custom-category | 自定义分类数据       | Array | `[]`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| category-child | 右侧展示当前分类数据 | Array | `[]` |
+| custom-category | 自定义分类数据 | Array | `[]` |
 
 ### CategoryPane Events
 
-| 事件名    | 说明                 | 回调参数   |
-| --------- | -------------------- | ---------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | on-change | 点击右侧分类数据触发 | 点击的数据 |
 
 ### CategoryPane Slots
 
-| 名称    | 说明       |
-| ------- | ---------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 自定义内容 |
 
 ## 主题定制
@@ -188,13 +194,13 @@ data 数据格式可参考
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                          | 默认值                     |
-| --------------------------------------------- | -------------------------- |
-| --nut-category-bg-color                       | _rgba(255, 255, 255, 1)_   |
-| --nut-category-list-left-bg-color             | _rgba(246, 247, 249, 1)_   |
-| --nut-category-list-item-color                | _var(--nut-title-color)_   |
-| --nut-category-list-item-checked-color        | _rgba(255, 255, 255, 1)_   |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-category-bg-color | _rgba(255, 255, 255, 1)_ |
+| --nut-category-list-left-bg-color | _rgba(246, 247, 249, 1)_ |
+| --nut-category-list-item-color | _var(--nut-title-color)_ |
+| --nut-category-list-item-checked-color | _rgba(255, 255, 255, 1)_ |
 | --nut-category-list-item-checked-img-bg-color | _var(--nut-primary-color)_ |
-| --nut-category-pane-gray-color                | _#666_                     |
-| --nut-category-pane-border-color              | _rgb(153, 153, 153)_       |
-| --nut-category-pane-title-color               | _rgba(51, 51, 51, 1)_      |
+| --nut-category-pane-gray-color | _#666_ |
+| --nut-category-pane-border-color | _rgb(153, 153, 153)_ |
+| --nut-category-pane-title-color | _rgba(51, 51, 51, 1)_ |
diff --git a/src/packages/__VUE/comment/demo.vue b/src/packages/__VUE/comment/demo.vue
index c159aeb5a4..42f4ad373a 100644
--- a/src/packages/__VUE/comment/demo.vue
+++ b/src/packages/__VUE/comment/demo.vue
@@ -60,62 +60,47 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { onMounted, ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const { translate } = createComponent('comment');
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      single: '评论图片单行展示',
-      multiRow: '评论图片多行展示',
-      additionalReviewd: '追评展示'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      single: 'Single Line Image',
-      multiRow: 'Multi Line Image ',
-      review: 'Additional Review'
-    }
-  });
-
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    let cmt = ref<any>({});
-
-    const handleclick = (info: any) => {
-      console.log('进行跳转', info);
-    };
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    single: '评论图片单行展示',
+    multiRow: '评论图片多行展示',
+    additionalReviewd: '追评展示'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    single: 'Single Line Image',
+    multiRow: 'Multi Line Image ',
+    review: 'Additional Review'
+  }
+});
+let cmt = ref<any>({});
 
-    onMounted(() => {
-      getData();
-    });
+const handleclick = (info: any) => {
+  console.log('进行跳转', info);
+};
 
-    const getData = () => {
-      fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
-        .then((response) => response.json())
-        .then((res) => {
-          res.Comment.info.avatar =
-            'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png';
-          cmt.value = res.Comment;
-        }) //执行结果是 resolve就调用then方法
-        .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-    };
+onMounted(() => {
+  getData();
+});
 
-    const clickImages = (imgs: any) => {
-      console.log('进行图片展示', imgs);
-    };
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
+    .then((response) => response.json())
+    .then((res) => {
+      res.Comment.info.avatar =
+        'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png';
+      cmt.value = res.Comment;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+};
 
-    return {
-      cmt,
-      handleclick,
-      clickImages,
-      translate
-    };
-  }
-});
+const clickImages = (imgs: any) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
diff --git a/src/packages/__VUE/comment/doc.en-US.md b/src/packages/__VUE/comment/doc.en-US.md
index 8a071851b4..ed288d5e4e 100644
--- a/src/packages/__VUE/comment/doc.en-US.md
+++ b/src/packages/__VUE/comment/doc.en-US.md
@@ -6,7 +6,7 @@ Used to display the comment list
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Comment } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ By default, images of reviews for individual items are displayed in a single sli
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-comment
     :images="cmt.images"
@@ -38,32 +38,23 @@ By default, images of reviews for individual items are displayed in a single sli
     </template>
   </nut-comment>
 </template>
-<script lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
-  export default {
-    setup() {
-      let cmt = ref({});
-      onMounted(() => {
-        fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
-          .then((response) => response.json())
-          .then((res) => {
-            cmt.value = res.Comment;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      });
-      const handleclick = (info: any) => {
-        console.log('进行跳转', info);
-      };
-      const clickImages = (imgs) => {
-        console.log('进行图片展示', imgs);
-      };
-      return {
-        cmt,
-        handleclick,
-        clickImages
-      };
-    }
-  };
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+let cmt = ref({});
+onMounted(() => {
+  fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
+    .then((response) => response.json())
+    .then((res) => {
+      cmt.value = res.Comment;
+    })
+    .catch((err) => console.log('Oh, error', err));
+});
+const handleclick = (info) => {
+  console.log('进行跳转', info);
+};
+const clickImages = (imgs) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
 ```
 
@@ -75,7 +66,7 @@ The value of `headerType` allows you to set the image to be displayed in multipl
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-comment
     headerType="complex"
@@ -102,28 +93,20 @@ The value of `headerType` allows you to set the image to be displayed in multipl
     </template>
   </nut-comment>
 </template>
-<script lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
-  export default {
-    setup() {
-      let cmt = ref({});
-      onMounted(() => {
-        fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
-          .then((response) => response.json())
-          .then((res) => {
-            cmt.value = res.Comment;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      });
-      const clickImages = (imgs) => {
-        console.log('进行图片展示', imgs);
-      };
-      return {
-        cmt,
-        clickImages
-      };
-    }
-  };
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+let cmt = ref({});
+onMounted(() => {
+  fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
+    .then((response) => response.json())
+    .then((res) => {
+      cmt.value = res.Comment;
+    })
+    .catch((err) => console.log('Oh, error', err));
+});
+const clickImages = (imgs) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
 ```
 
@@ -133,7 +116,7 @@ The value of `headerType` allows you to set the image to be displayed in multipl
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-comment
     imagesRows="multi"
@@ -144,28 +127,20 @@ The value of `headerType` allows you to set the image to be displayed in multipl
     @clickImages="clickImages"
   ></nut-comment>
 </template>
-<script lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
-  export default {
-    setup() {
-      let cmt = ref({});
-      onMounted(() => {
-        fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
-          .then((response) => response.json())
-          .then((res) => {
-            cmt.value = res.Comment;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      });
-      const clickImages = (imgs) => {
-        console.log('进行图片展示', imgs);
-      };
-      return {
-        cmt,
-        clickImages
-      };
-    }
-  };
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+let cmt = ref({});
+onMounted(() => {
+  fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
+    .then((response) => response.json())
+    .then((res) => {
+      cmt.value = res.Comment;
+    })
+    .catch((err) => console.log('Oh, error', err));
+});
+const clickImages = (imgs) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
 ```
 
@@ -175,32 +150,32 @@ The value of `headerType` allows you to set the image to be displayed in multipl
 
 ### Props
 
-| Attribute   | Description                         | Type             | Default                      |
-| ----------- | ----------------------------------- | ---------------- | ---------------------------- |
-| header-type | Header type                         | string           | `default`                    |
-| images-rows | Comment picture shows type of lines | string           | `one`                        |
-| ellipsis    | Ellipsis number                     | string \| number | `2`                          |
-| videos      | Videos data                         | Array            | `[]`                         |
-| images      | Images data                         | Array            | `[]`                         |
-| info        | Comment data                        | object           | `{}`                         |
-| follow      | Additional review data              | object           | `{}`                         |
-| operation   | Bottom button                       | Array            | `["replay", "like", "more"]` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| header-type | Header type | string | `default` |
+| images-rows | Comment picture shows type of lines | string | `one` |
+| ellipsis | Ellipsis number | string \| number | `2` |
+| videos | Videos data | Array | `[]` |
+| images | Images data | Array | `[]` |
+| info | Comment data | object | `{}` |
+| follow | Additional review data | object | `{}` |
+| operation | Bottom button | Array | `["replay", "like", "more"]` |
 
 ### Events
 
-| Event         | Description                            | Arguments            |
-| ------------- | -------------------------------------- | -------------------- |
-| click-operate | Emitted when to click bottom button    | `type`               |
-| click         | Emitted when to click comment          | `type`               |
-| click-images  | Emitted when to click images or videos | `{type,index,value}` |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| click-operate | Emitted when to click bottom button | `type` |
+| click | Emitted when to click comment | `type` |
+| click-images | Emitted when to click images or videos | `{type,index,value}` |
 
 ### Slots
 
 Slots are defined in some areas and can be replaced as required
 
-| Name               | Description                                                            |
-| ------------------ | ---------------------------------------------------------------------- |
-| comment-labels     | Comment user label                                                     |
+| Name | Description |
+| --- | --- |
+| comment-labels | Comment user label |
 | comment-shop-reply | At the bottom of the comment is the display of the merchant's response |
 
 ### images data
@@ -259,9 +234,9 @@ const follow = {
 
 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-comment-header-user-name-color | _rgba(51, 51, 51, 1)_      |
-| --nut-comment-header-time-color      | _rgba(153, 153, 153, 1)_   |
-| --nut-comment-bottom-label-color     | _rgba(153, 153, 153, 1)_   |
-| --nut-comment-shop-color             | _var(--nut-primary-color)_ |
+| Name | Default Value |
+| --- | --- |
+| --nut-comment-header-user-name-color | _rgba(51, 51, 51, 1)_ |
+| --nut-comment-header-time-color | _rgba(153, 153, 153, 1)_ |
+| --nut-comment-bottom-label-color | _rgba(153, 153, 153, 1)_ |
+| --nut-comment-shop-color | _var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/comment/doc.md b/src/packages/__VUE/comment/doc.md
index 2d7704814a..992b8a418f 100644
--- a/src/packages/__VUE/comment/doc.md
+++ b/src/packages/__VUE/comment/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Comment } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ app.use(Comment);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-comment
     :images="cmt.images"
@@ -38,32 +38,23 @@ app.use(Comment);
     </template>
   </nut-comment>
 </template>
-<script lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
-  export default {
-    setup() {
-      let cmt = ref({});
-      onMounted(() => {
-        fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
-          .then((response) => response.json())
-          .then((res) => {
-            cmt.value = res.Comment;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      });
-      const handleclick = (info: any) => {
-        console.log('进行跳转', info);
-      };
-      const clickImages = (imgs) => {
-        console.log('进行图片展示', imgs);
-      };
-      return {
-        cmt,
-        handleclick,
-        clickImages
-      };
-    }
-  };
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+let cmt = ref({});
+onMounted(() => {
+  fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
+    .then((response) => response.json())
+    .then((res) => {
+      cmt.value = res.Comment;
+    })
+    .catch((err) => console.log('Oh, error', err));
+});
+const handleclick = (info) => {
+  console.log('进行跳转', info);
+};
+const clickImages = (imgs) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
 ```
 
@@ -75,7 +66,7 @@ app.use(Comment);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-comment
     headerType="complex"
@@ -102,28 +93,20 @@ app.use(Comment);
     </template>
   </nut-comment>
 </template>
-<script lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
-  export default {
-    setup() {
-      let cmt = ref({});
-      onMounted(() => {
-        fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
-          .then((response) => response.json())
-          .then((res) => {
-            cmt.value = res.Comment;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      });
-      const clickImages = (imgs) => {
-        console.log('进行图片展示', imgs);
-      };
-      return {
-        cmt,
-        clickImages
-      };
-    }
-  };
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+let cmt = ref({});
+onMounted(() => {
+  fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
+    .then((response) => response.json())
+    .then((res) => {
+      cmt.value = res.Comment;
+    })
+    .catch((err) => console.log('Oh, error', err));
+});
+const clickImages = (imgs) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
 ```
 
@@ -133,7 +116,7 @@ app.use(Comment);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-comment
     imagesRows="multi"
@@ -144,28 +127,20 @@ app.use(Comment);
     @clickImages="clickImages"
   ></nut-comment>
 </template>
-<script lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
-  export default {
-    setup() {
-      let cmt = ref({});
-      onMounted(() => {
-        fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
-          .then((response) => response.json())
-          .then((res) => {
-            cmt.value = res.Comment;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      });
-      const clickImages = (imgs) => {
-        console.log('进行图片展示', imgs);
-      };
-      return {
-        cmt,
-        clickImages
-      };
-    }
-  };
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+let cmt = ref({});
+onMounted(() => {
+  fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
+    .then((response) => response.json())
+    .then((res) => {
+      cmt.value = res.Comment;
+    })
+    .catch((err) => console.log('Oh, error', err));
+});
+const clickImages = (imgs) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
 ```
 
@@ -175,32 +150,32 @@ app.use(Comment);
 
 ### Props
 
-| 参数        | 说明                                          | 类型             | 默认值                       |
-| ----------- | --------------------------------------------- | ---------------- | ---------------------------- |
-| header-type | 头部样式展示类型，可选： `default`，`complex` | string           | `default`                    |
-| images-rows | 评论图片展示行数，可选： `one`，`multi`       | string           | `one`                        |
-| ellipsis    | 设置评论内容省略行数                          | string \| number | `2`                          |
-| videos      | 视频信息                                      | Array            | `[]`                         |
-| images      | 图片信息                                      | Array            | `[]`                         |
-| info        | 评论详情                                      | object           | `{}`                         |
-| follow      | 追评内容                                      | object           | `{}`                         |
-| operation   | 配置底部按钮                                  | Array            | `["replay", "like", "more"]` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| header-type | 头部样式展示类型，可选： `default`，`complex` | string | `default` |
+| images-rows | 评论图片展示行数，可选： `one`，`multi` | string | `one` |
+| ellipsis | 设置评论内容省略行数 | string \| number | `2` |
+| videos | 视频信息 | Array | `[]` |
+| images | 图片信息 | Array | `[]` |
+| info | 评论详情 | object | `{}` |
+| follow | 追评内容 | object | `{}` |
+| operation | 配置底部按钮 | Array | `["replay", "like", "more"]` |
 
 ### Events
 
-| 事件名        | 说明                     | 回调参数             |
-| ------------- | ------------------------ | -------------------- |
-| click-operate | 点击底部操作按钮回调函数 | `type`               |
-| click         | 点击评论内容回调函数     | `type`               |
-| click-images  | 点击图片或视频触发       | `{type,index,value}` |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click-operate | 点击底部操作按钮回调函数 | `type` |
+| click | 点击评论内容回调函数 | `type` |
+| click-images | 点击图片或视频触发 | `{type,index,value}` |
 
 ### Slots
 
 `Comment` 组件在某些区域定义了插槽，可以按照需求进行替换。
 
-| 名称               | 说明                         |
-| ------------------ | ---------------------------- |
-| comment-labels     | 评论用户的标签               |
+| 名称 | 说明 |
+| --- | --- |
+| comment-labels | 评论用户的标签 |
 | comment-shop-reply | 评论最底部，用于展示商家回复 |
 
 ### images 数组
@@ -263,9 +238,9 @@ const follow = {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值                     |
-| ------------------------------------ | -------------------------- |
-| --nut-comment-header-user-name-color | _rgba(51, 51, 51, 1)_      |
-| --nut-comment-header-time-color      | _rgba(153, 153, 153, 1)_   |
-| --nut-comment-bottom-label-color     | _rgba(153, 153, 153, 1)_   |
-| --nut-comment-shop-color             | _var(--nut-primary-color)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-comment-header-user-name-color | _rgba(51, 51, 51, 1)_ |
+| --nut-comment-header-time-color | _rgba(153, 153, 153, 1)_ |
+| --nut-comment-bottom-label-color | _rgba(153, 153, 153, 1)_ |
+| --nut-comment-shop-color | _var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/comment/doc.taro.md b/src/packages/__VUE/comment/doc.taro.md
index 9cd06a2ea9..f64e25e10e 100644
--- a/src/packages/__VUE/comment/doc.taro.md
+++ b/src/packages/__VUE/comment/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Comment } from '@nutui/nutui-taro';
 
@@ -20,7 +20,7 @@ app.use(Comment);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-comment
     :images="cmt.images"
@@ -38,33 +38,24 @@ app.use(Comment);
     </template>
   </nut-comment>
 </template>
-<script lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup() {
-      let cmt = ref({});
-      onMounted(() => {
-        Taro.request({
-          url: 'https://storage.360buyimg.com/nutui/3x/comment_data.json', //仅为示例，并非真实的接口地址
-          success: function (res) {
-            cmt.value = res.data.Comment;
-          }
-        });
-      });
-      const handleclick = (info: any) => {
-        console.log('进行跳转', info);
-      };
-      const clickImages = (imgs) => {
-        console.log('进行图片展示', imgs);
-      };
-      return {
-        cmt,
-        handleclick,
-        clickImages
-      };
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+import Taro from '@tarojs/taro';
+let cmt = ref({});
+onMounted(() => {
+  Taro.request({
+    url: 'https://storage.360buyimg.com/nutui/3x/comment_data.json', //仅为示例，并非真实的接口地址
+    success: function (res) {
+      cmt.value = res.data.Comment;
     }
-  };
+  });
+});
+const handleclick = (info) => {
+  console.log('进行跳转', info);
+};
+const clickImages = (imgs) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
 ```
 
@@ -76,7 +67,7 @@ app.use(Comment);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-comment
     headerType="complex"
@@ -103,29 +94,21 @@ app.use(Comment);
     </template>
   </nut-comment>
 </template>
-<script lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup() {
-      let cmt = ref({});
-      onMounted(() => {
-        Taro.request({
-          url: 'https://storage.360buyimg.com/nutui/3x/comment_data.json', //仅为示例，并非真实的接口地址
-          success: function (res) {
-            cmt.value = res.data.Comment;
-          }
-        });
-      });
-      const clickImages = (imgs) => {
-        console.log('进行图片展示', imgs);
-      };
-      return {
-        cmt,
-        clickImages
-      };
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+import Taro from '@tarojs/taro';
+let cmt = ref({});
+onMounted(() => {
+  Taro.request({
+    url: 'https://storage.360buyimg.com/nutui/3x/comment_data.json', //仅为示例，并非真实的接口地址
+    success: function (res) {
+      cmt.value = res.data.Comment;
     }
-  };
+  });
+});
+const clickImages = (imgs) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
 ```
 
@@ -135,7 +118,7 @@ app.use(Comment);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-comment
     imagesRows="multi"
@@ -146,29 +129,21 @@ app.use(Comment);
     @clickImages="clickImages"
   ></nut-comment>
 </template>
-<script lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup() {
-      let cmt = ref({});
-      onMounted(() => {
-        Taro.request({
-          url: 'https://storage.360buyimg.com/nutui/3x/comment_data.json', //仅为示例，并非真实的接口地址
-          success: function (res) {
-            cmt.value = res.data.Comment;
-          }
-        });
-      });
-      const clickImages = (imgs) => {
-        console.log('进行图片展示', imgs);
-      };
-      return {
-        cmt,
-        clickImages
-      };
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+import Taro from '@tarojs/taro';
+let cmt = ref({});
+onMounted(() => {
+  Taro.request({
+    url: 'https://storage.360buyimg.com/nutui/3x/comment_data.json', //仅为示例，并非真实的接口地址
+    success: function (res) {
+      cmt.value = res.data.Comment;
     }
-  };
+  });
+});
+const clickImages = (imgs) => {
+  console.log('进行图片展示', imgs);
+};
 </script>
 ```
 
@@ -178,32 +153,32 @@ app.use(Comment);
 
 ### Props
 
-| 参数        | 说明                                          | 类型             | 默认值                       |
-| ----------- | --------------------------------------------- | ---------------- | ---------------------------- |
-| header-type | 头部样式展示类型，可选： `default`，`complex` | string           | `default`                    |
-| images-rows | 评论图片展示行数，可选： `one`，`multi`       | string           | `one`                        |
-| ellipsis    | 设置评论内容省略行数                          | string \| number | `2`                          |
-| videos      | 视频信息                                      | Array            | `[]`                         |
-| images      | 图片信息                                      | Array            | `[]`                         |
-| info        | 评论详情                                      | object           | `{}`                         |
-| follow      | 追评内容                                      | object           | `{}`                         |
-| operation   | 配置底部按钮                                  | Array            | `["replay", "like", "more"]` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| header-type | 头部样式展示类型，可选： `default`，`complex` | string | `default` |
+| images-rows | 评论图片展示行数，可选： `one`，`multi` | string | `one` |
+| ellipsis | 设置评论内容省略行数 | string \| number | `2` |
+| videos | 视频信息 | Array | `[]` |
+| images | 图片信息 | Array | `[]` |
+| info | 评论详情 | object | `{}` |
+| follow | 追评内容 | object | `{}` |
+| operation | 配置底部按钮 | Array | `["replay", "like", "more"]` |
 
 ### Events
 
-| 事件名        | 说明                     | 回调参数             |
-| ------------- | ------------------------ | -------------------- |
-| click-operate | 点击底部操作按钮回调函数 | `type`               |
-| click         | 点击评论内容回调函数     | `type`               |
-| click-images  | 点击图片或视频触发       | `{type,index,value}` |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click-operate | 点击底部操作按钮回调函数 | `type` |
+| click | 点击评论内容回调函数 | `type` |
+| click-images | 点击图片或视频触发 | `{type,index,value}` |
 
 ### Slots
 
 `Comment` 组件在某些区域定义了插槽，可以按照需求进行替换。
 
-| 名称               | 说明                         |
-| ------------------ | ---------------------------- |
-| comment-labels     | 评论用户的标签               |
+| 名称 | 说明 |
+| --- | --- |
+| comment-labels | 评论用户的标签 |
 | comment-shop-reply | 评论最底部，用于展示商家回复 |
 
 ### images 数组
@@ -266,9 +241,9 @@ const follow = {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值                     |
-| ------------------------------------ | -------------------------- |
-| --nut-comment-header-user-name-color | _rgba(51, 51, 51, 1)_      |
-| --nut-comment-header-time-color      | _rgba(153, 153, 153, 1)_   |
-| --nut-comment-bottom-label-color     | _rgba(153, 153, 153, 1)_   |
-| --nut-comment-shop-color             | _var(--nut-primary-color)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-comment-header-user-name-color | _rgba(51, 51, 51, 1)_ |
+| --nut-comment-header-time-color | _rgba(153, 153, 153, 1)_ |
+| --nut-comment-bottom-label-color | _rgba(153, 153, 153, 1)_ |
+| --nut-comment-shop-color | _var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/ecard/demo.vue b/src/packages/__VUE/ecard/demo.vue
index 3cdca2aca0..b907d2dee8 100644
--- a/src/packages/__VUE/ecard/demo.vue
+++ b/src/packages/__VUE/ecard/demo.vue
@@ -12,60 +12,42 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { reactive, ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('ecard');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法'
-    },
-    'en-US': {
-      basic: 'Basic Usage'
-    }
-  });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const dataList = reactive([
-      {
-        price: 10
-      },
-      {
-        price: 20
-      },
-      {
-        price: 30
-      },
-      {
-        price: 40
-      }
-    ]);
-    const money = ref(10);
-    const inputChange = (val: number) => {
-      money.value = val;
-    };
-    const change = (item: { price: number }) => {
-      money.value = item.price;
-    };
-    const changeStep = (num: number, price: number) => {
-      const val = price * num;
-      money.value = val;
-    };
-    return {
-      dataList,
-      inputChange,
-      change,
-      money,
-      changeStep,
-      translate
-    };
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法'
+  },
+  'en-US': {
+    basic: 'Basic Usage'
   }
 });
+const dataList = reactive([
+  {
+    price: 10
+  },
+  {
+    price: 20
+  },
+  {
+    price: 30
+  },
+  {
+    price: 40
+  }
+]);
+const money = ref(10);
+const inputChange = (val: number) => {
+  money.value = val;
+};
+const change = (item: { price: number }) => {
+  money.value = item.price;
+};
+const changeStep = (num: number, price: number) => {
+  const val = price * num;
+  money.value = val;
+};
 </script>
-<style lang="scss" scoped>
-.demo {
-}
-</style>
diff --git a/src/packages/__VUE/ecard/doc.en-US.md b/src/packages/__VUE/ecard/doc.en-US.md
index 5f76c05562..7a8e2b1464 100644
--- a/src/packages/__VUE/ecard/doc.en-US.md
+++ b/src/packages/__VUE/ecard/doc.en-US.md
@@ -6,7 +6,7 @@ Virtual e-card selection
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Ecard } from '@nutui/nutui';
 
@@ -18,54 +18,45 @@ app.use(Ecard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-ecard
-    v-model="money"
-    @input-change="inputChange"
-    @change="change"
-    @change-step="changeStep"
-    :data-list="dataList"
-  ></nut-ecard>
+  <nut-cell>
+    <nut-ecard
+      v-model="money"
+      @input-change="inputChange"
+      @change="change"
+      @change-step="changeStep"
+      :data-list="dataList"
+    ></nut-ecard>
+  </nut-cell>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const dataList = reactive([
-        {
-          price: 10
-        },
-        {
-          price: 20
-        },
-        {
-          price: 30
-        },
-        {
-          price: 40
-        }
-      ]);
-      const money = ref(10);
-      const inputChange = (val) => {
-        money.value = val;
-      };
-      const change = (item) => {
-        money.value = item.price;
-      };
-      const changeStep = (num, price) => {
-        const val = price * num;
-        money.value = val;
-      };
-      return {
-        dataList,
-        inputChange,
-        change,
-        money,
-        changeStep
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const dataList = reactive([
+  {
+    price: 10
+  },
+  {
+    price: 20
+  },
+  {
+    price: 30
+  },
+  {
+    price: 40
+  }
+]);
+const money = ref(10);
+const inputChange = (val) => {
+  money.value = val;
+};
+const change = (item) => {
+  money.value = item.price;
+};
+const changeStep = (num, price) => {
+  const val = price * num;
+  money.value = val;
+};
 </script>
 ```
 
@@ -75,32 +66,32 @@ app.use(Ecard);
 
 ### Props
 
-| Attribute        | Description      | Type   | Default       |
-| ---------------- | ---------------- | ------ | ------------- |
-| modelValue       | Price            | number | `0`           |
-| choose-text      | Main Title       | string | `Select`      |
-| other-value-text | Other Text       | string | `Other Value` |
-| data-list        | Ecard List       | Array  | `DataList[]`  |
-| card-amount-min  | Other Min Value  | number | `1`           |
-| card-amount-max  | Other Max Value  | number | `9999`        |
-| card-buy-min     | Choose Min Value | number | `1`           |
-| card-buy-max     | Choose Max Value | number | `9999`        |
-| placeholder      | Placeholder      | string | `Placeholder` |
-| suffix           | Symbol mark      | string | `¥`           |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| modelValue | Price | number | `0` |
+| choose-text | Main Title | string | `Select` |
+| other-value-text | Other Text | string | `Other Value` |
+| data-list | Ecard List | Array | `DataList[]` |
+| card-amount-min | Other Min Value | number | `1` |
+| card-amount-max | Other Max Value | number | `9999` |
+| card-buy-min | Choose Min Value | number | `1` |
+| card-buy-max | Choose Max Value | number | `9999` |
+| placeholder | Placeholder | string | `Placeholder` |
+| suffix | Symbol mark | string | `¥` |
 
 ### Events
 
-| Event        | Description                            | Arguments           |
-| ------------ | -------------------------------------- | ------------------- |
-| change       | Trigger event when Ecard is clicker    | `value`             |
-| input-change | Triggered when the value changes       | `value`             |
-| change-step  | Triggered when the steps value changes | `value，modelValue` |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| change | Trigger event when Ecard is clicker | `value` |
+| input-change | Triggered when the value changes | `value` |
+| change-step | Triggered when the steps value changes | `value，modelValue` |
 
 ### Data Structure of DataList
 
-| key   | Description | Description |
-| ----- | ----------- | ----------- |
-| price | price       | string      |
+| key | Description | Description |
+| --- | --- | --- |
+| price | price | string |
 
 ## Theming
 
@@ -108,6 +99,6 @@ app.use(Ecard);
 
 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-ecard-bg-color | _#f0f2f5_     |
+| Name | Default Value |
+| --- | --- |
+| --nut-ecard-bg-color | _#f0f2f5_ |
diff --git a/src/packages/__VUE/ecard/doc.md b/src/packages/__VUE/ecard/doc.md
index 4a757f2fc9..0851ea19d1 100644
--- a/src/packages/__VUE/ecard/doc.md
+++ b/src/packages/__VUE/ecard/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Ecard } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Ecard);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-ecard
@@ -30,44 +30,33 @@ app.use(Ecard);
     ></nut-ecard>
   </nut-cell>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const dataList = reactive([
-        {
-          price: 10
-        },
-        {
-          price: 20
-        },
-        {
-          price: 30
-        },
-        {
-          price: 40
-        }
-      ]);
-      const money = ref(10);
-      const inputChange = (val) => {
-        money.value = val;
-      };
-      const change = (item) => {
-        money.value = item.price;
-      };
-      const changeStep = (num, price) => {
-        const val = price * num;
-        money.value = val;
-      };
-      return {
-        dataList,
-        inputChange,
-        change,
-        money,
-        changeStep
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const dataList = reactive([
+  {
+    price: 10
+  },
+  {
+    price: 20
+  },
+  {
+    price: 30
+  },
+  {
+    price: 40
+  }
+]);
+const money = ref(10);
+const inputChange = (val) => {
+  money.value = val;
+};
+const change = (item) => {
+  money.value = item.price;
+};
+const changeStep = (num, price) => {
+  const val = price * num;
+  money.value = val;
+};
 </script>
 ```
 
@@ -77,31 +66,31 @@ app.use(Ecard);
 
 ### Props
 
-| 参数             | 说明               | 类型   | 默认值             |
-| ---------------- | ------------------ | ------ | ------------------ |
-| modelValue       | 购买电子卡所需价钱 | number | `0`                |
-| choose-text      | 选择面值文案       | string | `请选择电子卡面值` |
-| other-value-text | 其他面值文案       | string | `其他面值`         |
-| data-list        | 电子卡面值列表     | Array  | `DataList[]`       |
-| card-amount-min  | 其它面值最小值     | number | `1`                |
-| card-amount-max  | 其他面值最大值     | number | `9999`             |
-| card-buy-min     | 购买数量最小值     | number | `1`                |
-| card-buy-max     | 购买数量最大值     | number | `9999`             |
-| placeholder      | 其他面值默认提示语 | string | `请输入1-5000整数` |
-| suffix           | 符号标示           | string | `¥`                |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| modelValue | 购买电子卡所需价钱 | number | `0` |
+| choose-text | 选择面值文案 | string | `请选择电子卡面值` |
+| other-value-text | 其他面值文案 | string | `其他面值` |
+| data-list | 电子卡面值列表 | Array | `DataList[]` |
+| card-amount-min | 其它面值最小值 | number | `1` |
+| card-amount-max | 其他面值最大值 | number | `9999` |
+| card-buy-min | 购买数量最小值 | number | `1` |
+| card-buy-max | 购买数量最大值 | number | `9999` |
+| placeholder | 其他面值默认提示语 | string | `请输入1-5000整数` |
+| suffix | 符号标示 | string | `¥` |
 
 ### Events
 
-| 事件名       | 说明                    | 回调参数                   |
-| ------------ | ----------------------- | -------------------------- |
-| change       | 选中电子卡事件          | 点击的数据                 |
-| input-change | 更改 `input` 框触发事件 | 输入的数据                 |
-| change-step  | 更改数量时触发          | 当前数量，当前选中的卡面值 |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 选中电子卡事件 | 点击的数据 |
+| input-change | 更改 `input` 框触发事件 | 输入的数据 |
+| change-step | 更改数量时触发 | 当前数量，当前选中的卡面值 |
 
 ### DataList 数据结构
 
-| 键名  | 说明           | 类型   |
-| ----- | -------------- | ------ |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
 | price | 每张电子卡价格 | string |
 
 ## 主题定制
@@ -110,6 +99,6 @@ app.use(Ecard);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                 | 默认值    |
-| -------------------- | --------- |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-ecard-bg-color | _#f0f2f5_ |
diff --git a/src/packages/__VUE/ecard/doc.taro.md b/src/packages/__VUE/ecard/doc.taro.md
index 1b22f54ad8..194f888665 100644
--- a/src/packages/__VUE/ecard/doc.taro.md
+++ b/src/packages/__VUE/ecard/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Ecard } from '@nutui/nutui-taro';
 
@@ -18,54 +18,45 @@ app.use(Ecard);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-ecard
-    v-model="money"
-    @input-change="inputChange"
-    @change="change"
-    @change-step="changeStep"
-    :data-list="dataList"
-  ></nut-ecard>
+  <nut-cell>
+    <nut-ecard
+      v-model="money"
+      @input-change="inputChange"
+      @change="change"
+      @change-step="changeStep"
+      :data-list="dataList"
+    ></nut-ecard>
+  </nut-cell>
 </template>
-<script>
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const dataList = reactive([
-        {
-          price: 10
-        },
-        {
-          price: 20
-        },
-        {
-          price: 30
-        },
-        {
-          price: 40
-        }
-      ]);
-      const money = ref(0);
-      const inputChange = (val) => {
-        money.value = val;
-      };
-      const change = (item) => {
-        money.value = item.price;
-      };
-      const changeStep = (num, price) => {
-        const val = price * num;
-        money.value = val;
-      };
-      return {
-        dataList,
-        inputChange,
-        change,
-        money,
-        changeStep
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const dataList = reactive([
+  {
+    price: 10
+  },
+  {
+    price: 20
+  },
+  {
+    price: 30
+  },
+  {
+    price: 40
+  }
+]);
+const money = ref(10);
+const inputChange = (val) => {
+  money.value = val;
+};
+const change = (item) => {
+  money.value = item.price;
+};
+const changeStep = (num, price) => {
+  const val = price * num;
+  money.value = val;
+};
 </script>
 ```
 
@@ -75,31 +66,31 @@ app.use(Ecard);
 
 ### Props
 
-| 参数             | 说明               | 类型   | 默认值             |
-| ---------------- | ------------------ | ------ | ------------------ |
-| modelValue       | 购买电子卡所需价钱 | number | `0`                |
-| choose-text      | 选择面值文案       | string | `请选择电子卡面值` |
-| other-value-text | 其他面值文案       | string | `其他面值`         |
-| data-list        | 电子卡面值列表     | Array  | `DataList[]`       |
-| card-amount-min  | 其它面值最小值     | number | `1`                |
-| card-amount-max  | 其他面值最大值     | number | `9999`             |
-| card-buy-min     | 购买数量最小值     | number | `1`                |
-| card-buy-max     | 购买数量最大值     | number | `9999`             |
-| placeholder      | 其他面值默认提示语 | string | `请输入1-5000整数` |
-| suffix           | 符号标示           | string | `¥`                |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| modelValue | 购买电子卡所需价钱 | number | `0` |
+| choose-text | 选择面值文案 | string | `请选择电子卡面值` |
+| other-value-text | 其他面值文案 | string | `其他面值` |
+| data-list | 电子卡面值列表 | Array | `DataList[]` |
+| card-amount-min | 其它面值最小值 | number | `1` |
+| card-amount-max | 其他面值最大值 | number | `9999` |
+| card-buy-min | 购买数量最小值 | number | `1` |
+| card-buy-max | 购买数量最大值 | number | `9999` |
+| placeholder | 其他面值默认提示语 | string | `请输入1-5000整数` |
+| suffix | 符号标示 | string | `¥` |
 
 ### Events
 
-| 事件名       | 说明                    | 回调参数                   |
-| ------------ | ----------------------- | -------------------------- |
-| change       | 选中电子卡事件          | 点击的数据                 |
-| input-change | 更改 `input` 框触发事件 | 输入的数据                 |
-| change-step  | 更改数量时触发          | 当前数量，当前选中的卡面值 |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 选中电子卡事件 | 点击的数据 |
+| input-change | 更改 `input` 框触发事件 | 输入的数据 |
+| change-step | 更改数量时触发 | 当前数量，当前选中的卡面值 |
 
 ### DataList 数据结构
 
-| 键名  | 说明           | 类型   |
-| ----- | -------------- | ------ |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
 | price | 每张电子卡价格 | string |
 
 ## 主题定制
@@ -108,6 +99,6 @@ app.use(Ecard);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                 | 默认值    | 描述 |
-| -------------------- | --------- | ---- |
-| --nut-ecard-bg-color | _#f0f2f5_ | -    |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-ecard-bg-color | _#f0f2f5_ |
diff --git a/src/packages/__VUE/invoice/demo.vue b/src/packages/__VUE/invoice/demo.vue
index 0a9b0333ef..f44454197c 100644
--- a/src/packages/__VUE/invoice/demo.vue
+++ b/src/packages/__VUE/invoice/demo.vue
@@ -5,122 +5,106 @@
   </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('invoice');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '@/packages/nutui.vue';
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法'
+  },
+  'en-US': {
+    basic: 'Basic Usage'
+  }
+});
+const formValue = reactive({
+  type: '企业',
+  name: '',
+  num: '',
+  adress: '',
+  tel: '',
+  address: '',
+  bank: '',
+  account: ''
+});
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法'
-    },
-    'en-US': {
-      basic: 'Basic Usage'
-    }
+// Promise 异步校验
+const asyncValidator = (val: string) => {
+  return new Promise((resolve) => {
+    showToast.loading('模拟异步验证中...');
+    setTimeout(() => {
+      showToast.hide();
+      resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
+    }, 1000);
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const formValue = reactive({
-      type: '企业',
-      name: '',
-      num: '',
-      adress: '',
-      tel: '',
-      address: '',
-      bank: '',
-      account: ''
-    });
+};
 
-    // Promise 异步校验
-    const asyncValidator = (val: string) => {
-      return new Promise((resolve) => {
-        showToast.loading('模拟异步验证中...');
-        setTimeout(() => {
-          showToast.hide();
-          resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
-        }, 1000);
-      });
-    };
-
-    let data: any = ref([
-      {
-        type: 'radio',
-        label: '发票类型',
-        radioLabel: [
-          {
-            label: '企业'
-          },
-          {
-            label: '个人或事业单位'
-          }
-        ],
-        formItemProp: 'type',
-        required: true
-      },
-      {
-        label: '发票抬头',
-        placeholder: '请输入发票抬头',
-        formItemProp: 'name',
-        rules: [{ required: true, message: '请输入发票抬头' }],
-        required: true
-      },
-      {
-        label: '纳税人识别号',
-        placeholder: '请输入纳税人识别号',
-        formItemProp: 'num',
-        rules: [{ message: '请输入纳税人识别号' }]
-      },
-      {
-        label: '注册地址',
-        placeholder: '请输入注册地址',
-        formItemProp: 'adress',
-        rules: [{ required: true, message: '请输入地址' }],
-        required: true
-      },
-      {
-        label: '注册电话',
-        placeholder: '请输入注册电话',
-        formItemProp: 'tel',
-        rules: [
-          { required: true, message: '请输入联系电话' },
-          { validator: asyncValidator, message: '电话格式不正确' }
-        ],
-        required: true
-      },
+let data: any = ref([
+  {
+    type: 'radio',
+    label: '发票类型',
+    radioLabel: [
       {
-        label: '开户行',
-        placeholder: '请输入开户行',
-        formItemProp: 'bank'
+        label: '企业'
       },
       {
-        label: '银行账户',
-        placeholder: '请输入银行账户',
-        formItemProp: 'account'
+        label: '个人或事业单位'
       }
-    ]);
-
-    const submit = (valid: boolean, errors: []) => {
-      if (valid) {
-        console.log('success', formValue);
-      } else {
-        console.log('error submit!!', errors);
-      }
-    };
+    ],
+    formItemProp: 'type',
+    required: true
+  },
+  {
+    label: '发票抬头',
+    placeholder: '请输入发票抬头',
+    formItemProp: 'name',
+    rules: [{ required: true, message: '请输入发票抬头' }],
+    required: true
+  },
+  {
+    label: '纳税人识别号',
+    placeholder: '请输入纳税人识别号',
+    formItemProp: 'num',
+    rules: [{ message: '请输入纳税人识别号' }]
+  },
+  {
+    label: '注册地址',
+    placeholder: '请输入注册地址',
+    formItemProp: 'adress',
+    rules: [{ required: true, message: '请输入地址' }],
+    required: true
+  },
+  {
+    label: '注册电话',
+    placeholder: '请输入注册电话',
+    formItemProp: 'tel',
+    rules: [
+      { required: true, message: '请输入联系电话' },
+      { validator: asyncValidator, message: '电话格式不正确' }
+    ],
+    required: true
+  },
+  {
+    label: '开户行',
+    placeholder: '请输入开户行',
+    formItemProp: 'bank'
+  },
+  {
+    label: '银行账户',
+    placeholder: '请输入银行账户',
+    formItemProp: 'account'
+  }
+]);
 
-    return {
-      translate,
-      data,
-      formValue,
-      submit,
-      asyncValidator
-    };
+const submit = (valid: boolean, errors: []) => {
+  if (valid) {
+    console.log('success', formValue);
+  } else {
+    console.log('error submit!!', errors);
   }
-});
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/invoice/doc.en-US.md b/src/packages/__VUE/invoice/doc.en-US.md
index b33be9565a..71d65080c9 100644
--- a/src/packages/__VUE/invoice/doc.en-US.md
+++ b/src/packages/__VUE/invoice/doc.en-US.md
@@ -6,7 +6,7 @@ Display the application invoice page.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Invoice } from '@nutui/nutui';
 
@@ -18,97 +18,97 @@ app.use(Invoice);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-invoice :data="data" :form-value="formValue" @submit="submit"></nut-invoice>
 </template>
 <script setup>
-  import { ref, reactive } from 'vue';
-  // Promise 异步校验
-  const asyncValidator = (val: string) => {
-    return new Promise((resolve) => {
-      console.log('模拟异步验证中...');
-      setTimeout(() => {
-        resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
-      }, 1000);
-    });
-  };
-
-  const data: any = ref([
-    {
-      type: 'radio',
-      label: '发票类型',
-      radioLabel: [
-        {
-          label: '企业'
-        },
-        {
-          label: '个人或事业单位'
-        }
-      ],
-      formItemProp: 'type',
-      required: true
-    },
-    {
-      label: '发票抬头',
-      placeholder: '请输入发票抬头',
-      formItemProp: 'name',
-      rules: [{ required: true, message: '请输入发票抬头' }],
-      required: true
-    },
-    {
-      label: '纳税人识别号',
-      placeholder: '请输入纳税人识别号',
-      formItemProp: 'num',
-      rules: [{ message: '请输入纳税人识别号' }]
-    },
-    {
-      label: '注册地址',
-      placeholder: '请输入注册地址',
-      formItemProp: 'adress',
-      rules: [{ required: true, message: '请输入地址' }],
-      required: true
-    },
-    {
-      label: '注册电话',
-      placeholder: '请输入注册电话',
-      formItemProp: 'tel',
-      rules: [
-        { required: true, message: '请输入联系电话' },
-        { validator: asyncValidator, message: '电话格式不正确' }
-      ],
-      required: true
-    },
-    {
-      label: '开户行',
-      placeholder: '请输入开户行',
-      formItemProp: 'bank'
-    },
-    {
-      label: '银行账户',
-      placeholder: '请输入银行账户',
-      formItemProp: 'account'
-    }
-  ]);
-
-  const formValue = reactive({
-    type: '企业',
-    name: '',
-    num: '',
-    adress: '',
-    tel: '',
-    address: '',
-    bank: '',
-    account: ''
+import { ref, reactive } from 'vue';
+// Promise 异步校验
+const asyncValidator = (val) => {
+  return new Promise((resolve) => {
+    console.log('模拟异步验证中...');
+    setTimeout(() => {
+      resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
+    }, 1000);
   });
-
-  const submit = (valid: boolean, errors: []) => {
-    if (valid) {
-      console.log('success', formValue);
-    } else {
-      console.log('error submit!!', errors);
-    }
-  };
+};
+
+const data = ref([
+  {
+    type: 'radio',
+    label: '发票类型',
+    radioLabel: [
+      {
+        label: '企业'
+      },
+      {
+        label: '个人或事业单位'
+      }
+    ],
+    formItemProp: 'type',
+    required: true
+  },
+  {
+    label: '发票抬头',
+    placeholder: '请输入发票抬头',
+    formItemProp: 'name',
+    rules: [{ required: true, message: '请输入发票抬头' }],
+    required: true
+  },
+  {
+    label: '纳税人识别号',
+    placeholder: '请输入纳税人识别号',
+    formItemProp: 'num',
+    rules: [{ message: '请输入纳税人识别号' }]
+  },
+  {
+    label: '注册地址',
+    placeholder: '请输入注册地址',
+    formItemProp: 'adress',
+    rules: [{ required: true, message: '请输入地址' }],
+    required: true
+  },
+  {
+    label: '注册电话',
+    placeholder: '请输入注册电话',
+    formItemProp: 'tel',
+    rules: [
+      { required: true, message: '请输入联系电话' },
+      { validator: asyncValidator, message: '电话格式不正确' }
+    ],
+    required: true
+  },
+  {
+    label: '开户行',
+    placeholder: '请输入开户行',
+    formItemProp: 'bank'
+  },
+  {
+    label: '银行账户',
+    placeholder: '请输入银行账户',
+    formItemProp: 'account'
+  }
+]);
+
+const formValue = reactive({
+  type: '企业',
+  name: '',
+  num: '',
+  adress: '',
+  tel: '',
+  address: '',
+  bank: '',
+  account: ''
+});
+
+const submit = (valid, errors) => {
+  if (valid) {
+    console.log('success', formValue);
+  } else {
+    console.log('error submit!!', errors);
+  }
+};
 </script>
 ```
 
@@ -118,32 +118,32 @@ app.use(Invoice);
 
 ### Props
 
-| Attribute | Description                                              | Type    | Default |
-| --------- | -------------------------------------------------------- | ------- | ------- |
-| data      | Invoice data                                             | Array   | `[]`    |
-| formValue | Form data object (required when using form verification) | object  | -       |
-| submit    | Whether to show the submit button                        | boolean | `true`  |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| data | Invoice data | Array | `[]` |
+| formValue | Form data object (required when using form verification) | object | - |
+| submit | Whether to show the submit button | boolean | `true` |
 
 ### Data Structure of Data
 
 The optional attributes are as follows:
 
-| Attribute      | Description                                                        | Type    |
-| -------------- | ------------------------------------------------------------------ | ------- |
-| type           | Type, eg `input`、`radio`                                          | string  |
-| label          | Label                                                              | string  |
-| placeholder    | Input placeholder                                                  | string  |
-| radio-label    | Radio label                                                        | string  |
-| form-item-prop | The v-model field of the form field is required                    | string  |
-| rules          | Check rules，[Refer to FormItem Rule data structure](#/en-US/form) | Array   |
-| required       | Is it a required field                                             | boolean |
+| Attribute | Description | Type |
+| --- | --- | --- |
+| type | Type, eg `input`、`radio` | string |
+| label | Label | string |
+| placeholder | Input placeholder | string |
+| radio-label | Radio label | string |
+| form-item-prop | The v-model field of the form field is required | string |
+| rules | Check rules，[Refer to FormItem Rule data structure](#/en-US/form) | Array |
+| required | Is it a required field | boolean |
 
 ### Events
 
-| Event          | Description                                | Arguments |
-| -------------- | ------------------------------------------ | --------- |
-| submit`v4.1.5` | Method of submitting form for verification | Promise   |
-| on-submit      | Method of submitting form for verification | Promise   |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| submit`v4.1.5` | Method of submitting form for verification | Promise |
+| on-submit | Method of submitting form for verification | Promise |
 
 ## Theming
 
@@ -151,6 +151,6 @@ The optional attributes are as follows:
 
 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     |
-| --------------------- | ----------------- |
+| Name | Default Value |
+| --- | --- |
 | --nut-invoice-padding | _ 10px 10px 20px_ |
diff --git a/src/packages/__VUE/invoice/doc.md b/src/packages/__VUE/invoice/doc.md
index 526ab68bf6..7f079d838b 100644
--- a/src/packages/__VUE/invoice/doc.md
+++ b/src/packages/__VUE/invoice/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Invoice } from '@nutui/nutui';
 
@@ -18,97 +18,97 @@ app.use(Invoice);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-invoice :data="data" :form-value="formValue" @submit="submit"></nut-invoice>
 </template>
 <script setup>
-  import { ref, reactive } from 'vue';
-  // Promise 异步校验
-  const asyncValidator = (val: string) => {
-    return new Promise((resolve) => {
-      console.log('模拟异步验证中...');
-      setTimeout(() => {
-        resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
-      }, 1000);
-    });
-  };
-
-  const data: any = ref([
-    {
-      type: 'radio',
-      label: '发票类型',
-      radioLabel: [
-        {
-          label: '企业'
-        },
-        {
-          label: '个人或事业单位'
-        }
-      ],
-      formItemProp: 'type',
-      required: true
-    },
-    {
-      label: '发票抬头',
-      placeholder: '请输入发票抬头',
-      formItemProp: 'name',
-      rules: [{ required: true, message: '请输入发票抬头' }],
-      required: true
-    },
-    {
-      label: '纳税人识别号',
-      placeholder: '请输入纳税人识别号',
-      formItemProp: 'num',
-      rules: [{ message: '请输入纳税人识别号' }]
-    },
-    {
-      label: '注册地址',
-      placeholder: '请输入注册地址',
-      formItemProp: 'adress',
-      rules: [{ required: true, message: '请输入地址' }],
-      required: true
-    },
-    {
-      label: '注册电话',
-      placeholder: '请输入注册电话',
-      formItemProp: 'tel',
-      rules: [
-        { required: true, message: '请输入联系电话' },
-        { validator: asyncValidator, message: '电话格式不正确' }
-      ],
-      required: true
-    },
-    {
-      label: '开户行',
-      placeholder: '请输入开户行',
-      formItemProp: 'bank'
-    },
-    {
-      label: '银行账户',
-      placeholder: '请输入银行账户',
-      formItemProp: 'account'
-    }
-  ]);
-
-  const formValue = reactive({
-    type: '企业',
-    name: '',
-    num: '',
-    adress: '',
-    tel: '',
-    address: '',
-    bank: '',
-    account: ''
+import { ref, reactive } from 'vue';
+// Promise 异步校验
+const asyncValidator = (val) => {
+  return new Promise((resolve) => {
+    console.log('模拟异步验证中...');
+    setTimeout(() => {
+      resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
+    }, 1000);
   });
-
-  const submit = (valid: boolean, errors: []) => {
-    if (valid) {
-      console.log('success', formValue);
-    } else {
-      console.log('error submit!!', errors);
-    }
-  };
+};
+
+const data = ref([
+  {
+    type: 'radio',
+    label: '发票类型',
+    radioLabel: [
+      {
+        label: '企业'
+      },
+      {
+        label: '个人或事业单位'
+      }
+    ],
+    formItemProp: 'type',
+    required: true
+  },
+  {
+    label: '发票抬头',
+    placeholder: '请输入发票抬头',
+    formItemProp: 'name',
+    rules: [{ required: true, message: '请输入发票抬头' }],
+    required: true
+  },
+  {
+    label: '纳税人识别号',
+    placeholder: '请输入纳税人识别号',
+    formItemProp: 'num',
+    rules: [{ message: '请输入纳税人识别号' }]
+  },
+  {
+    label: '注册地址',
+    placeholder: '请输入注册地址',
+    formItemProp: 'adress',
+    rules: [{ required: true, message: '请输入地址' }],
+    required: true
+  },
+  {
+    label: '注册电话',
+    placeholder: '请输入注册电话',
+    formItemProp: 'tel',
+    rules: [
+      { required: true, message: '请输入联系电话' },
+      { validator: asyncValidator, message: '电话格式不正确' }
+    ],
+    required: true
+  },
+  {
+    label: '开户行',
+    placeholder: '请输入开户行',
+    formItemProp: 'bank'
+  },
+  {
+    label: '银行账户',
+    placeholder: '请输入银行账户',
+    formItemProp: 'account'
+  }
+]);
+
+const formValue = reactive({
+  type: '企业',
+  name: '',
+  num: '',
+  adress: '',
+  tel: '',
+  address: '',
+  bank: '',
+  account: ''
+});
+
+const submit = (valid, errors) => {
+  if (valid) {
+    console.log('success', formValue);
+  } else {
+    console.log('error submit!!', errors);
+  }
+};
 </script>
 ```
 
@@ -118,32 +118,32 @@ app.use(Invoice);
 
 ### Props
 
-| 参数       | 说明                                 | 类型    | 默认值 |
-| ---------- | ------------------------------------ | ------- | ------ |
-| data       | 发票数据                             | Array   | -      |
-| form-value | 表单数据对象(使用表单校验时，_必填_) | object  | -      |
-| submit     | 是否显示提交按钮                     | boolean | `true` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| data | 发票数据 | Array | - |
+| form-value | 表单数据对象(使用表单校验时，_必填_) | object | - |
+| submit | 是否显示提交按钮 | boolean | `true` |
 
 ### Data 数据结构
 
 可选属性如下:
 
-| 键名           | 说明                                                               | 类型    |
-| -------------- | ------------------------------------------------------------------ | ------- |
-| type           | 类型，可选值有 `input`、`radio`                                    | string  |
-| label          | 表单项 `label`                                                     | string  |
-| placeholder    | 输入框 `placeholder`                                               | string  |
-| radio-label    | 单选 `label`                                                       | string  |
-| form-item-prop | 表单域 `v-model` 字段， 在使用表单校验功能的情况下，该属性是必填的 | string  |
-| rules          | 校验规则，[可参考 FormItem Rule 数据结构](#/zh-CN/form)            | Array   |
-| required       | 是否显示必填字段的标签旁边的红色星号                               | boolean |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| type | 类型，可选值有 `input`、`radio` | string |
+| label | 表单项 `label` | string |
+| placeholder | 输入框 `placeholder` | string |
+| radio-label | 单选 `label` | string |
+| form-item-prop | 表单域 `v-model` 字段， 在使用表单校验功能的情况下，该属性是必填的 | string |
+| rules | 校验规则，[可参考 FormItem Rule 数据结构](#/zh-CN/form) | Array |
+| required | 是否显示必填字段的标签旁边的红色星号 | boolean |
 
 ### Events
 
-| 事件名         | 说明           | 参数 | 返回值  |
-| -------------- | -------------- | ---- | ------- |
-| submit`v4.1.5` | 提交表单的方法 | -    | Promise |
-| on-submit      | 提交表单的方法 | -    | Promise |
+| 事件名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| submit`v4.1.5` | 提交表单的方法 | - | Promise |
+| on-submit | 提交表单的方法 | - | Promise |
 
 ## 主题定制
 
@@ -151,6 +151,6 @@ app.use(Invoice);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                  | 默认值            |
-| --------------------- | ----------------- |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-invoice-padding | _ 10px 10px 20px_ |
diff --git a/src/packages/__VUE/invoice/doc.taro.md b/src/packages/__VUE/invoice/doc.taro.md
index 679b596483..c6940e2ccb 100644
--- a/src/packages/__VUE/invoice/doc.taro.md
+++ b/src/packages/__VUE/invoice/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Invoice } from '@nutui/nutui-taro';
 
@@ -18,97 +18,97 @@ app.use(Invoice);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-invoice :data="data" :form-value="formValue" @submit="submit"></nut-invoice>
 </template>
 <script setup>
-  import { ref, reactive } from 'vue';
-  // Promise 异步校验
-  const asyncValidator = (val: string) => {
-    return new Promise((resolve) => {
-      console.log('模拟异步验证中...');
-      setTimeout(() => {
-        resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
-      }, 1000);
-    });
-  };
-
-  const data: any = ref([
-    {
-      type: 'radio',
-      label: '发票类型',
-      radioLabel: [
-        {
-          label: '企业'
-        },
-        {
-          label: '个人或事业单位'
-        }
-      ],
-      formItemProp: 'type',
-      required: true
-    },
-    {
-      label: '发票抬头',
-      placeholder: '请输入发票抬头',
-      formItemProp: 'name',
-      rules: [{ required: true, message: '请输入发票抬头' }],
-      required: true
-    },
-    {
-      label: '纳税人识别号',
-      placeholder: '请输入纳税人识别号',
-      formItemProp: 'num',
-      rules: [{ message: '请输入纳税人识别号' }]
-    },
-    {
-      label: '注册地址',
-      placeholder: '请输入注册地址',
-      formItemProp: 'adress',
-      rules: [{ required: true, message: '请输入地址' }],
-      required: true
-    },
-    {
-      label: '注册电话',
-      placeholder: '请输入注册电话',
-      formItemProp: 'tel',
-      rules: [
-        { required: true, message: '请输入联系电话' },
-        { validator: asyncValidator, message: '电话格式不正确' }
-      ],
-      required: true
-    },
-    {
-      label: '开户行',
-      placeholder: '请输入开户行',
-      formItemProp: 'bank'
-    },
-    {
-      label: '银行账户',
-      placeholder: '请输入银行账户',
-      formItemProp: 'account'
-    }
-  ]);
-
-  const formValue = reactive({
-    type: '企业',
-    name: '',
-    num: '',
-    adress: '',
-    tel: '',
-    address: '',
-    bank: '',
-    account: ''
+import { ref, reactive } from 'vue';
+// Promise 异步校验
+const asyncValidator = (val) => {
+  return new Promise((resolve) => {
+    console.log('模拟异步验证中...');
+    setTimeout(() => {
+      resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
+    }, 1000);
   });
-
-  const submit = (valid: boolean, errors: []) => {
-    if (valid) {
-      console.log('success', formValue);
-    } else {
-      console.log('error submit!!', errors);
-    }
-  };
+};
+
+const data = ref([
+  {
+    type: 'radio',
+    label: '发票类型',
+    radioLabel: [
+      {
+        label: '企业'
+      },
+      {
+        label: '个人或事业单位'
+      }
+    ],
+    formItemProp: 'type',
+    required: true
+  },
+  {
+    label: '发票抬头',
+    placeholder: '请输入发票抬头',
+    formItemProp: 'name',
+    rules: [{ required: true, message: '请输入发票抬头' }],
+    required: true
+  },
+  {
+    label: '纳税人识别号',
+    placeholder: '请输入纳税人识别号',
+    formItemProp: 'num',
+    rules: [{ message: '请输入纳税人识别号' }]
+  },
+  {
+    label: '注册地址',
+    placeholder: '请输入注册地址',
+    formItemProp: 'adress',
+    rules: [{ required: true, message: '请输入地址' }],
+    required: true
+  },
+  {
+    label: '注册电话',
+    placeholder: '请输入注册电话',
+    formItemProp: 'tel',
+    rules: [
+      { required: true, message: '请输入联系电话' },
+      { validator: asyncValidator, message: '电话格式不正确' }
+    ],
+    required: true
+  },
+  {
+    label: '开户行',
+    placeholder: '请输入开户行',
+    formItemProp: 'bank'
+  },
+  {
+    label: '银行账户',
+    placeholder: '请输入银行账户',
+    formItemProp: 'account'
+  }
+]);
+
+const formValue = reactive({
+  type: '企业',
+  name: '',
+  num: '',
+  adress: '',
+  tel: '',
+  address: '',
+  bank: '',
+  account: ''
+});
+
+const submit = (valid, errors) => {
+  if (valid) {
+    console.log('success', formValue);
+  } else {
+    console.log('error submit!!', errors);
+  }
+};
 </script>
 ```
 
@@ -118,32 +118,32 @@ app.use(Invoice);
 
 ### Props
 
-| 参数       | 说明                                 | 类型    | 默认值 |
-| ---------- | ------------------------------------ | ------- | ------ |
-| data       | 发票数据                             | Array   | -      |
-| form-value | 表单数据对象(使用表单校验时，_必填_) | object  | -      |
-| submit     | 是否显示提交按钮                     | boolean | `true` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| data | 发票数据 | Array | - |
+| form-value | 表单数据对象(使用表单校验时，_必填_) | object | - |
+| submit | 是否显示提交按钮 | boolean | `true` |
 
 ### Data 数据结构
 
 可选属性如下:
 
-| 键名           | 说明                                                               | 类型    |
-| -------------- | ------------------------------------------------------------------ | ------- |
-| type           | 类型，可选值有 `input`、`radio`                                    | string  |
-| label          | 表单项 `label`                                                     | string  |
-| placeholder    | 输入框 `placeholder`                                               | string  |
-| radio-label    | 单选 `label`                                                       | string  |
-| form-item-prop | 表单域 `v-model` 字段， 在使用表单校验功能的情况下，该属性是必填的 | string  |
-| rules          | 校验规则，[可参考 FormItem Rule 数据结构](#/zh-CN/form)            | Array   |
-| required       | 是否显示必填字段的标签旁边的红色星号                               | boolean |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| type | 类型，可选值有 `input`、`radio` | string |
+| label | 表单项 `label` | string |
+| placeholder | 输入框 `placeholder` | string |
+| radio-label | 单选 `label` | string |
+| form-item-prop | 表单域 `v-model` 字段， 在使用表单校验功能的情况下，该属性是必填的 | string |
+| rules | 校验规则，[可参考 FormItem Rule 数据结构](#/zh-CN/form) | Array |
+| required | 是否显示必填字段的标签旁边的红色星号 | boolean |
 
 ### Events
 
-| 事件名         | 说明           | 参数 | 返回值  |
-| -------------- | -------------- | ---- | ------- |
-| submit`v4.1.5` | 提交表单的方法 | -    | Promise |
-| on-submit      | 提交表单的方法 | -    | Promise |
+| 事件名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| submit`v4.1.5` | 提交表单的方法 | - | Promise |
+| on-submit | 提交表单的方法 | - | Promise |
 
 ## 主题定制
 
@@ -151,6 +151,6 @@ app.use(Invoice);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                  | 默认值            |
-| --------------------- | ----------------- |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-invoice-padding | _ 10px 10px 20px_ |
diff --git a/src/packages/__VUE/signature/demo.vue b/src/packages/__VUE/signature/demo.vue
index 3f1c3b0e97..b60682bbe6 100644
--- a/src/packages/__VUE/signature/demo.vue
+++ b/src/packages/__VUE/signature/demo.vue
@@ -8,8 +8,8 @@
     <h2>{{ translate('title') }}</h2>
     <div>
       <nut-signature
-        :line-width="lineWidth"
-        :stroke-style="strokeStyle"
+        :line-width="4"
+        stroke-style="green"
         @confirm="confirm2"
         @clear="clear2"
         @end="end"
@@ -19,79 +19,56 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('signature');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title: '修改颜色和签字粗细',
-      tips: 'Tips: 点击确认按钮,下方显示签名图片'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title: 'Modify color and signature thickness',
-      tips: 'Tips: click the confirm button, and the signature image is displayed below'
-    }
-  });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const demoSignUrl = ref('');
-    const demoSignUrl2 = ref('');
-    const state = reactive({
-      lineWidth: 4,
-      strokeStyle: 'green'
-    });
-
-    const clear = () => {
-      demoSignUrl.value = '';
-      console.log('清除事件');
-    };
-    const clear2 = () => {
-      demoSignUrl2.value = '';
-      console.log('清除事件');
-    };
-    const confirm = (canvas: any, data: any) => {
-      if (data === '') {
-        console.log(canvas);
-        return false;
-      }
-      demoSignUrl.value = data;
-      console.log('图片地址', canvas, data);
-    };
-    const confirm2 = (canvas: any, data: any) => {
-      if (data === '') {
-        console.log(canvas);
-        return false;
-      }
-      demoSignUrl2.value = data;
-      console.log('图片地址', canvas, data);
-    };
-    const start = () => {
-      console.log('签名开始');
-    };
-    const end = () => {
-      console.log('签名结束');
-    };
-    return {
-      ...state,
-      confirm,
-      clear,
-      translate,
-      demoSignUrl,
-      demoSignUrl2,
-      confirm2,
-      clear2,
-      start,
-      end
-    };
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title: '修改颜色和签字粗细',
+    tips: 'Tips: 点击确认按钮,下方显示签名图片'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title: 'Modify color and signature thickness',
+    tips: 'Tips: click the confirm button, and the signature image is displayed below'
   }
 });
+const demoSignUrl = ref('');
+const demoSignUrl2 = ref('');
+
+const clear = () => {
+  demoSignUrl.value = '';
+  console.log('清除事件');
+};
+const clear2 = () => {
+  demoSignUrl2.value = '';
+  console.log('清除事件');
+};
+const confirm = (canvas: any, data: any) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
+  }
+  demoSignUrl.value = data;
+  console.log('图片地址', canvas, data);
+};
+const confirm2 = (canvas: any, data: any) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
+  }
+  demoSignUrl2.value = data;
+  console.log('图片地址', canvas, data);
+};
+const start = () => {
+  console.log('签名开始');
+};
+const end = () => {
+  console.log('签名结束');
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/sku/demo.vue b/src/packages/__VUE/sku/demo.vue
index d8d4d105b8..b825a08cdf 100644
--- a/src/packages/__VUE/sku/demo.vue
+++ b/src/packages/__VUE/sku/demo.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
-    <nut-cell :title="translate('basic')" desc="" @click="base = true"></nut-cell>
+    <nut-cell :title="translate('basic')" desc="" @click="popup.base = true"></nut-cell>
 
     <h2>{{ translate('noSell') }}</h2>
-    <nut-cell :title="translate('noSell')" desc="" @click="notSell = true"></nut-cell>
+    <nut-cell :title="translate('noSell')" desc="" @click="popup.notSell = true"></nut-cell>
 
     <h2>{{ translate('customStepper') }}</h2>
-    <nut-cell :title="translate('customStepper')" desc="" @click="customStepper = true"></nut-cell>
+    <nut-cell :title="translate('customStepper')" desc="" @click="popup.customStepper = true"></nut-cell>
 
     <h2>{{ translate('slots') }}</h2>
-    <nut-cell :title="translate('slots')" desc="" @click="customBySlot = true"></nut-cell>
+    <nut-cell :title="translate('slots')" desc="" @click="popup.customBySlot = true"></nut-cell>
 
     <nut-sku
-      v-model:visible="base"
-      :sku="skuData"
-      :goods="goodsInfo"
+      v-model:visible="popup.base"
+      :sku="data.skuData"
+      :goods="data.goodsInfo"
       @select-sku="selectSku"
       @click-btn-operate="clickBtnOperate"
       @close="close"
     ></nut-sku>
 
     <nut-sku
-      v-model:visible="notSell"
-      :sku="skuData"
-      :goods="goodsInfo"
+      v-model:visible="popup.notSell"
+      :sku="data.skuData"
+      :goods="data.goodsInfo"
       :btn-extra-text="btnExtraText"
       :btn-options="['buy', 'cart']"
       @change-stepper="changeStepper"
@@ -39,9 +39,9 @@
     </nut-sku>
 
     <nut-sku
-      v-model:visible="customStepper"
-      :sku="skuData"
-      :goods="goodsInfo"
+      v-model:visible="popup.customStepper"
+      :sku="data.skuData"
+      :goods="data.goodsInfo"
       :stepper-max="7"
       :stepper-min="2"
       :stepper-extra-text="stepperExtraText"
@@ -54,22 +54,22 @@
     ></nut-sku>
 
     <nut-sku
-      v-model:visible="customBySlot"
-      :sku="skuData"
-      :goods="goodsInfo"
+      v-model:visible="popup.customBySlot"
+      :sku="data.skuData"
+      :goods="data.goodsInfo"
       :btn-options="['buy', 'cart']"
       @select-sku="selectSku"
       @click-btn-operate="clickBtnOperate"
     >
       <template #sku-header-price>
         <div>
-          <nut-price :price="goodsInfo.price" :need-symbol="true" :thousands="false"> </nut-price>
+          <nut-price :price="data.goodsInfo.price" :need-symbol="true" :thousands="false"> </nut-price>
           <span class="tag"></span>
         </div>
       </template>
 
       <template #sku-header-extra>
-        <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{ goodsInfo.skuId }} </span>
+        <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{ data.goodsInfo.skuId }} </span>
       </template>
 
       <template #sku-operate>
@@ -85,14 +85,14 @@
             style="box-shadow: none; padding: 13px 0"
             title="送至"
             :desc="addressDesc"
-            @click="showAddressPopup = true"
+            @click="popup.showAddressPopup = true"
           ></nut-cell>
         </div>
       </template>
     </nut-sku>
 
     <nut-address
-      v-model:visible="showAddressPopup"
+      v-model:visible="popup.showAddressPopup"
       type="exist"
       :exist-address="existAddress"
       :is-show-custom-address="false"
@@ -103,29 +103,26 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, ref, toRefs, onMounted, defineComponent } from 'vue';
-
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '@/packages/nutui.vue';
 const { translate } = createComponent('sku');
-
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      noSell: '不可售',
-      customStepper: '自定义计步器',
-      slots: '自定义插槽'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      noSell: 'Not Sell',
-      customStepper: 'Custom Stepper',
-      slots: 'Custom Slots'
-    }
-  });
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    noSell: '不可售',
+    customStepper: '自定义计步器',
+    slots: '自定义插槽'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    noSell: 'Not Sell',
+    customStepper: 'Custom Stepper',
+    slots: 'Custom Slots'
+  }
+});
 
 interface Skus {
   id: number;
@@ -146,151 +143,128 @@ interface Data {
   goodsInfo: any;
   imagePathMap: any;
 }
+const popup = reactive({
+  base: false,
+  notSell: false,
+  customStepper: false,
+  customBySlot: false,
+
+  showAddressPopup: false
+});
+
+const data = reactive<Data>({
+  skuData: [],
+  goodsInfo: {},
+  imagePathMap: {}
+});
 
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const popup = reactive({
-      base: false,
-      notSell: false,
-      customStepper: false,
-      customBySlot: false,
-
-      showAddressPopup: false
-    });
-
-    const data = reactive<Data>({
-      skuData: [],
-      goodsInfo: {},
-      imagePathMap: {}
-    });
-
-    const stepperExtraText = () => {
-      return `<div style="width:100%;text-align:right;color:#F00">2 件起售</div>`;
-    };
-
-    const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
-    const addressDesc = ref('(配送地会影响库存，请先确认)');
-    const existAddress = ref([
-      {
-        id: 1,
-        addressDetail: 'th ',
-        cityName: '石景山区',
-        countyName: '城区',
-        provinceName: '北京',
-        selectedAddress: true,
-        townName: ''
-      },
-      {
-        id: 2,
-        addressDetail: '12_ ',
-        cityName: '电饭锅',
-        countyName: '扶绥县',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      },
-      {
-        id: 3,
-        addressDetail: '发大水比 ',
-        cityName: '放到',
-        countyName: '广宁街道',
-        provinceName: '钓鱼岛全区',
-        selectedAddress: false,
-        townName: ''
-      },
-      {
-        id: 4,
-        addressDetail: '还是想吧百度吧 ',
-        cityName: '研发',
-        countyName: '八里庄街道',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      }
-    ]);
-
-    onMounted(() => {
-      getData();
-    });
-
-    const getData = () => {
-      fetch('//storage.360buyimg.com/nutui/3x/data.js')
-        .then((response) => response.json())
-        .then((res) => {
-          const { Sku, Goods, imagePathMap } = res;
-          data.skuData = Sku;
-          data.goodsInfo = Goods;
-          data.imagePathMap = imagePathMap;
-        }) //执行结果是 resolve就调用then方法
-        .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-    };
-    const selectSku = (s: any) => {
-      const { sku, parentIndex } = s;
-
-      if (sku.disable) return false;
-
-      data.skuData[parentIndex].list.forEach((s) => {
-        s.active = s.id == sku.id;
-      });
-
-      data.goodsInfo = {
-        skuId: sku.id,
-        price: '4599.00' // 商品信息展示区，商品价格
-      };
-
-      data.skuData[0].list.forEach((el) => {
-        if (el.active && !el.disable) {
-          data.goodsInfo.imagePath = data.imagePathMap[el.id];
-        }
-      });
-    };
-
-    // stepper 更改
-    const changeStepper = (count: number) => {
-      console.log('购买数量', count);
-    };
-
-    // stepper 极限值
-    const overLimit = (val: any) => {
-      if (val.action == 'reduce') {
-        showToast.text(`至少买${val.value}件哦`);
-      } else {
-        showToast.text(`最多买${val.value}件哦`);
-      }
-    };
-
-    const clickBtnOperate = (op: string) => {
-      console.log('点击了操作按钮', op);
-    };
-    // 关闭弹框
-    const close = () => {
-      console.log('选择弹框关闭');
-    };
-
-    const selectedAddress = (prevExistAdd: any, nowExistAdd: any) => {
-      const { provinceName, countyName, cityName } = nowExistAdd;
-      addressDesc.value = `${provinceName}${countyName}${cityName}`;
-    };
-
-    return {
-      selectSku,
-      changeStepper,
-      clickBtnOperate,
-      close,
-      existAddress,
-      selectedAddress,
-      addressDesc,
-      stepperExtraText,
-      btnExtraText,
-      overLimit,
-      translate,
-      ...toRefs(popup),
-      ...toRefs(data)
-    };
+const stepperExtraText = () => {
+  return `<div style="width:100%;text-align:right;color:#F00">2 件起售</div>`;
+};
+
+const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
+const addressDesc = ref('(配送地会影响库存，请先确认)');
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: 'th ',
+    cityName: '石景山区',
+    countyName: '城区',
+    provinceName: '北京',
+    selectedAddress: true,
+    townName: ''
+  },
+  {
+    id: 2,
+    addressDetail: '12_ ',
+    cityName: '电饭锅',
+    countyName: '扶绥县',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 3,
+    addressDetail: '发大水比 ',
+    cityName: '放到',
+    countyName: '广宁街道',
+    provinceName: '钓鱼岛全区',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 4,
+    addressDetail: '还是想吧百度吧 ',
+    cityName: '研发',
+    countyName: '八里庄街道',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
   }
+]);
+
+onMounted(() => {
+  getData();
 });
+
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/data.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { Sku, Goods, imagePathMap } = res;
+      data.skuData = Sku;
+      data.goodsInfo = Goods;
+      data.imagePathMap = imagePathMap;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+};
+const selectSku = (s: any) => {
+  const { sku, parentIndex } = s;
+
+  if (sku.disable) return false;
+
+  data.skuData[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+
+  data.goodsInfo = {
+    skuId: sku.id,
+    price: '4599.00' // 商品信息展示区，商品价格
+  };
+
+  data.skuData[0].list.forEach((el) => {
+    if (el.active && !el.disable) {
+      data.goodsInfo.imagePath = data.imagePathMap[el.id];
+    }
+  });
+};
+
+// stepper 更改
+const changeStepper = (count: number) => {
+  console.log('购买数量', count);
+};
+
+// stepper 极限值
+const overLimit = (val: any) => {
+  if (val.action == 'reduce') {
+    showToast.text(`至少买${val.value}件哦`);
+  } else {
+    showToast.text(`最多买${val.value}件哦`);
+  }
+};
+
+const clickBtnOperate = (op: string) => {
+  console.log('点击了操作按钮', op);
+};
+// 关闭弹框
+const close = () => {
+  console.log('选择弹框关闭');
+};
+
+const selectedAddress = (_prevExistAdd: any, nowExistAdd: any) => {
+  const { provinceName, countyName, cityName } = nowExistAdd;
+  addressDesc.value = `${provinceName}${countyName}${cityName}`;
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/sku/doc.en-US.md b/src/packages/__VUE/sku/doc.en-US.md
index a581330d03..0a5ee54af1 100644
--- a/src/packages/__VUE/sku/doc.en-US.md
+++ b/src/packages/__VUE/sku/doc.en-US.md
@@ -6,7 +6,7 @@ Often used for commodity selection
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Sku } from '@nutui/nutui';
 
@@ -18,60 +18,55 @@ app.use(Sku);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :title="Basic Usage" desc="" @click="base = true"></nut-cell>
   <nut-sku
     v-model:visible="base"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     @selectSku="selectSku"
     @clickBtnOperate="clickBtnOperate"
     @close="close"
   ></nut-sku>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup() {
-      const base = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      onMounted(() => {
-        fetch('https://storage.360buyimg.com/nutui/3x/data.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { Sku, Goods, imagePathMap } = res;
-            data.sku = Sku;
-            data.goods = Goods;
-          }) //执行结果是 resolve就调用then方法
-          .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-      });
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '4599.00',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
-        };
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      // 关闭商品规格弹框
-      const close = () => {};
-      return { base, selectSku, clickBtnOperate, close, ...toRefs(data) };
-    }
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+const base = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+onMounted(() => {
+  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { Sku, Goods, imagePathMap } = res;
+      data.sku = Sku;
+      data.goods = Goods;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+});
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '4599.00',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   };
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
+// 关闭商品规格弹框
+const close = () => {};
 </script>
 ```
 
@@ -81,13 +76,13 @@ app.use(Sku);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Not Sell" desc="" @click="notSell = true"></nut-cell>
   <nut-sku
     v-model:visible="notSell"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     :btnExtraText="btnExtraText"
     @changeStepper="changeStepper"
     @selectSku="selectSku"
@@ -101,68 +96,63 @@ app.use(Sku);
     </template>
   </nut-sku>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup() {
-      const notSell = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
-
-      onMounted(() => {
-        fetch('https://storage.360buyimg.com/nutui/3x/data.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { Sku, Goods, imagePathMap } = res;
-            data.sku = Sku;
-            data.goods = Goods;
-          }) //执行结果是 resolve就调用then方法
-          .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-      });
-
-      // inputNumber 更改
-      const changeStepper = (count: number) => {
-        console.log('购买数量', count);
-      };
-
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '4599.00',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg'
-        };
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      return { notSell, changeStepper, selectSku, btnExtraText, ...toRefs(data) };
-    }
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+const notSell = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
+
+onMounted(() => {
+  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { Sku, Goods, imagePathMap } = res;
+      data.sku = Sku;
+      data.goods = Goods;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+});
+
+// inputNumber 更改
+const changeStepper = (count) => {
+  console.log('购买数量', count);
+};
+
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '4599.00',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg'
   };
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
 </script>
 <style>
-  .sku-operate-box {
-    width: 100%;
-    display: flex;
-    padding: 8px 10px;
-    box-sizing: border-box;
-  }
-  .sku-operate-box-dis {
-    flex: 1;
-  }
-  .sku-operate-box-dis:first-child {
-    margin-right: 18px;
-  }
+.sku-operate-box {
+  width: 100%;
+  display: flex;
+  padding: 8px 10px;
+  box-sizing: border-box;
+}
+.sku-operate-box-dis {
+  flex: 1;
+}
+.sku-operate-box-dis:first-child {
+  margin-right: 18px;
+}
 </style>
 ```
 
@@ -174,13 +164,13 @@ You can configure the maximum value and minimum value of the digital input box a
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Custom Stepper" desc="" @click="customStepper = true"></nut-cell>
   <nut-sku
     v-model:visible="customStepper"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     :stepperMax="7"
     :stepperMin="2"
     :stepperExtraText="stepperExtraText"
@@ -191,65 +181,59 @@ You can configure the maximum value and minimum value of the digital input box a
     @clickBtnOperate="clickBtnOperate"
   ></nut-sku>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const customStepper = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      onMounted(() => {
-        fetch('https://storage.360buyimg.com/nutui/3x/data.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { Sku, Goods, imagePathMap } = res;
-            data.sku = Sku;
-            data.goods = Goods;
-          }) //执行结果是 resolve就调用then方法
-          .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-      });
-
-      const stepperExtraText = () => {
-        return `<div style="width:100%;text-align:right;color:#F00">2 件起售</div>`;
-      };
-      // inputNumber 更改
-      const changeStepper = (count: number) => {
-        console.log('购买数量', count);
-      };
-
-      // inputNumber 极限值
-      const overLimit = (val: any) => {
-        if (val.action == 'reduce') {
-          showToast.text(`至少买${val.value}件哦`);
-        } else {
-          showToast.text(`最多买${val.value}件哦`);
-        }
-      };
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '4599.00',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
-        };
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      return { customStepper, overLimit, changeStepper, selectSku, clickBtnOperate, stepperExtraText, ...toRefs(data) };
-    }
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { showToast } from '@nutui/nutui';
+const customStepper = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+onMounted(() => {
+  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { Sku, Goods, imagePathMap } = res;
+      data.sku = Sku;
+      data.goods = Goods;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+});
+
+const stepperExtraText = () => {
+  return `<div style="width:100%;text-align:right;color:#F00">2 件起售</div>`;
+};
+// inputNumber 更改
+const changeStepper = (count) => {
+  console.log('购买数量', count);
+};
+
+// inputNumber 极限值
+const overLimit = (val) => {
+  if (val.action == 'reduce') {
+    showToast.text(`至少买${val.value}件哦`);
+  } else {
+    showToast.text(`最多买${val.value}件哦`);
+  }
+};
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '4599.00',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   };
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
 </script>
 ```
 
@@ -261,13 +245,13 @@ The default partition is divided into several areas, which are defined as slots
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Custom Slots" desc="" @click="customBySlot = true"></nut-cell>
   <nut-sku
     v-model:visible="customBySlot"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     :btnOptions="['buy', 'cart']"
     @selectSku="selectSku"
     @clickBtnOperate="clickBtnOperate"
@@ -281,7 +265,7 @@ The default partition is divided into several areas, which are defined as slots
     </template>
     <!-- 商品展示区，编号区域 -->
     <template #sku-header-extra>
-      <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{skuId}} </span>
+      <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{ skuId }} </span>
     </template>
     <!-- sku 展示区上方与商品信息展示区下方区域，无默认展示内容 -->
     <template #sku-select-top>
@@ -290,7 +274,7 @@ The default partition is divided into several areas, which are defined as slots
           style="box-shadow:none;padding:13px 0"
           title="送至"
           :desc="addressDesc"
-          @click="showAddressPopup=true"
+          @click="showAddressPopup = true"
         ></nut-cell>
       </div>
     </template>
@@ -312,112 +296,107 @@ The default partition is divided into several areas, which are defined as slots
     exist-address-title="配送至"
   ></nut-address>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup() {
-      const customBySlot = ref(false);
-      const showAddressPopup = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      const addressDesc = ref('(配送地会影响库存，请先确认)');
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: 'th ',
-          cityName: '石景山区',
-          countyName: '城区',
-          provinceName: '北京',
-          selectedAddress: true,
-          townName: ''
-        },
-        {
-          id: 2,
-          addressDetail: '12 ',
-          cityName: '电饭锅',
-          countyName: '扶绥县',
-          provinceName: '北京',
-          selectedAddress: false,
-          townName: ''
-        },
-        {
-          id: 3,
-          addressDetail: '发大水比 ',
-          cityName: '放到',
-          countyName: '广宁街道',
-          provinceName: '钓鱼岛全区',
-          selectedAddress: false,
-          townName: ''
-        },
-        {
-          id: 4,
-          addressDetail: '还是想吧百度吧 ',
-          cityName: '研发',
-          countyName: '八里庄街道',
-          provinceName: '北京',
-          selectedAddress: false,
-          townName: ''
-        }
-      ]);
-
-      onMounted(() => {
-        fetch('https://storage.360buyimg.com/nutui/3x/data.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { Sku, Goods, imagePathMap } = res;
-            data.sku = Sku;
-            data.goods = Goods;
-          }) //执行结果是 resolve就调用then方法
-          .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-      });
-
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '6002.10',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
-        };
-      };
-      const selectedAddress = (prevExistAdd: any, nowExistAdd: any) => {
-        const { provinceName, countyName, cityName } = nowExistAdd;
-        addressDesc.value = `${provinceName}${countyName}${cityName}`;
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      return { customBySlot, selectSku, clickBtnOperate, existAddress, addressDesc, selectedAddress, ...toRefs(data) };
-    }
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+const customBySlot = ref(false);
+const showAddressPopup = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+const addressDesc = ref('(配送地会影响库存，请先确认)');
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: 'th ',
+    cityName: '石景山区',
+    countyName: '城区',
+    provinceName: '北京',
+    selectedAddress: true,
+    townName: ''
+  },
+  {
+    id: 2,
+    addressDetail: '12 ',
+    cityName: '电饭锅',
+    countyName: '扶绥县',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 3,
+    addressDetail: '发大水比 ',
+    cityName: '放到',
+    countyName: '广宁街道',
+    provinceName: '钓鱼岛全区',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 4,
+    addressDetail: '还是想吧百度吧 ',
+    cityName: '研发',
+    countyName: '八里庄街道',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
+  }
+]);
+
+onMounted(() => {
+  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { Sku, Goods, imagePathMap } = res;
+      data.sku = Sku;
+      data.goods = Goods;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+});
+
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '6002.10',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   };
+};
+const selectedAddress = (prevExistAdd, nowExistAdd) => {
+  const { provinceName, countyName, cityName } = nowExistAdd;
+  addressDesc.value = `${provinceName}${countyName}${cityName}`;
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
 </script>
 
 <style>
-  .sku-operate-box {
-    width: 100%;
-    display: flex;
-    padding: 8px 10px;
-    box-sizing: border-box;
-  }
-  .sku-operate-item {
-    flex: 1;
-  }
-  .sku-operate-item:first-child {
-    border-top-left-radius: 20px;
-    border-bottom-left-radius: 20px;
-  }
-  .sku-operate-item:last-child {
-    border-top-right-radius: 20px;
-    border-bottom-right-radius: 20px;
-  }
+.sku-operate-box {
+  width: 100%;
+  display: flex;
+  padding: 8px 10px;
+  box-sizing: border-box;
+}
+.sku-operate-item {
+  flex: 1;
+}
+.sku-operate-item:first-child {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+.sku-operate-item:last-child {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
 </style>
 ```
 
@@ -427,49 +406,49 @@ The default partition is divided into several areas, which are defined as slots
 
 ### Props
 
-| Attribute          | Description                                   | Type                | Default        |
-| ------------------ | --------------------------------------------- | ------------------- | -------------- |
-| v-model:visible    | Whether to open popup                         | boolean             | `false`        |
-| sku                | Sku data                                      | Array               | `[]`           |
-| goods              | Product Info                                  | object              | -              |
-| stepper-max        | Stepper max                                   | string \| number    | `99999`        |
-| stepper-min        | Stepper min                                   | string \| number    | `1`            |
-| btn-options        | Bottom button                                 | Array               | `[confirm]`    |
-| btn-extra-text     | Add text above button                         | string              | -              |
-| stepper-title      | Stepper left text                             | string              | `Buy Num`      |
-| stepper-extra-text | The text between the stepper and the headline | Function \| boolean | `false`        |
-| buy-text           | Buy button text                               | string              | `Buy It Now`   |
-| add-cart-text      | Add cart button text                          | string              | `Add  To cart` |
-| confirm-text       | Confirm button text                           | string              | `Confirm`      |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model:visible | Whether to open popup | boolean | `false` |
+| sku | Sku data | Array | `[]` |
+| goods | Product Info | object | - |
+| stepper-max | Stepper max | string \| number | `99999` |
+| stepper-min | Stepper min | string \| number | `1` |
+| btn-options | Bottom button | Array | `[confirm]` |
+| btn-extra-text | Add text above button | string | - |
+| stepper-title | Stepper left text | string | `Buy Num` |
+| stepper-extra-text | The text between the stepper and the headline | Function \| boolean | `false` |
+| buy-text | Buy button text | string | `Buy It Now` |
+| add-cart-text | Add cart button text | string | `Add  To cart` |
+| confirm-text | Confirm button text | string | `Confirm` |
 
 ### Events
 
-| Attribute         | Description                                | Arguments                                  |
-| ----------------- | ------------------------------------------ | ------------------------------------------ |
-| select-sku        | Emitted when select sku                    | {sku,skuIndex,parentSku,parentIndex}       |
-| add               | Emitted when click stepper add button      | value                                      |
-| reduce            | Emitted when click stepper reduce button   | value                                      |
-| overLimit         | Emitted when click stepper disabled button | value                                      |
-| change-stepper    | Emitted when click stepper change          | value                                      |
-| click-btn-operate | Emitted when click bottom button           | {type:'confirm',value:'inputNumber value'} |
-| click-close-icon  | Emitted when click close button            | -                                          |
-| click-overlay     | Emitted when click mask                    | -                                          |
-| close             | Emitted when popup close                   | -                                          |
+| Attribute | Description | Arguments |
+| --- | --- | --- |
+| select-sku | Emitted when select sku | {sku,skuIndex,parentSku,parentIndex} |
+| add | Emitted when click stepper add button | value |
+| reduce | Emitted when click stepper reduce button | value |
+| overLimit | Emitted when click stepper disabled button | value |
+| change-stepper | Emitted when click stepper change | value |
+| click-btn-operate | Emitted when click bottom button | {type:'confirm',value:'inputNumber value'} |
+| click-close-icon | Emitted when click close button | - |
+| click-overlay | Emitted when click mask | - |
+| close | Emitted when popup close | - |
 
 ### Slots
 
 The default partition is divided into several areas, which are defined as slots that can be replaced as required。
 
-| Event              | Description                     |
-| ------------------ | ------------------------------- |
-| sku-header         | Custom header                   |
-| sku-header-price   | Custom header price area        |
-| sku-header-extra   | Extra header area               |
-| sku-select-top     | Custom select top               |
-| sku-select         | Custom sku                      |
-| sku-stepper        | Custom stepper                  |
-| sku-stepper-bottom | Custom stepper bottom           |
-| sku-operate        | Custom stepper bottom operation |
+| Event | Description |
+| --- | --- |
+| sku-header | Custom header |
+| sku-header-price | Custom header price area |
+| sku-header-extra | Extra header area |
+| sku-select-top | Custom select top |
+| sku-select | Custom sku |
+| sku-stepper | Custom stepper |
+| sku-stepper-bottom | Custom stepper bottom |
+| sku-operate | Custom stepper bottom operation |
 
 ### goods Data Structure
 
@@ -581,30 +560,30 @@ sku: [
 
 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-sku-item-border                  | _1px solid var(--nut-primary-color)_                                                                    |
-| --nut-sku-item-disable-line            | _line-through_                                                                                          |
-| --nut-sku-opetate-bg-default           | _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_                   |
-| --nut-sku-item-active-bg               | _var(--nut-primary-color)_                                                                              |
-| --nut-sku-opetate-bg-buy               | _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_ |
-| --nut-sku-spec-height                  | _30px_                                                                                                  |
-| --nut-sku-spec-line-height             | _var(--nut-sku-spec-height)_                                                                            |
-| --nut-sku-spec-font-size               | _11px_                                                                                                  |
-| --nut-sku-spec-background              | _rgba(242, 242, 242, 1)_                                                                                |
-| --nut-sku-spec-color                   | _var(--nut-black)_                                                                                      |
-| --nut-sku-spec-margin-right            | _12px_                                                                                                  |
-| --nut-sku-spec-padding                 | _0 18px_                                                                                                |
-| --nut-sku-spec-title-font-weight       | _bold_                                                                                                  |
-| --nut-sku-spec-title-font-size         | _13px_                                                                                                  |
-| --nut-sku-spec-title-color             | _var(--nut-black)_                                                                                      |
-| --nut-sku-spec-title-margin-bottom     | _18px_                                                                                                  |
-| --nut-sku-operate-btn-height           | _54px_                                                                                                  |
-| --nut-sku-operate-btn-border-top       | _0_                                                                                                     |
-| --nut-sku-operate-btn-item-height      | _40px_                                                                                                  |
-| --nut-sku-operate-btn-item-line-height | _var(--nut-sku-operate-btn-item-height)_                                                                |
-| --nut-sku-operate-btn-item-font-size   | _15px_                                                                                                  |
-| --nut-sku-operate-btn-item-font-weight | _normal_                                                                                                |
-| --nut-sku-product-img-width            | _100px_                                                                                                 |
-| --nut-sku-product-img-height           | _var(--nut-sku-product-img-width)_                                                                      |
-| --nut-sku-product-img-border-radius    | _0_                                                                                                     |
+| Name | Default Value |
+| --- | --- |
+| --nut-sku-item-border | _1px solid var(--nut-primary-color)_ |
+| --nut-sku-item-disable-line | _line-through_ |
+| --nut-sku-opetate-bg-default | _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_ |
+| --nut-sku-item-active-bg | _var(--nut-primary-color)_ |
+| --nut-sku-opetate-bg-buy | _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_ |
+| --nut-sku-spec-height | _30px_ |
+| --nut-sku-spec-line-height | _var(--nut-sku-spec-height)_ |
+| --nut-sku-spec-font-size | _11px_ |
+| --nut-sku-spec-background | _rgba(242, 242, 242, 1)_ |
+| --nut-sku-spec-color | _var(--nut-black)_ |
+| --nut-sku-spec-margin-right | _12px_ |
+| --nut-sku-spec-padding | _0 18px_ |
+| --nut-sku-spec-title-font-weight | _bold_ |
+| --nut-sku-spec-title-font-size | _13px_ |
+| --nut-sku-spec-title-color | _var(--nut-black)_ |
+| --nut-sku-spec-title-margin-bottom | _18px_ |
+| --nut-sku-operate-btn-height | _54px_ |
+| --nut-sku-operate-btn-border-top | _0_ |
+| --nut-sku-operate-btn-item-height | _40px_ |
+| --nut-sku-operate-btn-item-line-height | _var(--nut-sku-operate-btn-item-height)_ |
+| --nut-sku-operate-btn-item-font-size | _15px_ |
+| --nut-sku-operate-btn-item-font-weight | _normal_ |
+| --nut-sku-product-img-width | _100px_ |
+| --nut-sku-product-img-height | _var(--nut-sku-product-img-width)_ |
+| --nut-sku-product-img-border-radius | _0_ |
diff --git a/src/packages/__VUE/sku/doc.md b/src/packages/__VUE/sku/doc.md
index e8854ff263..3dad664e03 100644
--- a/src/packages/__VUE/sku/doc.md
+++ b/src/packages/__VUE/sku/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Sku } from '@nutui/nutui';
 
@@ -18,60 +18,55 @@ app.use(Sku);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :title="`基础用法`" desc="" @click="base = true"></nut-cell>
   <nut-sku
     v-model:visible="base"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     @selectSku="selectSku"
     @clickBtnOperate="clickBtnOperate"
     @close="close"
   ></nut-sku>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup() {
-      const base = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      onMounted(() => {
-        fetch('https://storage.360buyimg.com/nutui/3x/data.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { Sku, Goods, imagePathMap } = res;
-            data.sku = Sku;
-            data.goods = Goods;
-          }) //执行结果是 resolve就调用then方法
-          .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-      });
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '4599.00',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
-        };
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      // 关闭商品规格弹框
-      const close = () => {};
-      return { base, selectSku, clickBtnOperate, close, ...toRefs(data) };
-    }
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+const base = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+onMounted(() => {
+  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { Sku, Goods, imagePathMap } = res;
+      data.sku = Sku;
+      data.goods = Goods;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+});
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '4599.00',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   };
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
+// 关闭商品规格弹框
+const close = () => {};
 </script>
 ```
 
@@ -81,13 +76,13 @@ app.use(Sku);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="不可售" desc="" @click="notSell = true"></nut-cell>
   <nut-sku
     v-model:visible="notSell"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     :btnExtraText="btnExtraText"
     @changeStepper="changeStepper"
     @selectSku="selectSku"
@@ -101,68 +96,63 @@ app.use(Sku);
     </template>
   </nut-sku>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup() {
-      const notSell = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
-
-      onMounted(() => {
-        fetch('https://storage.360buyimg.com/nutui/3x/data.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { Sku, Goods, imagePathMap } = res;
-            data.sku = Sku;
-            data.goods = Goods;
-          }) //执行结果是 resolve就调用then方法
-          .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-      });
-
-      // inputNumber 更改
-      const changeStepper = (count: number) => {
-        console.log('购买数量', count);
-      };
-
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '4599.00',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg'
-        };
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      return { notSell, changeStepper, selectSku, btnExtraText, ...toRefs(data) };
-    }
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+const notSell = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
+
+onMounted(() => {
+  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { Sku, Goods, imagePathMap } = res;
+      data.sku = Sku;
+      data.goods = Goods;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+});
+
+// inputNumber 更改
+const changeStepper = (count) => {
+  console.log('购买数量', count);
+};
+
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '4599.00',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg'
   };
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
 </script>
 <style>
-  .sku-operate-box {
-    width: 100%;
-    display: flex;
-    padding: 8px 10px;
-    box-sizing: border-box;
-  }
-  .sku-operate-box-dis {
-    flex: 1;
-  }
-  .sku-operate-box-dis:first-child {
-    margin-right: 18px;
-  }
+.sku-operate-box {
+  width: 100%;
+  display: flex;
+  padding: 8px 10px;
+  box-sizing: border-box;
+}
+.sku-operate-box-dis {
+  flex: 1;
+}
+.sku-operate-box-dis:first-child {
+  margin-right: 18px;
+}
 </style>
 ```
 
@@ -174,13 +164,13 @@ app.use(Sku);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="自定义计步器" desc="" @click="customStepper = true"></nut-cell>
   <nut-sku
     v-model:visible="customStepper"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     :stepperMax="7"
     :stepperMin="2"
     :stepperExtraText="stepperExtraText"
@@ -191,65 +181,59 @@ app.use(Sku);
     @clickBtnOperate="clickBtnOperate"
   ></nut-sku>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const customStepper = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      onMounted(() => {
-        fetch('https://storage.360buyimg.com/nutui/3x/data.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { Sku, Goods, imagePathMap } = res;
-            data.sku = Sku;
-            data.goods = Goods;
-          }) //执行结果是 resolve就调用then方法
-          .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-      });
-
-      const stepperExtraText = () => {
-        return `<div style="width:100%;text-align:right;color:#F00">2 件起售</div>`;
-      };
-      // inputNumber 更改
-      const changeStepper = (count: number) => {
-        console.log('购买数量', count);
-      };
-
-      // inputNumber 极限值
-      const overLimit = (val: any) => {
-        if (val.action == 'reduce') {
-          showToast.text(`至少买${val.value}件哦`);
-        } else {
-          showToast.text(`最多买${val.value}件哦`);
-        }
-      };
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '4599.00',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
-        };
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      return { customStepper, overLimit, changeStepper, selectSku, clickBtnOperate, stepperExtraText, ...toRefs(data) };
-    }
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { showToast } from '@nutui/nutui';
+const customStepper = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+onMounted(() => {
+  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { Sku, Goods, imagePathMap } = res;
+      data.sku = Sku;
+      data.goods = Goods;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+});
+
+const stepperExtraText = () => {
+  return `<div style="width:100%;text-align:right;color:#F00">2 件起售</div>`;
+};
+// inputNumber 更改
+const changeStepper = (count) => {
+  console.log('购买数量', count);
+};
+
+// inputNumber 极限值
+const overLimit = (val) => {
+  if (val.action == 'reduce') {
+    showToast.text(`至少买${val.value}件哦`);
+  } else {
+    showToast.text(`最多买${val.value}件哦`);
+  }
+};
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '4599.00',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   };
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
 </script>
 ```
 
@@ -261,13 +245,13 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="通过插槽自定义设置" desc="" @click="customBySlot = true"></nut-cell>
   <nut-sku
     v-model:visible="customBySlot"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     :btnOptions="['buy', 'cart']"
     @selectSku="selectSku"
     @clickBtnOperate="clickBtnOperate"
@@ -281,7 +265,7 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
     </template>
     <!-- 商品展示区，编号区域 -->
     <template #sku-header-extra>
-      <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{skuId}} </span>
+      <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{ skuId }} </span>
     </template>
     <!-- sku 展示区上方与商品信息展示区下方区域，无默认展示内容 -->
     <template #sku-select-top>
@@ -290,7 +274,7 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
           style="box-shadow:none;padding:13px 0"
           title="送至"
           :desc="addressDesc"
-          @click="showAddressPopup=true"
+          @click="showAddressPopup = true"
         ></nut-cell>
       </div>
     </template>
@@ -312,112 +296,107 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
     exist-address-title="配送至"
   ></nut-address>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup() {
-      const customBySlot = ref(false);
-      const showAddressPopup = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      const addressDesc = ref('(配送地会影响库存，请先确认)');
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: 'th ',
-          cityName: '石景山区',
-          countyName: '城区',
-          provinceName: '北京',
-          selectedAddress: true,
-          townName: ''
-        },
-        {
-          id: 2,
-          addressDetail: '12 ',
-          cityName: '电饭锅',
-          countyName: '扶绥县',
-          provinceName: '北京',
-          selectedAddress: false,
-          townName: ''
-        },
-        {
-          id: 3,
-          addressDetail: '发大水比 ',
-          cityName: '放到',
-          countyName: '广宁街道',
-          provinceName: '钓鱼岛全区',
-          selectedAddress: false,
-          townName: ''
-        },
-        {
-          id: 4,
-          addressDetail: '还是想吧百度吧 ',
-          cityName: '研发',
-          countyName: '八里庄街道',
-          provinceName: '北京',
-          selectedAddress: false,
-          townName: ''
-        }
-      ]);
-
-      onMounted(() => {
-        fetch('https://storage.360buyimg.com/nutui/3x/data.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { Sku, Goods, imagePathMap } = res;
-            data.sku = Sku;
-            data.goods = Goods;
-          }) //执行结果是 resolve就调用then方法
-          .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
-      });
-
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '6002.10',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
-        };
-      };
-      const selectedAddress = (prevExistAdd: any, nowExistAdd: any) => {
-        const { provinceName, countyName, cityName } = nowExistAdd;
-        addressDesc.value = `${provinceName}${countyName}${cityName}`;
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      return { customBySlot, selectSku, clickBtnOperate, existAddress, addressDesc, selectedAddress, ...toRefs(data) };
-    }
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+const customBySlot = ref(false);
+const showAddressPopup = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+const addressDesc = ref('(配送地会影响库存，请先确认)');
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: 'th ',
+    cityName: '石景山区',
+    countyName: '城区',
+    provinceName: '北京',
+    selectedAddress: true,
+    townName: ''
+  },
+  {
+    id: 2,
+    addressDetail: '12 ',
+    cityName: '电饭锅',
+    countyName: '扶绥县',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 3,
+    addressDetail: '发大水比 ',
+    cityName: '放到',
+    countyName: '广宁街道',
+    provinceName: '钓鱼岛全区',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 4,
+    addressDetail: '还是想吧百度吧 ',
+    cityName: '研发',
+    countyName: '八里庄街道',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
+  }
+]);
+
+onMounted(() => {
+  fetch('https://storage.360buyimg.com/nutui/3x/data.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { Sku, Goods, imagePathMap } = res;
+      data.sku = Sku;
+      data.goods = Goods;
+    }) //执行结果是 resolve就调用then方法
+    .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法
+});
+
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '6002.10',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   };
+};
+const selectedAddress = (prevExistAdd, nowExistAdd) => {
+  const { provinceName, countyName, cityName } = nowExistAdd;
+  addressDesc.value = `${provinceName}${countyName}${cityName}`;
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
 </script>
 
 <style>
-  .sku-operate-box {
-    width: 100%;
-    display: flex;
-    padding: 8px 10px;
-    box-sizing: border-box;
-  }
-  .sku-operate-item {
-    flex: 1;
-  }
-  .sku-operate-item:first-child {
-    border-top-left-radius: 20px;
-    border-bottom-left-radius: 20px;
-  }
-  .sku-operate-item:last-child {
-    border-top-right-radius: 20px;
-    border-bottom-right-radius: 20px;
-  }
+.sku-operate-box {
+  width: 100%;
+  display: flex;
+  padding: 8px 10px;
+  box-sizing: border-box;
+}
+.sku-operate-item {
+  flex: 1;
+}
+.sku-operate-item:first-child {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+.sku-operate-item:last-child {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
 </style>
 ```
 
@@ -427,49 +406,49 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
 
 ### Props
 
-| 参数               | 说明                                                                         | 类型                | 默认值        |
-| ------------------ | ---------------------------------------------------------------------------- | ------------------- | ------------- |
-| v-model:visible    | 是否显示商品规格弹框                                                         | boolean             | `false`       |
-| sku                | 商品 sku 数据                                                                | Array               | `[]`          |
-| goods              | 商品信息                                                                     | object              | -             |
-| stepper-max        | 设置 inputNumber 最大值                                                      | string \| number    | `99999`       |
-| stepper-min        | 设置 inputNumber 最小值                                                      | string \| number    | `1`           |
-| btn-options        | 底部按钮设置。[`confirm`, `buy`, `cart` ] 分别对应确定、立即购买、加入购物车 | Array               | `[confirm]`   |
-| btn-extra-text     | 按钮上部添加文案，默认为空，有值时显示                                       | string              | -             |
-| stepper-title      | 数量选择组件左侧文案                                                         | string              | `购买数量`    |
-| stepper-extra-text | InputNumber 与标题之间的文案                                                 | Function \| boolean | `false`       |
-| buy-text           | 立即购买按钮文案                                                             | string              | `立即购买`    |
-| add-cart-text      | 加入购物车按钮文案                                                           | string              | `加入购物车 ` |
-| confirm-text       | 确定按钮文案                                                                 | string              | `确定`        |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:visible | 是否显示商品规格弹框 | boolean | `false` |
+| sku | 商品 sku 数据 | Array | `[]` |
+| goods | 商品信息 | object | - |
+| stepper-max | 设置 inputNumber 最大值 | string \| number | `99999` |
+| stepper-min | 设置 inputNumber 最小值 | string \| number | `1` |
+| btn-options | 底部按钮设置。[`confirm`, `buy`, `cart` ] 分别对应确定、立即购买、加入购物车 | Array | `[confirm]` |
+| btn-extra-text | 按钮上部添加文案，默认为空，有值时显示 | string | - |
+| stepper-title | 数量选择组件左侧文案 | string | `购买数量` |
+| stepper-extra-text | InputNumber 与标题之间的文案 | Function \| boolean | `false` |
+| buy-text | 立即购买按钮文案 | string | `立即购买` |
+| add-cart-text | 加入购物车按钮文案 | string | `加入购物车 ` |
+| confirm-text | 确定按钮文案 | string | `确定` |
 
 ### Events
 
-| 事件名            | 说明                               | 回调参数                                   |
-| ----------------- | ---------------------------------- | ------------------------------------------ |
-| select-sku        | 切换规格类目时触发                 | {sku,skuIndex,parentSku,parentIndex}       |
-| add               | InputNumber 点击增加按钮时触发     | value                                      |
-| reduce            | InputNumber 点击减少按钮时触发     | value                                      |
-| overLimit         | InputNumber 点击不可用的按钮时触发 | value                                      |
-| change-stepper    | 购买变化时触发                     | value                                      |
-| click-btn-operate | 点击底部按钮时触发                 | {type:'confirm',value:'inputNumber value'} |
-| click-close-icon  | 点击左上角关闭 icon 时触发         | -                                          |
-| click-overlay     | 点击遮罩时触发                     | -                                          |
-| close             | 关闭弹层时触发                     | -                                          |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| select-sku | 切换规格类目时触发 | {sku,skuIndex,parentSku,parentIndex} |
+| add | InputNumber 点击增加按钮时触发 | value |
+| reduce | InputNumber 点击减少按钮时触发 | value |
+| overLimit | InputNumber 点击不可用的按钮时触发 | value |
+| change-stepper | 购买变化时触发 | value |
+| click-btn-operate | 点击底部按钮时触发 | {type:'confirm',value:'inputNumber value'} |
+| click-close-icon | 点击左上角关闭 icon 时触发 | - |
+| click-overlay | 点击遮罩时触发 | - |
+| close | 关闭弹层时触发 | - |
 
 ### Slots
 
 Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可以按照需求进行替换。
 
-| 名称               | 说明                                                   |
-| ------------------ | ------------------------------------------------------ |
-| sku-header         | 商品信息展示区，包含商品图片、价格、编号               |
-| sku-header-price   | 商品信息展示区，价格区域展示                           |
-| sku-header-extra   | 商品信息展示区，编号区域展示                           |
-| sku-select-top     | Sku 展示区上方与商品信息展示区下方区域，无默认展示内容 |
-| sku-select         | Sku 展示区                                             |
-| sku-stepper        | 数量选择区                                             |
-| sku-stepper-bottom | 数量选择区下方区域                                     |
-| sku-operate        | 底部按钮操作区域                                       |
+| 名称 | 说明 |
+| --- | --- |
+| sku-header | 商品信息展示区，包含商品图片、价格、编号 |
+| sku-header-price | 商品信息展示区，价格区域展示 |
+| sku-header-extra | 商品信息展示区，编号区域展示 |
+| sku-select-top | Sku 展示区上方与商品信息展示区下方区域，无默认展示内容 |
+| sku-select | Sku 展示区 |
+| sku-stepper | 数量选择区 |
+| sku-stepper-bottom | 数量选择区下方区域 |
+| sku-operate | 底部按钮操作区域 |
 
 ### goods 对象结构
 
@@ -581,30 +560,30 @@ sku: [
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                   | 默认值                                                                                                  |
-| -------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| --nut-sku-item-border                  | _1px solid var(--nut-primary-color)_                                                                    |
-| --nut-sku-item-disable-line            | _line-through_                                                                                          |
-| --nut-sku-opetate-bg-default           | _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_                   |
-| --nut-sku-item-active-bg               | _var(--nut-primary-color)_                                                                              |
-| --nut-sku-opetate-bg-buy               | _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_ |
-| --nut-sku-spec-height                  | _30px_                                                                                                  |
-| --nut-sku-spec-line-height             | _var(--nut-sku-spec-height)_                                                                            |
-| --nut-sku-spec-font-size               | _11px_                                                                                                  |
-| --nut-sku-spec-background              | _rgba(242, 242, 242, 1)_                                                                                |
-| --nut-sku-spec-color                   | _var(--nut-black)_                                                                                      |
-| --nut-sku-spec-margin-right            | _12px_                                                                                                  |
-| --nut-sku-spec-padding                 | _0 18px_                                                                                                |
-| --nut-sku-spec-title-font-weight       | _bold_                                                                                                  |
-| --nut-sku-spec-title-font-size         | _13px_                                                                                                  |
-| --nut-sku-spec-title-color             | _var(--nut-black)_                                                                                      |
-| --nut-sku-spec-title-margin-bottom     | _18px_                                                                                                  |
-| --nut-sku-operate-btn-height           | _54px_                                                                                                  |
-| --nut-sku-operate-btn-border-top       | _0_                                                                                                     |
-| --nut-sku-operate-btn-item-height      | _40px_                                                                                                  |
-| --nut-sku-operate-btn-item-line-height | _var(--nut-sku-operate-btn-item-height)_                                                                |
-| --nut-sku-operate-btn-item-font-size   | _15px_                                                                                                  |
-| --nut-sku-operate-btn-item-font-weight | _normal_                                                                                                |
-| --nut-sku-product-img-width            | _100px_                                                                                                 |
-| --nut-sku-product-img-height           | _var(--nut-sku-product-img-width)_                                                                      |
-| --nut-sku-product-img-border-radius    | _0_                                                                                                     |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-sku-item-border | _1px solid var(--nut-primary-color)_ |
+| --nut-sku-item-disable-line | _line-through_ |
+| --nut-sku-opetate-bg-default | _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_ |
+| --nut-sku-item-active-bg | _var(--nut-primary-color)_ |
+| --nut-sku-opetate-bg-buy | _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_ |
+| --nut-sku-spec-height | _30px_ |
+| --nut-sku-spec-line-height | _var(--nut-sku-spec-height)_ |
+| --nut-sku-spec-font-size | _11px_ |
+| --nut-sku-spec-background | _rgba(242, 242, 242, 1)_ |
+| --nut-sku-spec-color | _var(--nut-black)_ |
+| --nut-sku-spec-margin-right | _12px_ |
+| --nut-sku-spec-padding | _0 18px_ |
+| --nut-sku-spec-title-font-weight | _bold_ |
+| --nut-sku-spec-title-font-size | _13px_ |
+| --nut-sku-spec-title-color | _var(--nut-black)_ |
+| --nut-sku-spec-title-margin-bottom | _18px_ |
+| --nut-sku-operate-btn-height | _54px_ |
+| --nut-sku-operate-btn-border-top | _0_ |
+| --nut-sku-operate-btn-item-height | _40px_ |
+| --nut-sku-operate-btn-item-line-height | _var(--nut-sku-operate-btn-item-height)_ |
+| --nut-sku-operate-btn-item-font-size | _15px_ |
+| --nut-sku-operate-btn-item-font-weight | _normal_ |
+| --nut-sku-product-img-width | _100px_ |
+| --nut-sku-product-img-height | _var(--nut-sku-product-img-width)_ |
+| --nut-sku-product-img-border-radius | _0_ |
diff --git a/src/packages/__VUE/sku/doc.taro.md b/src/packages/__VUE/sku/doc.taro.md
index 1df6afe766..932a727847 100644
--- a/src/packages/__VUE/sku/doc.taro.md
+++ b/src/packages/__VUE/sku/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Sku } from '@nutui/nutui-taro';
 
@@ -18,62 +18,57 @@ app.use(Sku);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell :title="`基础用法`" desc="" @click="base = true"></nut-cell>
   <nut-sku
     v-model:visible="base"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     @selectSku="selectSku"
     @clickBtnOperate="clickBtnOperate"
     @close="close"
   ></nut-sku>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup() {
-      const base = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      onMounted(() => {
-        Taro.request({
-          url: 'https://storage.360buyimg.com/nutui/3x/data.js', //仅为示例，并非真实的接口地址
-          success: function (res) {
-            console.log(res.data);
-            const { Sku, Goods, imagePathMap } = res.data;
-            data.sku = Sku;
-            data.goods = Goods;
-          }
-        });
-      });
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '4599.00',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
-        };
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      // 关闭商品规格弹框
-      const close = () => {};
-      return { base, selectSku, clickBtnOperate, close, ...toRefs(data) };
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import Taro from '@tarojs/taro';
+const base = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+onMounted(() => {
+  Taro.request({
+    url: 'https://storage.360buyimg.com/nutui/3x/data.js', //仅为示例，并非真实的接口地址
+    success: function (res) {
+      console.log(res.data);
+      const { Sku, Goods, imagePathMap } = res.data;
+      data.sku = Sku;
+      data.goods = Goods;
     }
+  });
+});
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '4599.00',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   };
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
+// 关闭商品规格弹框
+const close = () => {};
 </script>
 ```
 
@@ -83,13 +78,13 @@ app.use(Sku);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="不可售" desc="" @click="notSell = true"></nut-cell>
   <nut-sku
     v-model:visible="notSell"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     :btnExtraText="btnExtraText"
     @changeStepper="changeStepper"
     @selectSku="selectSku"
@@ -103,70 +98,65 @@ app.use(Sku);
     </template>
   </nut-sku>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup() {
-      const notSell = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
-
-      onMounted(() => {
-        Taro.request({
-          url: 'https://storage.360buyimg.com/nutui/3x/data.js', //仅为示例，并非真实的接口地址
-          success: function (res) {
-            console.log(res.data);
-            const { Sku, Goods, imagePathMap } = res.data;
-            data.sku = Sku;
-            data.goods = Goods;
-          }
-        });
-      });
-
-      // inputNumber 更改
-      const changeStepper = (count: number) => {
-        console.log('购买数量', count);
-      };
-
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '4599.00',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg'
-        };
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      return { notSell, changeStepper, selectSku, btnExtraText, ...toRefs(data) };
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import Taro from '@tarojs/taro';
+const notSell = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+const btnExtraText = ref('抱歉，此商品在所选区域暂无存货');
+
+onMounted(() => {
+  Taro.request({
+    url: 'https://storage.360buyimg.com/nutui/3x/data.js', //仅为示例，并非真实的接口地址
+    success: function (res) {
+      console.log(res.data);
+      const { Sku, Goods, imagePathMap } = res.data;
+      data.sku = Sku;
+      data.goods = Goods;
     }
+  });
+});
+
+// inputNumber 更改
+const changeStepper = (count) => {
+  console.log('购买数量', count);
+};
+
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '4599.00',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg'
   };
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
 </script>
 <style>
-  .sku-operate-box {
-    width: 100%;
-    display: flex;
-    padding: 8px 10px;
-    box-sizing: border-box;
-  }
-  .sku-operate-box-dis {
-    flex: 1;
-  }
-  .sku-operate-box-dis:first-child {
-    margin-right: 18px;
-  }
+.sku-operate-box {
+  width: 100%;
+  display: flex;
+  padding: 8px 10px;
+  box-sizing: border-box;
+}
+.sku-operate-box-dis {
+  flex: 1;
+}
+.sku-operate-box-dis:first-child {
+  margin-right: 18px;
+}
 </style>
 ```
 
@@ -178,13 +168,13 @@ app.use(Sku);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="自定义计步器" desc="" @click="customStepper = true"></nut-cell>
   <nut-sku
     v-model:visible="customStepper"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     :stepperMax="7"
     :stepperMin="2"
     :stepperExtraText="stepperExtraText"
@@ -195,65 +185,60 @@ app.use(Sku);
     @clickBtnOperate="clickBtnOperate"
   ></nut-sku>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup() {
-      const customStepper = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      onMounted(() => {
-        Taro.request({
-          url: 'https://storage.360buyimg.com/nutui/3x/data.js', //仅为示例，并非真实的接口地址
-          success: function (res) {
-            console.log(res.data);
-            const { Sku, Goods, imagePathMap } = res.data;
-            data.sku = Sku;
-            data.goods = Goods;
-          }
-        });
-      });
-
-      const stepperExtraText = () => {
-        return `<div style="width:100%;text-align:right;color:#F00">2 件起售</div>`;
-      };
-      // inputNumber 更改
-      const changeStepper = (count: number) => {
-        console.log('购买数量', count);
-      };
-
-      // inputNumber 极限值
-      const overLimit = (val: any) => {
-        if (val.action == 'reduce') {
-          console.log(`至少买${val.value}件哦`);
-        } else {
-          console.log(`最多买${val.value}件哦`);
-        }
-      };
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '4599.00',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
-        };
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      return { customStepper, overLimit, changeStepper, selectSku, clickBtnOperate, stepperExtraText, ...toRefs(data) };
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import Taro from '@tarojs/taro';
+const customStepper = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+onMounted(() => {
+  Taro.request({
+    url: 'https://storage.360buyimg.com/nutui/3x/data.js', //仅为示例，并非真实的接口地址
+    success: function (res) {
+      console.log(res.data);
+      const { Sku, Goods, imagePathMap } = res.data;
+      data.sku = Sku;
+      data.goods = Goods;
     }
+  });
+});
+
+const stepperExtraText = () => {
+  return `<div style="width:100%;text-align:right;color:#F00">2 件起售</div>`;
+};
+// inputNumber 更改
+const changeStepper = (count) => {
+  console.log('购买数量', count);
+};
+
+// inputNumber 极限值
+const overLimit = (val) => {
+  if (val.action == 'reduce') {
+    console.log(`至少买${val.value}件哦`);
+  } else {
+    console.log(`最多买${val.value}件哦`);
+  }
+};
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '4599.00',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   };
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
 </script>
 ```
 
@@ -265,13 +250,13 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="通过插槽自定义设置" desc="" @click="customBySlot = true"></nut-cell>
   <nut-sku
     v-model:visible="customBySlot"
-    :sku="sku"
-    :goods="goods"
+    :sku="data.sku"
+    :goods="data.goods"
     :btnOptions="['buy', 'cart']"
     @selectSku="selectSku"
     @clickBtnOperate="clickBtnOperate"
@@ -285,7 +270,7 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
     </template>
     <!-- 商品展示区，编号区域 -->
     <template #sku-header-extra>
-      <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{skuId}} </span>
+      <span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{ skuId }} </span>
     </template>
     <!-- sku 展示区上方与商品信息展示区下方区域，无默认展示内容 -->
     <template #sku-select-top>
@@ -294,7 +279,7 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
           style="box-shadow:none;padding:13px 0"
           title="送至"
           :desc="addressDesc"
-          @click="showAddressPopup=true"
+          @click="showAddressPopup = true"
         ></nut-cell>
       </div>
     </template>
@@ -316,114 +301,109 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
     exist-address-title="配送至"
   ></nut-address>
 </template>
-<script lang="ts">
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  import Taro from '@tarojs/taro';
-  export default {
-    setup() {
-      const customBySlot = ref(false);
-      const showAddressPopup = ref(false);
-      const data = reactive({
-        sku: [],
-        goods: {}
-      });
-
-      const addressDesc = ref('(配送地会影响库存，请先确认)');
-      const existAddress = ref([
-        {
-          id: 1,
-          addressDetail: 'th ',
-          cityName: '石景山区',
-          countyName: '城区',
-          provinceName: '北京',
-          selectedAddress: true,
-          townName: ''
-        },
-        {
-          id: 2,
-          addressDetail: '12 ',
-          cityName: '电饭锅',
-          countyName: '扶绥县',
-          provinceName: '北京',
-          selectedAddress: false,
-          townName: ''
-        },
-        {
-          id: 3,
-          addressDetail: '发大水比 ',
-          cityName: '放到',
-          countyName: '广宁街道',
-          provinceName: '钓鱼岛全区',
-          selectedAddress: false,
-          townName: ''
-        },
-        {
-          id: 4,
-          addressDetail: '还是想吧百度吧 ',
-          cityName: '研发',
-          countyName: '八里庄街道',
-          provinceName: '北京',
-          selectedAddress: false,
-          townName: ''
-        }
-      ]);
-
-      onMounted(() => {
-        Taro.request({
-          url: 'https://storage.360buyimg.com/nutui/3x/data.js', //仅为示例，并非真实的接口地址
-          success: function (res) {
-            console.log(res.data);
-            const { Sku, Goods, imagePathMap } = res.data;
-            data.sku = Sku;
-            data.goods = Goods;
-          }
-        });
-      });
-
-      // 切换规格类目
-      const selectSku = (ss: string) => {
-        const { sku, skuIndex, parentSku, parentIndex } = ss;
-        if (sku.disable) return false;
-        data.sku[parentIndex].list.forEach((s) => {
-          s.active = s.id == sku.id;
-        });
-        data.goods = {
-          skuId: sku.id,
-          price: '6002.10',
-          imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
-        };
-      };
-      const selectedAddress = (prevExistAdd: any, nowExistAdd: any) => {
-        const { provinceName, countyName, cityName } = nowExistAdd;
-        addressDesc.value = `${provinceName}${countyName}${cityName}`;
-      };
-      // 底部操作按钮触发
-      const clickBtnOperate = (op: string) => {
-        console.log('点击了操作按钮', op);
-      };
-      return { customBySlot, selectSku, clickBtnOperate, existAddress, addressDesc, selectedAddress, ...toRefs(data) };
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import Taro from '@tarojs/taro';
+const customBySlot = ref(false);
+const showAddressPopup = ref(false);
+const data = reactive({
+  sku: [],
+  goods: {}
+});
+
+const addressDesc = ref('(配送地会影响库存，请先确认)');
+const existAddress = ref([
+  {
+    id: 1,
+    addressDetail: 'th ',
+    cityName: '石景山区',
+    countyName: '城区',
+    provinceName: '北京',
+    selectedAddress: true,
+    townName: ''
+  },
+  {
+    id: 2,
+    addressDetail: '12 ',
+    cityName: '电饭锅',
+    countyName: '扶绥县',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 3,
+    addressDetail: '发大水比 ',
+    cityName: '放到',
+    countyName: '广宁街道',
+    provinceName: '钓鱼岛全区',
+    selectedAddress: false,
+    townName: ''
+  },
+  {
+    id: 4,
+    addressDetail: '还是想吧百度吧 ',
+    cityName: '研发',
+    countyName: '八里庄街道',
+    provinceName: '北京',
+    selectedAddress: false,
+    townName: ''
+  }
+]);
+
+onMounted(() => {
+  Taro.request({
+    url: 'https://storage.360buyimg.com/nutui/3x/data.js', //仅为示例，并非真实的接口地址
+    success: function (res) {
+      console.log(res.data);
+      const { Sku, Goods, imagePathMap } = res.data;
+      data.sku = Sku;
+      data.goods = Goods;
     }
+  });
+});
+
+// 切换规格类目
+const selectSku = (ss) => {
+  const { sku, skuIndex, parentSku, parentIndex } = ss;
+  if (sku.disable) return false;
+  data.sku[parentIndex].list.forEach((s) => {
+    s.active = s.id == sku.id;
+  });
+  data.goods = {
+    skuId: sku.id,
+    price: '6002.10',
+    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   };
+};
+const selectedAddress = (prevExistAdd, nowExistAdd) => {
+  const { provinceName, countyName, cityName } = nowExistAdd;
+  addressDesc.value = `${provinceName}${countyName}${cityName}`;
+};
+// 底部操作按钮触发
+const clickBtnOperate = (op) => {
+  console.log('点击了操作按钮', op);
+};
 </script>
 
 <style>
-  .sku-operate-box {
-    width: 100%;
-    display: flex;
-    padding: 8px 10px;
-    box-sizing: border-box;
-  }
-  .sku-operate-item {
-    flex: 1;
-  }
-  .sku-operate-item:first-child {
-    border-top-left-radius: 20px;
-    border-bottom-left-radius: 20px;
-  }
-  .sku-operate-item:last-child {
-    border-top-right-radius: 20px;
-    border-bottom-right-radius: 20px;
-  }
+.sku-operate-box {
+  width: 100%;
+  display: flex;
+  padding: 8px 10px;
+  box-sizing: border-box;
+}
+.sku-operate-item {
+  flex: 1;
+}
+.sku-operate-item:first-child {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+.sku-operate-item:last-child {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
 </style>
 ```
 
@@ -433,49 +413,49 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
 
 ### Props
 
-| 参数               | 说明                                                                        | 类型                | 默认值        |
-| ------------------ | --------------------------------------------------------------------------- | ------------------- | ------------- |
-| v-model:visible    | 是否显示商品规格弹框                                                        | boolean             | `false`       |
-| sku                | 商品 sku 数据                                                               | Array               | `[]`          |
-| goods              | 商品信息                                                                    | object              | -             |
-| stepper-max        | 设置 inputNumber 最大值                                                     | string \| number    | `99999`       |
-| stepper-min        | 设置 inputNumber 最小值                                                     | string \| number    | `1`           |
-| btn-options        | 底部按钮设置。[`confirm`, `buy`, `cart`] 分别对应确定、立即购买、加入购物车 | Array               | `[confirm]`   |
-| btn-extra-text     | 按钮上部添加文案，默认为空，有值时显示                                      | string              | -             |
-| stepper-title      | 数量选择组件左侧文案                                                        | string              | `购买数量`    |
-| stepper-extra-text | InputNumber 与标题之间的文案                                                | Function \| boolean | `false`       |
-| buy-text           | 立即购买按钮文案                                                            | string              | `立即购买`    |
-| add-cart-text      | 加入购物车按钮文案                                                          | string              | `加入购物车 ` |
-| confirm-text       | 确定按钮文案                                                                | string              | `确定`        |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:visible | 是否显示商品规格弹框 | boolean | `false` |
+| sku | 商品 sku 数据 | Array | `[]` |
+| goods | 商品信息 | object | - |
+| stepper-max | 设置 inputNumber 最大值 | string \| number | `99999` |
+| stepper-min | 设置 inputNumber 最小值 | string \| number | `1` |
+| btn-options | 底部按钮设置。[`confirm`, `buy`, `cart`] 分别对应确定、立即购买、加入购物车 | Array | `[confirm]` |
+| btn-extra-text | 按钮上部添加文案，默认为空，有值时显示 | string | - |
+| stepper-title | 数量选择组件左侧文案 | string | `购买数量` |
+| stepper-extra-text | InputNumber 与标题之间的文案 | Function \| boolean | `false` |
+| buy-text | 立即购买按钮文案 | string | `立即购买` |
+| add-cart-text | 加入购物车按钮文案 | string | `加入购物车 ` |
+| confirm-text | 确定按钮文案 | string | `确定` |
 
 ### Events
 
-| 事件名            | 说明                               | 回调参数                                   |
-| ----------------- | ---------------------------------- | ------------------------------------------ |
-| select-sku        | 切换规格类目时触发                 | {sku,skuIndex,parentSku,parentIndex}       |
-| add               | InputNumber 点击增加按钮时触发     | value                                      |
-| reduce            | InputNumber 点击减少按钮时触发     | value                                      |
-| overLimit         | InputNumber 点击不可用的按钮时触发 | value                                      |
-| change-stepper    | 购买变化时触发                     | value                                      |
-| click-btn-operate | 点击底部按钮时触发                 | {type:'confirm',value:'inputNumber value'} |
-| click-close-icon  | 点击左上角关闭 icon 时触发         | -                                          |
-| click-overlay     | 点击遮罩时触发                     | -                                          |
-| close             | 关闭弹层时触发                     | -                                          |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| select-sku | 切换规格类目时触发 | {sku,skuIndex,parentSku,parentIndex} |
+| add | InputNumber 点击增加按钮时触发 | value |
+| reduce | InputNumber 点击减少按钮时触发 | value |
+| overLimit | InputNumber 点击不可用的按钮时触发 | value |
+| change-stepper | 购买变化时触发 | value |
+| click-btn-operate | 点击底部按钮时触发 | {type:'confirm',value:'inputNumber value'} |
+| click-close-icon | 点击左上角关闭 icon 时触发 | - |
+| click-overlay | 点击遮罩时触发 | - |
+| close | 关闭弹层时触发 | - |
 
 ### Slots
 
 Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可以按照需求进行替换。
 
-| 名称               | 说明                                                   |
-| ------------------ | ------------------------------------------------------ |
-| sku-header         | 商品信息展示区，包含商品图片、价格、编号               |
-| sku-header-price   | 商品信息展示区，价格区域展示                           |
-| sku-header-extra   | 商品信息展示区，编号区域展示                           |
-| sku-select-top     | Sku 展示区上方与商品信息展示区下方区域，无默认展示内容 |
-| sku-select         | Sku 展示区                                             |
-| sku-stepper        | 数量选择区                                             |
-| sku-stepper-bottom | 数量选择区下方区域                                     |
-| sku-operate        | 底部按钮操作区域                                       |
+| 名称 | 说明 |
+| --- | --- |
+| sku-header | 商品信息展示区，包含商品图片、价格、编号 |
+| sku-header-price | 商品信息展示区，价格区域展示 |
+| sku-header-extra | 商品信息展示区，编号区域展示 |
+| sku-select-top | Sku 展示区上方与商品信息展示区下方区域，无默认展示内容 |
+| sku-select | Sku 展示区 |
+| sku-stepper | 数量选择区 |
+| sku-stepper-bottom | 数量选择区下方区域 |
+| sku-operate | 底部按钮操作区域 |
 
 ### goods 对象结构
 
@@ -587,30 +567,30 @@ sku: [
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                   | 默认值                                                                                                  |
-| -------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| --nut-sku-item-border                  | _1px solid var(--nut-primary-color)_                                                                    |
-| --nut-sku-item-disable-line            | _line-through_                                                                                          |
-| --nut-sku-opetate-bg-default           | _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_                   |
-| --nut-sku-item-active-bg               | _var(--nut-primary-color)_                                                                              |
-| --nut-sku-opetate-bg-buy               | _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_ |
-| --nut-sku-spec-height                  | _30px_                                                                                                  |
-| --nut-sku-spec-line-height             | _var(--nut-sku-spec-height)_                                                                            |
-| --nut-sku-spec-font-size               | _11px_                                                                                                  |
-| --nut-sku-spec-background              | _rgba(242, 242, 242, 1)_                                                                                |
-| --nut-sku-spec-color                   | _var(--nut-black)_                                                                                      |
-| --nut-sku-spec-margin-right            | _12px_                                                                                                  |
-| --nut-sku-spec-padding                 | _0 18px_                                                                                                |
-| --nut-sku-spec-title-font-weight       | _bold_                                                                                                  |
-| --nut-sku-spec-title-font-size         | _13px_                                                                                                  |
-| --nut-sku-spec-title-color             | _var(--nut-black)_                                                                                      |
-| --nut-sku-spec-title-margin-bottom     | _18px_                                                                                                  |
-| --nut-sku-operate-btn-height           | _54px_                                                                                                  |
-| --nut-sku-operate-btn-border-top       | _0_                                                                                                     |
-| --nut-sku-operate-btn-item-height      | _40px_                                                                                                  |
-| --nut-sku-operate-btn-item-line-height | _var(--nut-sku-operate-btn-item-height)_                                                                |
-| --nut-sku-operate-btn-item-font-size   | _15px_                                                                                                  |
-| --nut-sku-operate-btn-item-font-weight | _normal_                                                                                                |
-| --nut-sku-product-img-width            | _100px_                                                                                                 |
-| --nut-sku-product-img-height           | _var(--nut-sku-product-img-width)_                                                                      |
-| --nut-sku-product-img-border-radius    | _0_                                                                                                     |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-sku-item-border | _1px solid var(--nut-primary-color)_ |
+| --nut-sku-item-disable-line | _line-through_ |
+| --nut-sku-opetate-bg-default | _linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%)_ |
+| --nut-sku-item-active-bg | _var(--nut-primary-color)_ |
+| --nut-sku-opetate-bg-buy | _linear-gradient(135deg,rgba(255, 186, 13, 1) 0%,rgba(255, 195, 13, 1) 69%,rgba(255, 207, 13, 1) 100%)_ |
+| --nut-sku-spec-height | _30px_ |
+| --nut-sku-spec-line-height | _var(--nut-sku-spec-height)_ |
+| --nut-sku-spec-font-size | _11px_ |
+| --nut-sku-spec-background | _rgba(242, 242, 242, 1)_ |
+| --nut-sku-spec-color | _var(--nut-black)_ |
+| --nut-sku-spec-margin-right | _12px_ |
+| --nut-sku-spec-padding | _0 18px_ |
+| --nut-sku-spec-title-font-weight | _bold_ |
+| --nut-sku-spec-title-font-size | _13px_ |
+| --nut-sku-spec-title-color | _var(--nut-black)_ |
+| --nut-sku-spec-title-margin-bottom | _18px_ |
+| --nut-sku-operate-btn-height | _54px_ |
+| --nut-sku-operate-btn-border-top | _0_ |
+| --nut-sku-operate-btn-item-height | _40px_ |
+| --nut-sku-operate-btn-item-line-height | _var(--nut-sku-operate-btn-item-height)_ |
+| --nut-sku-operate-btn-item-font-size | _15px_ |
+| --nut-sku-operate-btn-item-font-weight | _normal_ |
+| --nut-sku-product-img-width | _100px_ |
+| --nut-sku-product-img-height | _var(--nut-sku-product-img-width)_ |
+| --nut-sku-product-img-border-radius | _0_ |
diff --git a/src/packages/__VUE/timeselect/demo.vue b/src/packages/__VUE/timeselect/demo.vue
index c8d02ee798..062fef3e80 100644
--- a/src/packages/__VUE/timeselect/demo.vue
+++ b/src/packages/__VUE/timeselect/demo.vue
@@ -7,10 +7,10 @@
       >
     </nut-cell>
     <nut-time-select
-      v-model:visible="visible1"
+      v-model:visible="state.visible1"
       height="50%"
-      :current-key="currentKey1"
-      :current-time="currentTime1"
+      :current-key="state.currentKey1"
+      :current-time="state.currentTime1"
       @select="handleSelected1"
     >
       <template #pannel>
@@ -18,7 +18,7 @@
         <nut-time-pannel :name="translate('time2')" pannel-key="1" @change="handleChange1"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
+        <nut-time-detail :times="state.times1" @select="selectTime1"></nut-time-detail>
       </template>
     </nut-time-select>
     <h2>{{ translate('title') }}</h2>
@@ -28,10 +28,10 @@
       >
     </nut-cell>
     <nut-time-select
-      v-model:visible="visible2"
+      v-model:visible="state.visible2"
       height="50%"
-      :current-key="currentKey2"
-      :current-time="currentTime2"
+      :current-key="state.currentKey2"
+      :current-time="state.currentTime2"
       @select="handleSelected2"
     >
       <template #pannel>
@@ -39,7 +39,7 @@
         <nut-time-pannel :name="translate('time2')" pannel-key="1" @change="handleChange2"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+        <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
       </template>
     </nut-time-select>
     <h2>{{ translate('changeTitle') }}</h2>
@@ -49,10 +49,10 @@
       >
     </nut-cell>
     <nut-time-select
-      v-model:visible="visible3"
+      v-model:visible="state.visible3"
       height="50%"
-      :current-key="currentKey2"
-      :current-time="currentTime2"
+      :current-key="state.currentKey2"
+      :current-time="state.currentTime2"
       @select="handleSelected2"
     >
       <template #title>
@@ -66,156 +66,136 @@
         <nut-time-pannel :name="translate('time2')" pannel-key="1" @change="handleChange2"></nut-time-pannel>
       </template>
       <template #detail>
-        <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+        <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
       </template>
     </nut-time-select>
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
 const { translate } = createComponent('time-select');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      deliveryTime: '请选择配送时间',
-      changeTitle: '更改标题',
-      time1: '2月23日(今天)',
-      time2: '2月24日(星期三)',
-      title: '可选择多个日期时间',
-      content: '您选择了'
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    deliveryTime: '请选择配送时间',
+    changeTitle: '更改标题',
+    time1: '2月23日(今天)',
+    time2: '2月24日(星期三)',
+    title: '可选择多个日期时间',
+    content: '您选择了'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    deliveryTime: 'Please select the delivery time',
+    changeTitle: 'Change Title',
+    time1: 'February 23rd(Today)',
+    time2: 'February 24th(Wednesday)',
+    title: 'Multiple dates and times can be selected',
+    content: 'Your choose'
+  }
+});
+const state = reactive({
+  visible1: false,
+  currentKey1: 0,
+  currentTime1: [] as any[],
+  times1: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
+    }
+  ],
+  visible2: false,
+  currentKey2: 0,
+  currentTime2: [] as any[],
+  times2: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
     },
-    'en-US': {
-      basic: 'Basic Usage',
-      deliveryTime: 'Please select the delivery time',
-      changeTitle: 'Change Title',
-      time1: 'February 23rd(Today)',
-      time2: 'February 24th(Wednesday)',
-      title: 'Multiple dates and times can be selected',
-      content: 'Your choose'
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
+  ],
+  visible3: false
+});
+
+const handleChange1 = (pannelKey: number) => {
+  state.currentKey1 = pannelKey;
+  state.currentTime1 = [];
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const state = reactive({
-      visible1: false,
-      currentKey1: 0,
-      currentTime1: [] as any[],
-      times1: [
-        {
-          key: 0,
-          list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-        },
-        {
-          key: 1,
-          list: ['9:00-10:00', '10:00-11:00']
-        }
-      ],
-      visible2: false,
-      currentKey2: 0,
-      currentTime2: [] as any[],
-      times2: [
-        {
-          key: 0,
-          list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-        },
-        {
-          key: 1,
-          list: ['9:00-10:00', '10:00-11:00']
-        }
-      ],
-      visible3: false
+};
+
+const handleClick1 = () => {
+  state.visible1 = true;
+};
+
+const selectTime1 = (item: string) => {
+  let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime1[0]['list'].push(item);
+  } else {
+    state.currentTime1[0]['list'].splice(curTimeIndex, 1);
+  }
+};
+
+const handleSelected1 = (obj: any) => {
+  showToast.text(`${translate('content')}：${JSON.stringify(obj)}`);
+};
+
+const handleChange2 = (pannelKey: number) => {
+  state.currentKey2 = pannelKey;
+  let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
+  if (!curTime) {
+    state.currentTime2.push({
+      key: pannelKey,
+      list: []
     });
+  }
+};
+
+const handleClick2 = () => {
+  state.visible2 = true;
+};
+
+const selectTime2 = (item: string) => {
+  let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
+  let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime2[findIndex]['list'].push(item);
+  } else {
+    state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
+  }
+};
 
-    const handleChange1 = (pannelKey: number) => {
-      state.currentKey1 = pannelKey;
-      state.currentTime1 = [];
-      state.currentTime1.push({
-        key: state.currentKey1,
-        list: []
-      });
-    };
-
-    const handleClick1 = () => {
-      state.visible1 = true;
-    };
-
-    const selectTime1 = (item: string) => {
-      let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
-      if (curTimeIndex === -1) {
-        state.currentTime1[0]['list'].push(item);
-      } else {
-        state.currentTime1[0]['list'].splice(curTimeIndex, 1);
-      }
-    };
-
-    const handleSelected1 = (obj: any) => {
-      showToast.text(`${translate('content')}：${JSON.stringify(obj)}`);
-    };
-
-    const handleChange2 = (pannelKey: number) => {
-      state.currentKey2 = pannelKey;
-      let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
-      if (!curTime) {
-        state.currentTime2.push({
-          key: pannelKey,
-          list: []
-        });
-      }
-    };
-
-    const handleClick2 = () => {
-      state.visible2 = true;
-    };
-
-    const selectTime2 = (item: string) => {
-      let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
-      let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
-      if (curTimeIndex === -1) {
-        state.currentTime2[findIndex]['list'].push(item);
-      } else {
-        state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
-      }
-    };
-
-    const handleSelected2 = (obj: any) => {
-      showToast.text(`${translate('content')}：${JSON.stringify(obj)}`);
-    };
-
-    const handleClick3 = () => {
-      state.visible3 = true;
-    };
+const handleSelected2 = (obj: any) => {
+  showToast.text(`${translate('content')}：${JSON.stringify(obj)}`);
+};
 
-    onMounted(() => {
-      state.currentTime1.push({
-        key: state.currentKey1,
-        list: []
-      });
-      state.currentTime2.push({
-        key: state.currentKey2,
-        list: []
-      });
-    });
+const handleClick3 = () => {
+  state.visible3 = true;
+};
 
-    return {
-      ...toRefs(state),
-      handleChange1,
-      handleSelected1,
-      selectTime1,
-      handleClick1,
-      handleChange2,
-      handleSelected2,
-      selectTime2,
-      handleClick2,
-      handleClick3,
-      translate
-    };
-  }
+onMounted(() => {
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
+  });
+  state.currentTime2.push({
+    key: state.currentKey2,
+    list: []
+  });
 });
 </script>
 
diff --git a/src/packages/__VUE/timeselect/doc.en-US.md b/src/packages/__VUE/timeselect/doc.en-US.md
index b68a659db9..03f4c2351c 100644
--- a/src/packages/__VUE/timeselect/doc.en-US.md
+++ b/src/packages/__VUE/timeselect/doc.en-US.md
@@ -6,7 +6,7 @@ For delivery time selection
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { TimeSelect, TimePannel, TimeDetail } from '@nutui/nutui';
 
@@ -20,16 +20,16 @@ app.use(TimeDetail);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell @click="handleClick1">
     <span><label>Please select the delivery time</label></span>
   </nut-cell>
   <nut-time-select
-    v-model:visible="visible1"
+    v-model:visible="state.visible1"
     height="50%"
-    :current-key="currentKey1"
-    :current-time="currentTime1"
+    :current-key="state.currentKey1"
+    :current-time="state.currentTime1"
     @select="handleSelected1"
   >
     <template #pannel>
@@ -37,75 +37,61 @@ app.use(TimeDetail);
       <nut-time-pannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
+      <nut-time-detail :times="state.times1" @select="selectTime1"></nut-time-detail>
     </template>
   </nut-time-select>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        visible1: false,
-        currentKey1: 0,
-        currentTime1: [] as any[],
-        times1: [
-          {
-            key: 0,
-            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-          },
-          {
-            key: 1,
-            list: ['9:00-10:00', '10:00-11:00']
-          }
-        ]
-      });
-
-      const handleChange1 = (pannelKey: number) => {
-        state.currentKey1 = pannelKey;
-        state.currentTime1 = [];
-        state.currentTime1.push({
-          key: state.currentKey1,
-          list: []
-        });
-      };
-
-      const handleClick1 = () => {
-        state.visible1 = true;
-      };
-
-      const selectTime1 = (item: string) => {
-        let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
-        if (curTimeIndex === -1) {
-          state.currentTime1[0]['list'].push(item);
-        } else {
-          state.currentTime1[0]['list'].splice(curTimeIndex, 1);
-        }
-      };
-
-      const handleSelected1 = (obj: any) => {
-        showToast.text(`Your choose：${JSON.stringify(obj)}`);
-      };
-
-      onMounted(() => {
-        state.currentTime1.push({
-          key: state.currentKey1,
-          list: []
-        });
-      });
-
-      return {
-        ...toRefs(state),
-        handleChange1,
-        handleSelected1,
-        selectTime1,
-        handleClick1
-      };
+<script setup>
+import { reactive, onMounted } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible1: false,
+  currentKey1: 0,
+  currentTime1: [],
+  times1: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
-  };
+  ]
+});
+
+const handleChange1 = (pannelKey) => {
+  state.currentKey1 = pannelKey;
+  state.currentTime1 = [];
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
+  });
+};
+
+const handleClick1 = () => {
+  state.visible1 = true;
+};
+
+const selectTime1 = (item) => {
+  let curTimeIndex = state.currentTime1[0]['list'].findIndex((time) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime1[0]['list'].push(item);
+  } else {
+    state.currentTime1[0]['list'].splice(curTimeIndex, 1);
+  }
+};
+
+const handleSelected1 = (obj) => {
+  showToast.text(`Your choose：${JSON.stringify(obj)}`);
+};
+
+onMounted(() => {
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
+  });
+});
 </script>
 ```
 
@@ -115,16 +101,16 @@ app.use(TimeDetail);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell @click="handleClick2">
     <span><label>Please select the delivery time</label></span>
   </nut-cell>
   <nut-time-select
-    v-model:visible="visible2"
+    v-model:visible="state.visible2"
     height="50%"
-    :current-key="currentKey2"
-    :current-time="currentTime2"
+    :current-key="state.currentKey2"
+    :current-time="state.currentTime2"
     @select="handleSelected2"
   >
     <template #pannel>
@@ -132,78 +118,64 @@ app.use(TimeDetail);
       <nut-time-pannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+      <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
     </template>
   </nut-time-select>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        visible2: false,
-        currentKey2: 0,
-        currentTime2: [] as any[],
-        times2: [
-          {
-            key: 0,
-            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-          },
-          {
-            key: 1,
-            list: ['9:00-10:00', '10:00-11:00']
-          }
-        ]
-      });
-
-      const handleChange2 = (pannelKey: number) => {
-        state.currentKey2 = pannelKey;
-        let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
-        if (!curTime) {
-          state.currentTime2.push({
-            key: pannelKey,
-            list: []
-          });
-        }
-      };
-
-      const handleClick2 = () => {
-        state.visible2 = true;
-      };
-
-      const selectTime2 = (item: string) => {
-        let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
-        let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
-        if (curTimeIndex === -1) {
-          state.currentTime2[findIndex]['list'].push(item);
-        } else {
-          state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
-        }
-      };
-
-      const handleSelected2 = (obj: any) => {
-        showToast.text(`Your choose：${JSON.stringify(obj)}`);
-      };
-
-      onMounted(() => {
-        state.currentTime2.push({
-          key: state.currentKey2,
-          list: []
-        });
-      });
-
-      return {
-        ...toRefs(state),
-        handleChange2,
-        handleSelected2,
-        selectTime2,
-        handleClick2
-      };
+<script setup>
+import { reactive, onMounted } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible2: false,
+  currentKey2: 0,
+  currentTime2: [],
+  times2: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
-  };
+  ]
+});
+
+const handleChange2 = (pannelKey) => {
+  state.currentKey2 = pannelKey;
+  let curTime = state.currentTime2.find((item) => item.key == pannelKey);
+  if (!curTime) {
+    state.currentTime2.push({
+      key: pannelKey,
+      list: []
+    });
+  }
+};
+
+const handleClick2 = () => {
+  state.visible2 = true;
+};
+
+const selectTime2 = (item) => {
+  let findIndex = state.currentTime2.findIndex((item) => item.key == state.currentKey2);
+  let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime2[findIndex]['list'].push(item);
+  } else {
+    state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
+  }
+};
+
+const handleSelected2 = (obj) => {
+  showToast.text(`Your choose：${JSON.stringify(obj)}`);
+};
+
+onMounted(() => {
+  state.currentTime2.push({
+    key: state.currentKey2,
+    list: []
+  });
+});
 </script>
 ```
 
@@ -213,16 +185,16 @@ app.use(TimeDetail);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell @click="handleClick2">
     <span><label>Please select the delivery time</label></span>
   </nut-cell>
   <nut-time-select
-    v-model:visible="visible2"
+    v-model:visible="state.visible2"
     height="50%"
-    :current-key="currentKey2"
-    :current-time="currentTime2"
+    :current-key="state.currentKey2"
+    :current-time="state.currentTime2"
     @select="handleSelected2"
   >
     <template #title>
@@ -236,97 +208,83 @@ app.use(TimeDetail);
       <nut-time-pannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+      <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
     </template>
   </nut-time-select>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        visible2: false,
-        currentKey2: 0,
-        currentTime2: [] as any[],
-        times2: [
-          {
-            key: 0,
-            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-          },
-          {
-            key: 1,
-            list: ['9:00-10:00', '10:00-11:00']
-          }
-        ]
-      });
-
-      const handleChange2 = (pannelKey: number) => {
-        state.currentKey2 = pannelKey;
-        let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
-        if (!curTime) {
-          state.currentTime2.push({
-            key: pannelKey,
-            list: []
-          });
-        }
-      };
-
-      const handleClick2 = () => {
-        state.visible2 = true;
-      };
-
-      const selectTime2 = (item: string) => {
-        let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
-        let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
-        if (curTimeIndex === -1) {
-          state.currentTime2[findIndex]['list'].push(item);
-        } else {
-          state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
-        }
-      };
-
-      const handleSelected2 = (obj: any) => {
-        showToast.text(`Your Choose ：${JSON.stringify(obj)}`);
-      };
-
-      onMounted(() => {
-        state.currentTime2.push({
-          key: state.currentKey2,
-          list: []
-        });
-      });
-
-      return {
-        ...toRefs(state),
-        handleChange2,
-        handleSelected2,
-        selectTime2,
-        handleClick2
-      };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible2: false,
+  currentKey2: 0,
+  currentTime2: [],
+  times2: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
-  };
-</script>
-<style>
-  .timeselect-title {
-    height: 50px;
-  }
-  .title {
-    line-height: 1;
-    padding: 0;
-    margin: 0;
-    margin: 10px 0;
-    font-size: 16px;
-    font-weight: bold;
+  ]
+});
+
+const handleChange2 = (pannelKey) => {
+  state.currentKey2 = pannelKey;
+  let curTime = state.currentTime2.find((item) => item.key == pannelKey);
+  if (!curTime) {
+    state.currentTime2.push({
+      key: pannelKey,
+      list: []
+    });
   }
-  .subtitle {
-    line-height: 1;
-    padding: 0;
-    margin: 0;
-    color: #999;
+};
+
+const handleClick2 = () => {
+  state.visible2 = true;
+};
+
+const selectTime2 = (item) => {
+  let findIndex = state.currentTime2.findIndex((item) => item.key == state.currentKey2);
+  let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime2[findIndex]['list'].push(item);
+  } else {
+    state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
   }
+};
+
+const handleSelected2 = (obj) => {
+  showToast.text(`Your Choose ：${JSON.stringify(obj)}`);
+};
+
+onMounted(() => {
+  state.currentTime2.push({
+    key: state.currentKey2,
+    list: []
+  });
+});
+</script>
+<style>
+.timeselect-title {
+  height: 50px;
+}
+.title {
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  margin: 10px 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+.subtitle {
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
 </style>
 ```
 
@@ -336,53 +294,53 @@ app.use(TimeDetail);
 
 ### TimeSelect Props
 
-| Attribute        | Description                                                                         | Type             | Default       |
-| ---------------- | ----------------------------------------------------------------------------------- | ---------------- | ------------- |
-| visible          | Whether to display elastic layer                                                    | boolean          | `false`       |
-| height           | Height of bomb layer                                                                | string           | `20%`         |
-| title            | Bomb layer title                                                                    | string           | `Pickup Time` |
-| current-key      | Unique identification                                                               | string \| number | `0`           |
-| current-time     | The currently selected time, the array element contains:key: string; list: string[] | Array            | `[]`          |
-| lock-scroll      | Whether the background is locked                                                    | boolean          | `true`        |
-| teleport-disable | Whether the node is allowed to be mounted                                           | boolean          | `false`       |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| visible | Whether to display elastic layer | boolean | `false` |
+| height | Height of bomb layer | string | `20%` |
+| title | Bomb layer title | string | `Pickup Time` |
+| current-key | Unique identification | string \| number | `0` |
+| current-time | The currently selected time, the array element contains:key: string; list: string[] | Array | `[]` |
+| lock-scroll | Whether the background is locked | boolean | `true` |
+| teleport-disable | Whether the node is allowed to be mounted | boolean | `false` |
 
 ### Slots
 
-| Name   | Description              |
-| ------ | ------------------------ |
-| title  | Change Title             |
-| pannel | List for left            |
+| Name | Description |
+| --- | --- |
+| title | Change Title |
+| pannel | List for left |
 | detail | Detail Content for right |
 
 ### TimePannel Props
 
-| Attribute  | Description                                                                        | Type             | Default |
-| ---------- | ---------------------------------------------------------------------------------- | ---------------- | ------- |
-| name       | Name of display                                                                    | string           | ``      |
-| pannel-key | Unique ID, which identifies the currently selected day together with `current-key` | string \| number | `0`     |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| name | Name of display | string | `` |
+| pannel-key | Unique ID, which identifies the currently selected day together with `current-key` | string \| number | `0` |
 
 ### TimeDetail Props
 
-| Attribute | Description                                                | Type  | Default |
-| --------- | ---------------------------------------------------------- | ----- | ------- |
-| times     | Selectable time, the same as array elements `current-time` | Array | `[]`    |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| times | Selectable time, the same as array elements `current-time` | Array | `[]` |
 
 ### TimeSelect Events
 
-| Event  | Description                 | Arguments                         |
-| ------ | --------------------------- | --------------------------------- |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | select | Callback after closing mask | `key: string \| number, list: []` |
 
 ### TimePannel Event
 
-| Event  | Description                       | Arguments                     |
-| ------ | --------------------------------- | ----------------------------- |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | change | Click the callback of the content | `pannelKey: string ｜ number` |
 
 ### TimeDetail Event
 
-| Event  | Description            | Arguments      |
-| ------ | ---------------------- | -------------- |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | select | Callback of click time | `time: string` |
 
 ## Theming
@@ -391,29 +349,29 @@ app.use(TimeDetail);
 
 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-timeselect-title-font-size                | _var(--nut-font-size-2)_   |
-| --nut-timeselect-title-color                    | _var(--nut-title-color)_   |
-| --nut-timeselect-title-width                    | _100%_                     |
-| --nut-timeselect-title-height                   | _50px_                     |
-| --nut-timeselect-title-line-height              | _50px_                     |
-| --nut-timeselect-pannel-bg-color                | _#f6f7f9_                  |
-| --nut-timeselect-timepannel-text-color          | _var(--nut-title-color2)_  |
-| --nut-timeselect-timepannel-font-size           | _var(--nut-font-size-2)_   |
-| --nut-timeselect-timepannel-cur-bg-color        | _var(--nut-white)_         |
-| --nut-timeselect-timepannel-cur-text-color      | _#333333_                  |
-| --nut-timeselect-timepannel-width               | _140px_                    |
-| --nut-timeselect-timepannel-height              | _40px_                     |
-| --nut-timeselect-timepannel-padding             | _15px_                     |
-| --nut-timeselect-timedetail-padding             | _0 5px 50px 13px_          |
-| --nut-timeselect-timedetail-item-width          | _100px_                    |
-| --nut-timeselect-timedetail-item-height         | _50px_                     |
-| --nut-timeselect-timedetail-item-line-height    | _50px_                     |
-| --nut-timeselect-timedetail-item-bg-color       | _#f6f7f9_                  |
-| --nut-timeselect-timedetail-item-border-radius  | _5px_                      |
-| --nut-timeselect-timedetail-item-text-color     | _#333333_                  |
-| --nut-timeselect-timedetail-item-text-font-size | _var(--nut-font-size-2)_   |
-| --nut-timeselect-timedetail-item-cur-bg-color   | _var(--nut-primary-color)_ |
-| --nut-timeselect-timedetail-item-cur-border     | _var(--nut-primary-color)_ |
+| Name | Default Value |
+| --- | --- |
+| --nut-timeselect-title-font-size | _var(--nut-font-size-2)_ |
+| --nut-timeselect-title-color | _var(--nut-title-color)_ |
+| --nut-timeselect-title-width | _100%_ |
+| --nut-timeselect-title-height | _50px_ |
+| --nut-timeselect-title-line-height | _50px_ |
+| --nut-timeselect-pannel-bg-color | _#f6f7f9_ |
+| --nut-timeselect-timepannel-text-color | _var(--nut-title-color2)_ |
+| --nut-timeselect-timepannel-font-size | _var(--nut-font-size-2)_ |
+| --nut-timeselect-timepannel-cur-bg-color | _var(--nut-white)_ |
+| --nut-timeselect-timepannel-cur-text-color | _#333333_ |
+| --nut-timeselect-timepannel-width | _140px_ |
+| --nut-timeselect-timepannel-height | _40px_ |
+| --nut-timeselect-timepannel-padding | _15px_ |
+| --nut-timeselect-timedetail-padding | _0 5px 50px 13px_ |
+| --nut-timeselect-timedetail-item-width | _100px_ |
+| --nut-timeselect-timedetail-item-height | _50px_ |
+| --nut-timeselect-timedetail-item-line-height | _50px_ |
+| --nut-timeselect-timedetail-item-bg-color | _#f6f7f9_ |
+| --nut-timeselect-timedetail-item-border-radius | _5px_ |
+| --nut-timeselect-timedetail-item-text-color | _#333333_ |
+| --nut-timeselect-timedetail-item-text-font-size | _var(--nut-font-size-2)_ |
+| --nut-timeselect-timedetail-item-cur-bg-color | _var(--nut-primary-color)_ |
+| --nut-timeselect-timedetail-item-cur-border | _var(--nut-primary-color)_ |
 | --nut-timeselect-timedetail-item-cur-text-color | _var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/timeselect/doc.md b/src/packages/__VUE/timeselect/doc.md
index 2d1797609d..8637afa58a 100644
--- a/src/packages/__VUE/timeselect/doc.md
+++ b/src/packages/__VUE/timeselect/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { TimeSelect, TimePannel, TimeDetail } from '@nutui/nutui';
 
@@ -20,16 +20,16 @@ app.use(TimeDetail);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell @click="handleClick1">
     <span><label>请选择配送时间</label></span>
   </nut-cell>
   <nut-time-select
-    v-model:visible="visible1"
+    v-model:visible="state.visible1"
     height="50%"
-    :current-key="currentKey1"
-    :current-time="currentTime1"
+    :current-key="state.currentKey1"
+    :current-time="state.currentTime1"
     @select="handleSelected1"
   >
     <template #pannel>
@@ -37,75 +37,61 @@ app.use(TimeDetail);
       <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
+      <nut-time-detail :times="state.times1" @select="selectTime1"></nut-time-detail>
     </template>
   </nut-time-select>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        visible1: false,
-        currentKey1: 0,
-        currentTime1: [] as any[],
-        times1: [
-          {
-            key: 0,
-            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-          },
-          {
-            key: 1,
-            list: ['9:00-10:00', '10:00-11:00']
-          }
-        ]
-      });
-
-      const handleChange1 = (pannelKey: number) => {
-        state.currentKey1 = pannelKey;
-        state.currentTime1 = [];
-        state.currentTime1.push({
-          key: state.currentKey1,
-          list: []
-        });
-      };
-
-      const handleClick1 = () => {
-        state.visible1 = true;
-      };
-
-      const selectTime1 = (item: string) => {
-        let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
-        if (curTimeIndex === -1) {
-          state.currentTime1[0]['list'].push(item);
-        } else {
-          state.currentTime1[0]['list'].splice(curTimeIndex, 1);
-        }
-      };
-
-      const handleSelected1 = (obj: any) => {
-        showToast.text(`您选择了：${JSON.stringify(obj)}`);
-      };
-
-      onMounted(() => {
-        state.currentTime1.push({
-          key: state.currentKey1,
-          list: []
-        });
-      });
-
-      return {
-        ...toRefs(state),
-        handleChange1,
-        handleSelected1,
-        selectTime1,
-        handleClick1
-      };
+<script setup>
+import { reactive, onMounted } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible1: false,
+  currentKey1: 0,
+  currentTime1: [],
+  times1: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
-  };
+  ]
+});
+
+const handleChange1 = (pannelKey) => {
+  state.currentKey1 = pannelKey;
+  state.currentTime1 = [];
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
+  });
+};
+
+const handleClick1 = () => {
+  state.visible1 = true;
+};
+
+const selectTime1 = (item) => {
+  let curTimeIndex = state.currentTime1[0]['list'].findIndex((time) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime1[0]['list'].push(item);
+  } else {
+    state.currentTime1[0]['list'].splice(curTimeIndex, 1);
+  }
+};
+
+const handleSelected1 = (obj) => {
+  showToast.text(`您选择了：${JSON.stringify(obj)}`);
+};
+
+onMounted(() => {
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
+  });
+});
 </script>
 ```
 
@@ -115,16 +101,16 @@ app.use(TimeDetail);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell @click="handleClick2">
     <span><label>请选择配送时间</label></span>
   </nut-cell>
   <nut-time-select
-    v-model:visible="visible2"
+    v-model:visible="state.visible2"
     height="50%"
-    :current-key="currentKey2"
-    :current-time="currentTime2"
+    :current-key="state.currentKey2"
+    :current-time="state.currentTime2"
     @select="handleSelected2"
   >
     <template #pannel>
@@ -132,78 +118,64 @@ app.use(TimeDetail);
       <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+      <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
     </template>
   </nut-time-select>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        visible2: false,
-        currentKey2: 0,
-        currentTime2: [] as any[],
-        times2: [
-          {
-            key: 0,
-            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-          },
-          {
-            key: 1,
-            list: ['9:00-10:00', '10:00-11:00']
-          }
-        ]
-      });
-
-      const handleChange2 = (pannelKey: number) => {
-        state.currentKey2 = pannelKey;
-        let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
-        if (!curTime) {
-          state.currentTime2.push({
-            key: pannelKey,
-            list: []
-          });
-        }
-      };
-
-      const handleClick2 = () => {
-        state.visible2 = true;
-      };
-
-      const selectTime2 = (item: string) => {
-        let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
-        let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
-        if (curTimeIndex === -1) {
-          state.currentTime2[findIndex]['list'].push(item);
-        } else {
-          state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
-        }
-      };
-
-      const handleSelected2 = (obj: any) => {
-        showToast.text(`您选择了：${JSON.stringify(obj)}`);
-      };
-
-      onMounted(() => {
-        state.currentTime2.push({
-          key: state.currentKey2,
-          list: []
-        });
-      });
-
-      return {
-        ...toRefs(state),
-        handleChange2,
-        handleSelected2,
-        selectTime2,
-        handleClick2
-      };
+<script setup>
+import { reactive, onMounted } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible2: false,
+  currentKey2: 0,
+  currentTime2: [],
+  times2: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
-  };
+  ]
+});
+
+const handleChange2 = (pannelKey) => {
+  state.currentKey2 = pannelKey;
+  let curTime = state.currentTime2.find((item) => item.key == pannelKey);
+  if (!curTime) {
+    state.currentTime2.push({
+      key: pannelKey,
+      list: []
+    });
+  }
+};
+
+const handleClick2 = () => {
+  state.visible2 = true;
+};
+
+const selectTime2 = (item) => {
+  let findIndex = state.currentTime2.findIndex((item) => item.key == state.currentKey2);
+  let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime2[findIndex]['list'].push(item);
+  } else {
+    state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
+  }
+};
+
+const handleSelected2 = (obj) => {
+  showToast.text(`您选择了：${JSON.stringify(obj)}`);
+};
+
+onMounted(() => {
+  state.currentTime2.push({
+    key: state.currentKey2,
+    list: []
+  });
+});
 </script>
 ```
 
@@ -213,16 +185,16 @@ app.use(TimeDetail);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell @click="handleClick2">
     <span><label>请选择配送时间</label></span>
   </nut-cell>
   <nut-time-select
-    v-model:visible="visible2"
+    v-model:visible="state.visible2"
     height="50%"
-    :current-key="currentKey2"
-    :current-time="currentTime2"
+    :current-key="state.currentKey2"
+    :current-time="state.currentTime2"
     @select="handleSelected2"
   >
     <template #title>
@@ -236,97 +208,83 @@ app.use(TimeDetail);
       <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+      <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
     </template>
   </nut-time-select>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        visible2: false,
-        currentKey2: 0,
-        currentTime2: [] as any[],
-        times2: [
-          {
-            key: 0,
-            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-          },
-          {
-            key: 1,
-            list: ['9:00-10:00', '10:00-11:00']
-          }
-        ]
-      });
-
-      const handleChange2 = (pannelKey: number) => {
-        state.currentKey2 = pannelKey;
-        let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
-        if (!curTime) {
-          state.currentTime2.push({
-            key: pannelKey,
-            list: []
-          });
-        }
-      };
-
-      const handleClick2 = () => {
-        state.visible2 = true;
-      };
-
-      const selectTime2 = (item: string) => {
-        let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
-        let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
-        if (curTimeIndex === -1) {
-          state.currentTime2[findIndex]['list'].push(item);
-        } else {
-          state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
-        }
-      };
-
-      const handleSelected2 = (obj: any) => {
-        showToast.text(`您选择了：${JSON.stringify(obj)}`);
-      };
-
-      onMounted(() => {
-        state.currentTime2.push({
-          key: state.currentKey2,
-          list: []
-        });
-      });
-
-      return {
-        ...toRefs(state),
-        handleChange2,
-        handleSelected2,
-        selectTime2,
-        handleClick2
-      };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  visible2: false,
+  currentKey2: 0,
+  currentTime2: [],
+  times2: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
-  };
-</script>
-<style>
-  .timeselect-title {
-    height: 50px;
-  }
-  .title {
-    line-height: 1;
-    padding: 0;
-    margin: 0;
-    margin: 10px 0;
-    font-size: 16px;
-    font-weight: bold;
+  ]
+});
+
+const handleChange2 = (pannelKey) => {
+  state.currentKey2 = pannelKey;
+  let curTime = state.currentTime2.find((item) => item.key == pannelKey);
+  if (!curTime) {
+    state.currentTime2.push({
+      key: pannelKey,
+      list: []
+    });
   }
-  .subtitle {
-    line-height: 1;
-    padding: 0;
-    margin: 0;
-    color: #999;
+};
+
+const handleClick2 = () => {
+  state.visible2 = true;
+};
+
+const selectTime2 = (item) => {
+  let findIndex = state.currentTime2.findIndex((item) => item.key == state.currentKey2);
+  let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime2[findIndex]['list'].push(item);
+  } else {
+    state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
   }
+};
+
+const handleSelected2 = (obj) => {
+  showToast.text(`您选择了：${JSON.stringify(obj)}`);
+};
+
+onMounted(() => {
+  state.currentTime2.push({
+    key: state.currentKey2,
+    list: []
+  });
+});
+</script>
+<style>
+.timeselect-title {
+  height: 50px;
+}
+.title {
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  margin: 10px 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+.subtitle {
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
 </style>
 ```
 
@@ -336,53 +294,53 @@ app.use(TimeDetail);
 
 ### TimeSelect Props
 
-| 参数             | 说明                                                     | 类型             | 默认值     |
-| ---------------- | -------------------------------------------------------- | ---------------- | ---------- |
-| visible          | 是否显示弹层                                             | boolean          | `false`    |
-| height           | 弹层的高度                                               | string           | `20%`      |
-| title            | 弹层标题                                                 | string           | `取件时间` |
-| current-key      | 唯一标识                                                 | string \| number | `0`        |
-| current-time     | 当前选择的时间，数组元素包含:key: string; list: string[] | Array            | `[]`       |
-| lock-scroll      | 背景是否锁定                                             | boolean          | `true`     |
-| teleport-disable | 是否允许挂载节点                                         | boolean          | `false`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| visible | 是否显示弹层 | boolean | `false` |
+| height | 弹层的高度 | string | `20%` |
+| title | 弹层标题 | string | `取件时间` |
+| current-key | 唯一标识 | string \| number | `0` |
+| current-time | 当前选择的时间，数组元素包含:key: string; list: string[] | Array | `[]` |
+| lock-scroll | 背景是否锁定 | boolean | `true` |
+| teleport-disable | 是否允许挂载节点 | boolean | `false` |
 
 ### Slots
 
-| 名称   | 说明         |
-| ------ | ------------ |
-| title  | 更改标题     |
-| pannel | 左侧列表     |
+| 名称 | 说明 |
+| --- | --- |
+| title | 更改标题 |
+| pannel | 左侧列表 |
 | detail | 右侧详细内容 |
 
 ### TimePannel Props
 
-| 参数       | 说明                                          | 类型             | 默认值 |
-| ---------- | --------------------------------------------- | ---------------- | ------ |
-| name       | 显示的名称                                    | string           | ``     |
-| pannel-key | 唯一标识，和 current-key 一起标识当前选择的天 | string \| number | `0`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 显示的名称 | string | `` |
+| pannel-key | 唯一标识，和 current-key 一起标识当前选择的天 | string \| number | `0` |
 
 ### TimeDetail Props
 
-| 参数  | 说明                                    | 类型  | 默认值 |
-| ----- | --------------------------------------- | ----- | ------ |
-| times | 可选择的时间，数组元素同 `current-time` | Array | `[]`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| times | 可选择的时间，数组元素同 `current-time` | Array | `[]` |
 
 ### TimeSelect Event
 
-| 事件名 | 说明               | 回调参数                          |
-| ------ | ------------------ | --------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | select | 关闭遮罩之后的回调 | `key: string \| number, list: []` |
 
 ### TimePannel Event
 
-| 事件名 | 说明           | 回调参数                      |
-| ------ | -------------- | ----------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 点击内容的回调 | `pannelKey: string \| number` |
 
 ### TimeDetail Event
 
-| 事件名 | 说明           | 回调参数       |
-| ------ | -------------- | -------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | select | 点击时间的回调 | `time: string` |
 
 ## 主题定制
@@ -391,29 +349,29 @@ app.use(TimeDetail);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                            | 默认值                     |
-| ----------------------------------------------- | -------------------------- |
-| --nut-timeselect-title-font-size                | _var(--nut-font-size-2)_   |
-| --nut-timeselect-title-color                    | _var(--nut-title-color)_   |
-| --nut-timeselect-title-width                    | _100%_                     |
-| --nut-timeselect-title-height                   | _50px_                     |
-| --nut-timeselect-title-line-height              | _50px_                     |
-| --nut-timeselect-pannel-bg-color                | _#f6f7f9_                  |
-| --nut-timeselect-timepannel-text-color          | _var(--nut-title-color2)_  |
-| --nut-timeselect-timepannel-font-size           | _var(--nut-font-size-2)_   |
-| --nut-timeselect-timepannel-cur-bg-color        | _var(--nut-white)_         |
-| --nut-timeselect-timepannel-cur-text-color      | _#333333_                  |
-| --nut-timeselect-timepannel-width               | _140px_                    |
-| --nut-timeselect-timepannel-height              | _40px_                     |
-| --nut-timeselect-timepannel-padding             | _15px_                     |
-| --nut-timeselect-timedetail-padding             | _0 5px 50px 13px_          |
-| --nut-timeselect-timedetail-item-width          | _100px_                    |
-| --nut-timeselect-timedetail-item-height         | _50px_                     |
-| --nut-timeselect-timedetail-item-line-height    | _50px_                     |
-| --nut-timeselect-timedetail-item-bg-color       | _#f6f7f9_                  |
-| --nut-timeselect-timedetail-item-border-radius  | _5px_                      |
-| --nut-timeselect-timedetail-item-text-color     | _#333333_                  |
-| --nut-timeselect-timedetail-item-text-font-size | _var(--nut-font-size-2)_   |
-| --nut-timeselect-timedetail-item-cur-bg-color   | _var(--nut-primary-color)_ |
-| --nut-timeselect-timedetail-item-cur-border     | _var(--nut-primary-color)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-timeselect-title-font-size | _var(--nut-font-size-2)_ |
+| --nut-timeselect-title-color | _var(--nut-title-color)_ |
+| --nut-timeselect-title-width | _100%_ |
+| --nut-timeselect-title-height | _50px_ |
+| --nut-timeselect-title-line-height | _50px_ |
+| --nut-timeselect-pannel-bg-color | _#f6f7f9_ |
+| --nut-timeselect-timepannel-text-color | _var(--nut-title-color2)_ |
+| --nut-timeselect-timepannel-font-size | _var(--nut-font-size-2)_ |
+| --nut-timeselect-timepannel-cur-bg-color | _var(--nut-white)_ |
+| --nut-timeselect-timepannel-cur-text-color | _#333333_ |
+| --nut-timeselect-timepannel-width | _140px_ |
+| --nut-timeselect-timepannel-height | _40px_ |
+| --nut-timeselect-timepannel-padding | _15px_ |
+| --nut-timeselect-timedetail-padding | _0 5px 50px 13px_ |
+| --nut-timeselect-timedetail-item-width | _100px_ |
+| --nut-timeselect-timedetail-item-height | _50px_ |
+| --nut-timeselect-timedetail-item-line-height | _50px_ |
+| --nut-timeselect-timedetail-item-bg-color | _#f6f7f9_ |
+| --nut-timeselect-timedetail-item-border-radius | _5px_ |
+| --nut-timeselect-timedetail-item-text-color | _#333333_ |
+| --nut-timeselect-timedetail-item-text-font-size | _var(--nut-font-size-2)_ |
+| --nut-timeselect-timedetail-item-cur-bg-color | _var(--nut-primary-color)_ |
+| --nut-timeselect-timedetail-item-cur-border | _var(--nut-primary-color)_ |
 | --nut-timeselect-timedetail-item-cur-text-color | _var(--nut-primary-color)_ |
diff --git a/src/packages/__VUE/timeselect/doc.taro.md b/src/packages/__VUE/timeselect/doc.taro.md
index d1454f6cf3..38c636b9ee 100644
--- a/src/packages/__VUE/timeselect/doc.taro.md
+++ b/src/packages/__VUE/timeselect/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { TimeSelect, TimePannel, TimeDetail } from '@nutui/nutui-taro';
 
@@ -20,16 +20,16 @@ app.use(TimeDetail);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell @click="handleClick1">
     <span><label>请选择配送时间</label></span>
   </nut-cell>
   <nut-time-select
-    v-model:visible="visible1"
+    v-model:visible="state.visible1"
     height="50%"
-    :current-key="currentKey1"
-    :current-time="currentTime1"
+    :current-key="state.currentKey1"
+    :current-time="state.currentTime1"
     @select="handleSelected1"
   >
     <template #pannel>
@@ -37,73 +37,60 @@ app.use(TimeDetail);
       <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
+      <nut-time-detail :times="state.times1" @select="selectTime1"></nut-time-detail>
     </template>
   </nut-time-select>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        visible1: false,
-        currentKey1: 0,
-        currentTime1: [] as any[],
-        times1: [
-          {
-            key: 0,
-            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-          },
-          {
-            key: 1,
-            list: ['9:00-10:00', '10:00-11:00']
-          }
-        ]
-      });
-
-      const handleChange1 = (pannelKey: number) => {
-        state.currentKey1 = pannelKey;
-        state.currentTime1 = [];
-        state.currentTime1.push({
-          key: state.currentKey1,
-          list: []
-        });
-      };
-
-      const handleClick1 = () => {
-        state.visible1 = true;
-      };
-
-      const selectTime1 = (item: string) => {
-        let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
-        if (curTimeIndex === -1) {
-          state.currentTime1[0]['list'].push(item);
-        } else {
-          state.currentTime1[0]['list'].splice(curTimeIndex, 1);
-        }
-      };
-
-      const handleSelected1 = (obj: any) => {
-        console.log(`您选择了：${JSON.stringify(obj)}`);
-      };
-
-      onMounted(() => {
-        state.currentTime1.push({
-          key: state.currentKey1,
-          list: []
-        });
-      });
-
-      return {
-        ...toRefs(state),
-        handleChange1,
-        handleSelected1,
-        selectTime1,
-        handleClick1
-      };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  visible1: false,
+  currentKey1: 0,
+  currentTime1: [],
+  times1: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
-  };
+  ]
+});
+
+const handleChange1 = (pannelKey) => {
+  state.currentKey1 = pannelKey;
+  state.currentTime1 = [];
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
+  });
+};
+
+const handleClick1 = () => {
+  state.visible1 = true;
+};
+
+const selectTime1 = (item) => {
+  let curTimeIndex = state.currentTime1[0]['list'].findIndex((time) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime1[0]['list'].push(item);
+  } else {
+    state.currentTime1[0]['list'].splice(curTimeIndex, 1);
+  }
+};
+
+const handleSelected1 = (obj) => {
+  console.log(`您选择了：${JSON.stringify(obj)}`);
+};
+
+onMounted(() => {
+  state.currentTime1.push({
+    key: state.currentKey1,
+    list: []
+  });
+});
 </script>
 ```
 
@@ -113,16 +100,16 @@ app.use(TimeDetail);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell @click="handleClick2">
     <span><label>请选择配送时间</label></span>
   </nut-cell>
   <nut-time-select
-    v-model:visible="visible2"
+    v-model:visible="state.visible2"
     height="50%"
-    :current-key="currentKey2"
-    :current-time="currentTime2"
+    :current-key="state.currentKey2"
+    :current-time="state.currentTime2"
     @select="handleSelected2"
   >
     <template #pannel>
@@ -130,76 +117,63 @@ app.use(TimeDetail);
       <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+      <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
     </template>
   </nut-time-select>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        visible2: false,
-        currentKey2: 0,
-        currentTime2: [] as any[],
-        times2: [
-          {
-            key: 0,
-            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-          },
-          {
-            key: 1,
-            list: ['9:00-10:00', '10:00-11:00']
-          }
-        ]
-      });
-
-      const handleChange2 = (pannelKey: number) => {
-        state.currentKey2 = pannelKey;
-        let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
-        if (!curTime) {
-          state.currentTime2.push({
-            key: pannelKey,
-            list: []
-          });
-        }
-      };
-
-      const handleClick2 = () => {
-        state.visible2 = true;
-      };
-
-      const selectTime2 = (item: string) => {
-        let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
-        let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
-        if (curTimeIndex === -1) {
-          state.currentTime2[findIndex]['list'].push(item);
-        } else {
-          state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
-        }
-      };
-
-      const handleSelected2 = (obj: any) => {
-        console.log(`您选择了：${JSON.stringify(obj)}`);
-      };
-
-      onMounted(() => {
-        state.currentTime2.push({
-          key: state.currentKey2,
-          list: []
-        });
-      });
-
-      return {
-        ...toRefs(state),
-        handleChange2,
-        handleSelected2,
-        selectTime2,
-        handleClick2
-      };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  visible2: false,
+  currentKey2: 0,
+  currentTime2: [],
+  times2: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
-  };
+  ]
+});
+
+const handleChange2 = (pannelKey) => {
+  state.currentKey2 = pannelKey;
+  let curTime = state.currentTime2.find((item) => item.key == pannelKey);
+  if (!curTime) {
+    state.currentTime2.push({
+      key: pannelKey,
+      list: []
+    });
+  }
+};
+
+const handleClick2 = () => {
+  state.visible2 = true;
+};
+
+const selectTime2 = (item) => {
+  let findIndex = state.currentTime2.findIndex((item) => item.key == state.currentKey2);
+  let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime2[findIndex]['list'].push(item);
+  } else {
+    state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
+  }
+};
+
+const handleSelected2 = (obj) => {
+  console.log(`您选择了：${JSON.stringify(obj)}`);
+};
+
+onMounted(() => {
+  state.currentTime2.push({
+    key: state.currentKey2,
+    list: []
+  });
+});
 </script>
 ```
 
@@ -209,16 +183,16 @@ app.use(TimeDetail);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell @click="handleClick2">
     <span><label>请选择配送时间</label></span>
   </nut-cell>
   <nut-time-select
-    v-model:visible="visible2"
+    v-model:visible="state.visible2"
     height="50%"
-    :current-key="currentKey2"
-    :current-time="currentTime2"
+    :current-key="state.currentKey2"
+    :current-time="state.currentTime2"
     @select="handleSelected2"
   >
     <template #title>
@@ -232,95 +206,82 @@ app.use(TimeDetail);
       <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
     </template>
     <template #detail>
-      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
+      <nut-time-detail :times="state.times2" @select="selectTime2"></nut-time-detail>
     </template>
   </nut-time-select>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        visible2: false,
-        currentKey2: 0,
-        currentTime2: [] as any[],
-        times2: [
-          {
-            key: 0,
-            list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
-          },
-          {
-            key: 1,
-            list: ['9:00-10:00', '10:00-11:00']
-          }
-        ]
-      });
-
-      const handleChange2 = (pannelKey: number) => {
-        state.currentKey2 = pannelKey;
-        let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
-        if (!curTime) {
-          state.currentTime2.push({
-            key: pannelKey,
-            list: []
-          });
-        }
-      };
-
-      const handleClick2 = () => {
-        state.visible2 = true;
-      };
-
-      const selectTime2 = (item: string) => {
-        let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
-        let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
-        if (curTimeIndex === -1) {
-          state.currentTime2[findIndex]['list'].push(item);
-        } else {
-          state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
-        }
-      };
-
-      const handleSelected2 = (obj: any) => {
-        console.log(`您选择了：${JSON.stringify(obj)}`);
-      };
-
-      onMounted(() => {
-        state.currentTime2.push({
-          key: state.currentKey2,
-          list: []
-        });
-      });
-
-      return {
-        ...toRefs(state),
-        handleChange2,
-        handleSelected2,
-        selectTime2,
-        handleClick2
-      };
+<script setup>
+import { reactive, toRefs, onMounted } from 'vue';
+const state = reactive({
+  visible2: false,
+  currentKey2: 0,
+  currentTime2: [],
+  times2: [
+    {
+      key: 0,
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
+    },
+    {
+      key: 1,
+      list: ['9:00-10:00', '10:00-11:00']
     }
-  };
-</script>
-<style>
-  .timeselect-title {
-    height: 50px;
-  }
-  .title {
-    line-height: 1;
-    padding: 0;
-    margin: 0;
-    margin: 10px 0;
-    font-size: 16px;
-    font-weight: bold;
+  ]
+});
+
+const handleChange2 = (pannelKey) => {
+  state.currentKey2 = pannelKey;
+  let curTime = state.currentTime2.find((item) => item.key == pannelKey);
+  if (!curTime) {
+    state.currentTime2.push({
+      key: pannelKey,
+      list: []
+    });
   }
-  .subtitle {
-    line-height: 1;
-    padding: 0;
-    margin: 0;
-    color: #999;
+};
+
+const handleClick2 = () => {
+  state.visible2 = true;
+};
+
+const selectTime2 = (item) => {
+  let findIndex = state.currentTime2.findIndex((item) => item.key == state.currentKey2);
+  let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time) => time === item);
+  if (curTimeIndex === -1) {
+    state.currentTime2[findIndex]['list'].push(item);
+  } else {
+    state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
   }
+};
+
+const handleSelected2 = (obj) => {
+  console.log(`您选择了：${JSON.stringify(obj)}`);
+};
+
+onMounted(() => {
+  state.currentTime2.push({
+    key: state.currentKey2,
+    list: []
+  });
+});
+</script>
+<style>
+.timeselect-title {
+  height: 50px;
+}
+.title {
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  margin: 10px 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+.subtitle {
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
 </style>
 ```
 
@@ -330,52 +291,52 @@ app.use(TimeDetail);
 
 ### TimeSelect Props
 
-| 参数         | 说明                                                     | 类型             | 默认值     |
-| ------------ | -------------------------------------------------------- | ---------------- | ---------- |
-| visible      | 是否显示弹层                                             | boolean          | `false`    |
-| height       | 弹层的高度                                               | string           | `20%`      |
-| title        | 弹层标题                                                 | string           | `取件时间` |
-| current-key  | 唯一标识                                                 | string \| number | `0`        |
-| current-time | 当前选择的时间，数组元素包含:key: string; list: string[] | Array            | `[]`       |
-| lock-scroll  | 背景是否锁定                                             | boolean          | `true`     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| visible | 是否显示弹层 | boolean | `false` |
+| height | 弹层的高度 | string | `20%` |
+| title | 弹层标题 | string | `取件时间` |
+| current-key | 唯一标识 | string \| number | `0` |
+| current-time | 当前选择的时间，数组元素包含:key: string; list: string[] | Array | `[]` |
+| lock-scroll | 背景是否锁定 | boolean | `true` |
 
 ### Slots
 
-| 名称   | 说明         |
-| ------ | ------------ |
-| title  | 更改标题     |
-| pannel | 左侧列表     |
+| 名称 | 说明 |
+| --- | --- |
+| title | 更改标题 |
+| pannel | 左侧列表 |
 | detail | 右侧详细内容 |
 
 ### TimePannel Props
 
-| 参数       | 说明                                          | 类型             | 默认值 |
-| ---------- | --------------------------------------------- | ---------------- | ------ |
-| name       | 显示的名称                                    | string           | ``     |
-| pannel-key | 唯一标识，和 current-key 一起标识当前选择的天 | string \| number | `0`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 显示的名称 | string | `` |
+| pannel-key | 唯一标识，和 current-key 一起标识当前选择的天 | string \| number | `0` |
 
 ### TimeDetail Props
 
-| 参数  | 说明                                    | 类型  | 默认值 |
-| ----- | --------------------------------------- | ----- | ------ |
-| times | 可选择的时间，数组元素同 `current-time` | Array | `[]`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| times | 可选择的时间，数组元素同 `current-time` | Array | `[]` |
 
 ### TimeSelect Event
 
-| 事件名 | 说明               | 回调参数                          |
-| ------ | ------------------ | --------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | select | 关闭遮罩之后的回调 | `key: string \| number, list: []` |
 
 ### TimePannel Event
 
-| 事件名 | 说明           | 回调参数                       |
-| ------ | -------------- | ------------------------------ |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 点击内容的回调 | `pannelKey: string \｜ number` |
 
 ### TimeDetail Event
 
-| 事件名 | 说明           | 回调参数       |
-| ------ | -------------- | -------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | select | 点击时间的回调 | `time: string` |
 
 ## 主题定制
@@ -384,29 +345,29 @@ app.use(TimeDetail);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                            | 默认值                     |
-| ----------------------------------------------- | -------------------------- |
-| --nut-timeselect-title-font-size                | _var(--nut-font-size-2)_   |
-| --nut-timeselect-title-color                    | _var(--nut-title-color)_   |
-| --nut-timeselect-title-width                    | _100%_                     |
-| --nut-timeselect-title-height                   | _50px_                     |
-| --nut-timeselect-title-line-height              | _50px_                     |
-| --nut-timeselect-pannel-bg-color                | _#f6f7f9_                  |
-| --nut-timeselect-timepannel-text-color          | _var(--nut-title-color2)_  |
-| --nut-timeselect-timepannel-font-size           | _var(--nut-font-size-2)_   |
-| --nut-timeselect-timepannel-cur-bg-color        | _var(--nut-white)_         |
-| --nut-timeselect-timepannel-cur-text-color      | _#333333_                  |
-| --nut-timeselect-timepannel-width               | _140px_                    |
-| --nut-timeselect-timepannel-height              | _40px_                     |
-| --nut-timeselect-timepannel-padding             | _15px_                     |
-| --nut-timeselect-timedetail-padding             | _0 5px 50px 13px_          |
-| --nut-timeselect-timedetail-item-width          | _100px_                    |
-| --nut-timeselect-timedetail-item-height         | _50px_                     |
-| --nut-timeselect-timedetail-item-line-height    | _50px_                     |
-| --nut-timeselect-timedetail-item-bg-color       | _#f6f7f9_                  |
-| --nut-timeselect-timedetail-item-border-radius  | _5px_                      |
-| --nut-timeselect-timedetail-item-text-color     | _#333333_                  |
-| --nut-timeselect-timedetail-item-text-font-size | _var(--nut-font-size-2)_   |
-| --nut-timeselect-timedetail-item-cur-bg-color   | _var(--nut-primary-color)_ |
-| --nut-timeselect-timedetail-item-cur-border     | _var(--nut-primary-color)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-timeselect-title-font-size | _var(--nut-font-size-2)_ |
+| --nut-timeselect-title-color | _var(--nut-title-color)_ |
+| --nut-timeselect-title-width | _100%_ |
+| --nut-timeselect-title-height | _50px_ |
+| --nut-timeselect-title-line-height | _50px_ |
+| --nut-timeselect-pannel-bg-color | _#f6f7f9_ |
+| --nut-timeselect-timepannel-text-color | _var(--nut-title-color2)_ |
+| --nut-timeselect-timepannel-font-size | _var(--nut-font-size-2)_ |
+| --nut-timeselect-timepannel-cur-bg-color | _var(--nut-white)_ |
+| --nut-timeselect-timepannel-cur-text-color | _#333333_ |
+| --nut-timeselect-timepannel-width | _140px_ |
+| --nut-timeselect-timepannel-height | _40px_ |
+| --nut-timeselect-timepannel-padding | _15px_ |
+| --nut-timeselect-timedetail-padding | _0 5px 50px 13px_ |
+| --nut-timeselect-timedetail-item-width | _100px_ |
+| --nut-timeselect-timedetail-item-height | _50px_ |
+| --nut-timeselect-timedetail-item-line-height | _50px_ |
+| --nut-timeselect-timedetail-item-bg-color | _#f6f7f9_ |
+| --nut-timeselect-timedetail-item-border-radius | _5px_ |
+| --nut-timeselect-timedetail-item-text-color | _#333333_ |
+| --nut-timeselect-timedetail-item-text-font-size | _var(--nut-font-size-2)_ |
+| --nut-timeselect-timedetail-item-cur-bg-color | _var(--nut-primary-color)_ |
+| --nut-timeselect-timedetail-item-cur-border | _var(--nut-primary-color)_ |
 | --nut-timeselect-timedetail-item-cur-text-color | _var(--nut-primary-color)_ |