From a3965f240003e830d4f4bc03364ff37eed84d547 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Fri, 28 Jul 2023 00:30:06 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3=20?=
 =?UTF-8?q?demo=20=E4=BB=A3=E7=A0=81=E8=B5=B0=E6=9F=A5=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=20(#2459)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/__VUE/address/doc.en-US.md       |  37 ++-
 src/packages/__VUE/address/doc.md             |   3 -
 src/packages/__VUE/address/doc.taro.md        |  16 +-
 src/packages/__VUE/addresslist/doc.en-US.md   |   1 -
 src/packages/__VUE/addresslist/doc.md         |   1 -
 src/packages/__VUE/addresslist/doc.taro.md    |   1 -
 src/packages/__VUE/audio/doc.en-US.md         | 163 +++--------
 src/packages/__VUE/audio/doc.md               | 163 +++--------
 src/packages/__VUE/backtop/doc.en-US.md       | 161 ++---------
 src/packages/__VUE/backtop/doc.md             | 161 ++---------
 src/packages/__VUE/backtop/doc.taro.md        |  60 +---
 .../__VUE/circleprogress/doc.en-US.md         |   3 +-
 src/packages/__VUE/circleprogress/doc.md      |   3 +-
 src/packages/__VUE/circleprogress/doc.taro.md |   3 +-
 src/packages/__VUE/empty/doc.en-US.md         |   1 +
 src/packages/__VUE/empty/doc.md               |   1 +
 src/packages/__VUE/empty/doc.taro.md          |   1 +
 src/packages/__VUE/fixednav/doc.en-US.md      | 237 +++++++++++-----
 src/packages/__VUE/fixednav/doc.md            | 241 +++++++++++-----
 src/packages/__VUE/fixednav/doc.taro.md       | 208 ++++++++------
 src/packages/__VUE/form/doc.en-US.md          | 114 ++++----
 src/packages/__VUE/form/doc.md                | 122 +++++----
 src/packages/__VUE/form/doc.taro.md           | 118 ++++----
 .../__VUE/infiniteloading/doc.en-US.md        | 259 +++++++-----------
 src/packages/__VUE/infiniteloading/doc.md     | 259 +++++++-----------
 src/packages/__VUE/invoice/doc.en-US.md       |   1 -
 src/packages/__VUE/invoice/doc.md             |   1 -
 src/packages/__VUE/invoice/doc.taro.md        |   1 -
 src/packages/__VUE/navbar/doc.en-US.md        | 126 ++++-----
 src/packages/__VUE/navbar/doc.md              | 128 ++++-----
 src/packages/__VUE/navbar/doc.taro.md         | 138 ++++------
 src/packages/__VUE/pullrefresh/doc.en-US.md   | 109 ++++----
 src/packages/__VUE/pullrefresh/doc.md         | 109 ++++----
 src/packages/__VUE/rate/doc.en-US.md          | 164 ++++-------
 src/packages/__VUE/rate/doc.md                | 164 ++++-------
 src/packages/__VUE/rate/doc.taro.md           | 172 ++++--------
 src/packages/__VUE/signature/doc.en-US.md     |  92 +++----
 src/packages/__VUE/signature/doc.md           |  92 +++----
 src/packages/__VUE/signature/doc.taro.md      |  96 ++++---
 src/packages/__VUE/steps/doc.en-US.md         |  72 ++---
 src/packages/__VUE/steps/doc.md               |  72 ++---
 src/packages/__VUE/steps/doc.taro.md          |  72 ++---
 src/packages/__VUE/sticky/doc.en-US.md        |  34 ++-
 src/packages/__VUE/sticky/doc.md              |  34 ++-
 src/packages/__VUE/sticky/doc.taro.md         |  16 +-
 src/packages/__VUE/swipe/doc.en-US.md         |   4 +-
 src/packages/__VUE/swipe/doc.md               |   4 +-
 src/packages/__VUE/swipe/doc.taro.md          |   4 +-
 src/packages/__VUE/switch/doc.en-US.md        | 143 +++-------
 src/packages/__VUE/switch/doc.md              | 139 +++-------
 src/packages/__VUE/switch/doc.taro.md         | 135 +++------
 src/packages/__VUE/table/doc.md               |   4 +-
 src/packages/__VUE/table/doc.taro.md          |   4 +-
 src/packages/__VUE/textarea/doc.en-US.md      |  31 ++-
 src/packages/__VUE/textarea/doc.md            |  39 +--
 src/packages/__VUE/textarea/doc.taro.md       |  29 +-
 56 files changed, 1878 insertions(+), 2688 deletions(-)

diff --git a/src/packages/__VUE/address/doc.en-US.md b/src/packages/__VUE/address/doc.en-US.md
index 8b095b34e1..82505adb02 100644
--- a/src/packages/__VUE/address/doc.en-US.md
+++ b/src/packages/__VUE/address/doc.en-US.md
@@ -66,7 +66,7 @@ app.use(Address);
 
       const onChange = (cal) => {
         const name = address[cal.next];
-        if (name.length < 1) {
+        if (!name || name.length < 1) {
           showPopup.value = false;
         }
       };
@@ -101,7 +101,6 @@ If you want to select a province, you need to set the region ID in the order of
     @change="onChange"
     @close="close"
     custom-address-title="Choose City"
-    :columns-placeholder="placeholder"
   ></nut-address>
 </template>
 <script>
@@ -109,6 +108,7 @@ If you want to select a province, you need to set the region ID in the order of
   export default {
     setup() {
       const showPopup = ref(false);
+      const value = ref([1, 7, 3]);
       const address = reactive({
         province: [
           { id: 1, name: '北京' },
@@ -131,7 +131,6 @@ If you want to select a province, you need to set the region ID in the order of
       });
 
       const text = ref('Balizhuang Street, Chaoyang District, Beijing');
-      const value = ref([1, 7, 3]);
 
       const showAddress = () => {
         showPopup.value = !showPopup.value;
@@ -139,12 +138,11 @@ If you want to select a province, you need to set the region ID in the order of
 
       const onChange = (cal) => {
         const name = address[cal.next];
-        if (name.length < 1) {
+        if (!name || name.length < 1) {
           showPopup.value = false;
         }
       };
       const close = (val) => {
-        console.log(val);
         text.value = val.data.addressStr;
         value.value = [val.data.province.id, val.data.city.id, val.data.country.id];
       };
@@ -215,7 +213,7 @@ If you want to select a province, you need to set the region ID in the order of
 
       const onChange = (cal) => {
         const name = address[cal.next];
-        if (name.length < 1) {
+        if (!name || name.length < 1) {
           showPopup.value = false;
         }
       };
@@ -328,10 +326,9 @@ If you want to select a province, you need to set the region ID in the order of
   <nut-address
     v-model:visible="showPopupCustomImg"
     type="exist"
-    :existAddress="existAddress"
+    :exist-address="existAddress"
     @close="close"
     :is-show-custom-address="false"
-    @selected="selected3"
   >
     <template #unselected-icon>
       <Heart1 style="margin-right:8px"></Heart1>
@@ -409,10 +406,29 @@ If you want to select a province, you need to set the region ID in the order of
         console.log(nowExistAdd);
       };
 
-      return { showPopupCustomImg, existAddress, text, showCustomImg, close, selected, ...toRefs(icon) };
+      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;
+  }
+  .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>
 ```
 
 :::
@@ -528,10 +544,9 @@ If you want to select a province, you need to set the region ID in the order of
           console.log('点击了自定义地址左上角的返回按钮');
         }
       };
-
       const onChange = (cal) => {
         const name = address[cal.next];
-        if (name.length < 1) {
+        if (!name || name.length < 1) {
           showPopupOther.value = false;
         }
       };
diff --git a/src/packages/__VUE/address/doc.md b/src/packages/__VUE/address/doc.md
index c55187ff5b..35afc37496 100644
--- a/src/packages/__VUE/address/doc.md
+++ b/src/packages/__VUE/address/doc.md
@@ -101,7 +101,6 @@ app.use(Address);
     @change="onChange"
     @close="close"
     custom-address-title="请选择所在地区"
-    :columns-placeholder="placeholder"
   ></nut-address>
 </template>
 <script>
@@ -132,7 +131,6 @@ app.use(Address);
       });
 
       const text = ref('北京朝阳区八里庄街道');
-      const value = ref([1, 7, 3]);
 
       const showAddress = () => {
         showPopup.value = !showPopup.value;
@@ -331,7 +329,6 @@ app.use(Address);
     :exist-address="existAddress"
     @close="close"
     :is-show-custom-address="false"
-    @selected="selected3"
   >
     <template #unselected-icon>
       <Heart1 style="margin-right:8px"></Heart1>
diff --git a/src/packages/__VUE/address/doc.taro.md b/src/packages/__VUE/address/doc.taro.md
index 3bb94f9ed4..b3b58bd23a 100644
--- a/src/packages/__VUE/address/doc.taro.md
+++ b/src/packages/__VUE/address/doc.taro.md
@@ -58,7 +58,7 @@ app.use(Address);
         town: []
       });
 
-      const text = ref('请选择地址');
+      const text = ref('选择地址');
 
       const showAddress = () => {
         showPopup.value = !showPopup.value;
@@ -101,7 +101,6 @@ app.use(Address);
     @change="onChange"
     @close="close"
     custom-address-title="请选择所在地区"
-    :columns-placeholder="placeholder"
   ></nut-address>
 </template>
 <script>
@@ -109,6 +108,7 @@ app.use(Address);
   export default {
     setup() {
       const showPopup = ref(false);
+      const value = ref([1, 7, 3]);
       const address = reactive({
         province: [
           { id: 1, name: '北京' },
@@ -131,7 +131,6 @@ app.use(Address);
       });
 
       const text = ref('北京朝阳区八里庄街道');
-      const value = ref([1, 7, 3]);
 
       const showAddress = () => {
         showPopup.value = !showPopup.value;
@@ -173,7 +172,6 @@ app.use(Address);
     :town="town"
     @change="onChange"
     @close="close"
-    custom-address-title="请选择所在地区"
     height="270px"
   ></nut-address>
 </template>
@@ -290,7 +288,7 @@ app.use(Address);
         }
       ]);
 
-      const text = ref('请选择地址');
+      const text = ref('选择地址');
 
       const showAddressExist = () => {
         showPopupExist.value = true;
@@ -328,10 +326,9 @@ app.use(Address);
   <nut-address
     v-model:visible="showPopupCustomImg"
     type="exist"
-    :existAddress="existAddress"
+    :exist-address="existAddress"
     @close="close"
     :is-show-custom-address="false"
-    @selected="selected3"
   >
     <template #unselected-icon>
       <Heart1 style="margin-right:8px"></Heart1>
@@ -389,7 +386,7 @@ app.use(Address);
         }
       ]);
 
-      const text = ref('请选择地址');
+      const text = ref('选择地址');
 
       const showCustomImg = () => {
         showPopupCustomImg.value = true;
@@ -520,7 +517,7 @@ app.use(Address);
         }
       ]);
       const backBtnIcon = ref('left');
-      const text = ref('请选择地址');
+      const text = ref('选择地址');
 
       const showAddressOther = () => {
         showPopupOther.value = true;
@@ -547,7 +544,6 @@ app.use(Address);
           console.log('点击了自定义地址左上角的返回按钮');
         }
       };
-
       const onChange = (cal) => {
         const name = address[cal.next];
         if (!name || name.length < 1) {
diff --git a/src/packages/__VUE/addresslist/doc.en-US.md b/src/packages/__VUE/addresslist/doc.en-US.md
index 9ab4e7e439..5c37c2f513 100644
--- a/src/packages/__VUE/addresslist/doc.en-US.md
+++ b/src/packages/__VUE/addresslist/doc.en-US.md
@@ -222,7 +222,6 @@ app.use(AddressList);
         clickItem,
         delClick,
         editClick,
-        setClick,
         delClickSwipe,
         addAddress,
         dataOptions
diff --git a/src/packages/__VUE/addresslist/doc.md b/src/packages/__VUE/addresslist/doc.md
index 766647c2fd..960c89e109 100644
--- a/src/packages/__VUE/addresslist/doc.md
+++ b/src/packages/__VUE/addresslist/doc.md
@@ -222,7 +222,6 @@ app.use(AddressList);
         clickItem,
         delClick,
         editClick,
-        setClick,
         delClickSwipe,
         addAddress,
         dataOptions
diff --git a/src/packages/__VUE/addresslist/doc.taro.md b/src/packages/__VUE/addresslist/doc.taro.md
index 32e371f879..7de24471d6 100644
--- a/src/packages/__VUE/addresslist/doc.taro.md
+++ b/src/packages/__VUE/addresslist/doc.taro.md
@@ -222,7 +222,6 @@ app.use(AddressList);
         clickItem,
         delClick,
         editClick,
-        setClick,
         delClickSwipe,
         addAddress,
         dataOptions
diff --git a/src/packages/__VUE/audio/doc.en-US.md b/src/packages/__VUE/audio/doc.en-US.md
index f58632b0bc..1809f0f254 100644
--- a/src/packages/__VUE/audio/doc.en-US.md
+++ b/src/packages/__VUE/audio/doc.en-US.md
@@ -6,7 +6,7 @@ Audio Playing
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Audio } from '@nutui/nutui';
 
@@ -18,30 +18,10 @@ app.use(Audio);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-audio
-    url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :muted="muted"
-    :autoplay="autoplay"
-    :loop="true"
-    type="icon"
-  ></nut-audio>
+  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="true" type="icon"></nut-audio>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const data = reactive({
-        muted: false,
-        autoplay: false
-      });
-      return {
-        ...toRefs(data)
-      };
-    }
-  };
-</script>
 ```
 
 :::
@@ -52,47 +32,23 @@ app.use(Audio);
 
 ```vue
 <template>
-  <nut-audio
-    url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :muted="muted"
-    :autoplay="autoplay"
-    :loop="false"
-    type="none"
-    ref="audioDemo"
-  >
+  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="false" type="none" ref="audioDemo">
     <div class="nut-voice">
       <div><Voice></Voice></div>
       <div>{{ duration }}"</div>
     </div>
   </nut-audio>
 </template>
-<script lang="ts">
-import { reactive, toRefs, onMounted } from 'vue';
+<script setup>
+import { ref, onMounted } from 'vue';
 import { Voice } from '@nutui/icons-vue';
-export default {
-  components: {
-    Voice
-  },
-  setup() {
-    const audioDemo = ref(null);
-    const data = reactive({
-      muted: false,
-      autoplay: false
-    });
-    const duration = ref(0);
-    onMounted(() => {
-      setTimeout(() => {
-        duration.value = audioDemo.value.second.toFixed();
-      }, 500);
-    });
-
-    return {
-      ...toRefs(data),
-      duration,
-      audioDemo
-    };
-  }
-};
+const audioDemo = ref(null);
+const duration = ref(0);
+onMounted(() => {
+  setTimeout(() => {
+    duration.value = audioDemo.value.second.toFixed();
+  }, 500);
+});
 </script>
 
 <style>
@@ -114,15 +70,9 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-audio
-    url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :muted="muted"
-    :autoplay="autoplay"
-    :loop="true"
-    type="progress"
-  >
+  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="true" type="progress">
     <div class="nut-audio-operate-group">
       <nut-audio-operate type="back"></nut-audio-operate>
       <nut-audio-operate type="play"></nut-audio-operate>
@@ -131,20 +81,6 @@ export default {
     </div>
   </nut-audio>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const data = reactive({
-        muted: false,
-        autoplay: false
-      });
-      return {
-        ...toRefs(data)
-      };
-    }
-  };
-</script>
 ```
 
 :::
@@ -157,8 +93,6 @@ export default {
 <template>
   <nut-audio
     url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :muted="muted"
-    :autoplay="autoplay"
     :loop="false"
     type="progress"
     @forward="forward"
@@ -181,56 +115,25 @@ export default {
     </div>
   </nut-audio>
 </template>
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup>
+import { ref } from 'vue';
 import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue';
-export default {
-  components: {
-    PlayDoubleBack,
-    PlayDoubleForward,
-    PlayStart,
-    PlayStop
-  },
-  setup() {
-    const data = reactive({
-      muted: false,
-      autoplay: false
-    });
-    const playing = ref(false);
-
-    const fastBack = () => {
-      console.log('Backwards');
-    };
-
-    const forward = (progress: number) => {
-      console.log('Fast forward', 'Current Time' + progress);
-    };
-
-    const changeStatus = (status: boolean) => {
-      console.log('Current play status', status);
-      playing.value = status;
-    };
-
-    const ended = () => {
-      console.log('Playing ended');
-    };
-
-    const changeProgress = (val: number) => {
-      console.log('Change progress', val);
-    };
-
-    return {
-      ...toRefs(data),
-      playing,
-      fastBack,
-      forward,
-      changeStatus,
-      audioDemo,
-      ended,
-      duration,
-      changeProgress
-    };
-  }
+const playing = ref(false);
+const fastBack = () => {
+  console.log('Backwards');
+};
+const forward = (progress) => {
+  console.log('Fast forward', 'Current Time' + progress);
+};
+const changeStatus = (status) => {
+  console.log('Current play status', status);
+  playing.value = status;
+};
+const ended = () => {
+  console.log('Playing ended');
+};
+const changeProgress = (val) => {
+  console.log('Change progress', val);
 };
 </script>
 ```
diff --git a/src/packages/__VUE/audio/doc.md b/src/packages/__VUE/audio/doc.md
index 52dede9aff..e1d6104e83 100644
--- a/src/packages/__VUE/audio/doc.md
+++ b/src/packages/__VUE/audio/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Audio } from '@nutui/nutui';
 
@@ -18,30 +18,10 @@ app.use(Audio);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-audio
-    url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :muted="muted"
-    :autoplay="autoplay"
-    :loop="true"
-    type="icon"
-  ></nut-audio>
+  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="true" type="icon"></nut-audio>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const data = reactive({
-        muted: false,
-        autoplay: false
-      });
-      return {
-        ...toRefs(data)
-      };
-    }
-  };
-</script>
 ```
 
 :::
@@ -52,47 +32,23 @@ app.use(Audio);
 
 ```vue
 <template>
-  <nut-audio
-    url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :muted="muted"
-    :autoplay="autoplay"
-    :loop="false"
-    type="none"
-    ref="audioDemo"
-  >
+  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="false" type="none" ref="audioDemo">
     <div class="nut-voice">
       <div><Voice></Voice></div>
       <div>{{ duration }}"</div>
     </div>
   </nut-audio>
 </template>
-<script lang="ts">
-import { reactive, toRefs, onMounted } from 'vue';
+<script setup>
+import { ref, onMounted } from 'vue';
 import { Voice } from '@nutui/icons-vue';
-export default {
-  components: {
-    Voice
-  },
-  setup() {
-    const audioDemo = ref(null);
-    const data = reactive({
-      muted: false,
-      autoplay: false
-    });
-    const duration = ref(0);
-    onMounted(() => {
-      setTimeout(() => {
-        duration.value = audioDemo.value.second.toFixed();
-      }, 500);
-    });
-
-    return {
-      ...toRefs(data),
-      duration,
-      audioDemo
-    };
-  }
-};
+const audioDemo = ref(null);
+const duration = ref(0);
+onMounted(() => {
+  setTimeout(() => {
+    duration.value = audioDemo.value.second.toFixed();
+  }, 500);
+});
 </script>
 
 <style>
@@ -114,15 +70,9 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-audio
-    url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :muted="muted"
-    :autoplay="autoplay"
-    :loop="true"
-    type="progress"
-  >
+  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="true" type="progress">
     <div class="nut-audio-operate-group">
       <nut-audio-operate type="back"></nut-audio-operate>
       <nut-audio-operate type="play"></nut-audio-operate>
@@ -131,20 +81,6 @@ export default {
     </div>
   </nut-audio>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const data = reactive({
-        muted: false,
-        autoplay: false
-      });
-      return {
-        ...toRefs(data)
-      };
-    }
-  };
-</script>
 ```
 
 :::
@@ -157,8 +93,6 @@ export default {
 <template>
   <nut-audio
     url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :muted="muted"
-    :autoplay="autoplay"
     :loop="false"
     type="progress"
     @forward="forward"
@@ -181,56 +115,25 @@ export default {
     </div>
   </nut-audio>
 </template>
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup>
+import { ref } from 'vue';
 import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue';
-export default {
-  components: {
-    PlayDoubleBack,
-    PlayDoubleForward,
-    PlayStart,
-    PlayStop
-  },
-  setup() {
-    const data = reactive({
-      muted: false,
-      autoplay: false
-    });
-    const playing = ref(false);
-
-    const fastBack = () => {
-      console.log('倒退');
-    };
-
-    const forward = (progress: number) => {
-      console.log('快进', '当前时间' + progress);
-    };
-
-    const changeStatus = (status: boolean) => {
-      console.log('当前播放状态', status);
-      playing.value = status;
-    };
-
-    const ended = () => {
-      console.log('播放结束');
-    };
-
-    const changeProgress = (val: number) => {
-      console.log('改变进度条', val);
-    };
-
-    return {
-      ...toRefs(data),
-      playing,
-      fastBack,
-      forward,
-      changeStatus,
-      audioDemo,
-      ended,
-      duration,
-      changeProgress
-    };
-  }
+const playing = ref(false);
+const fastBack = () => {
+  console.log('倒退');
+};
+const forward = (progress) => {
+  console.log('快进', '当前时间' + progress);
+};
+const changeStatus = (status) => {
+  console.log('当前播放状态', status);
+  playing.value = status;
+};
+const ended = () => {
+  console.log('播放结束');
+};
+const changeProgress = (val) => {
+  console.log('改变进度条', val);
 };
 </script>
 ```
diff --git a/src/packages/__VUE/backtop/doc.en-US.md b/src/packages/__VUE/backtop/doc.en-US.md
index 35305edfc7..48f083fff7 100644
--- a/src/packages/__VUE/backtop/doc.en-US.md
+++ b/src/packages/__VUE/backtop/doc.en-US.md
@@ -6,7 +6,7 @@ Provides a quick return to the top function for long pages.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Backtop } from '@nutui/nutui';
 
@@ -18,66 +18,23 @@ app.use(Backtop);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo" id="elId">
-    <div class="text-data">test data1</div>
-    <div class="text-data">test data2</div>
-    <div class="text-data">test data3</div>
-    <div class="text-data">test data4</div>
-    <div class="text-data">test data5</div>
-    <div class="text-data">test data6</div>
-    <div class="text-data">test data7</div>
-    <div class="text-data">test data8</div>
-    <div class="text-data">test data9</div>
-    <div class="text-data">test data10</div>
-    <div class="text-data">test data11</div>
-    <div class="text-data">test data12</div>
-    <div class="text-data">test data13</div>
-    <div class="text-data">test data14</div>
-    <div class="text-data">test data15</div>
-    <div class="text-data">test data16</div>
-    <div class="text-data">test data17</div>
-    <div class="text-data">test data18</div>
-    <div class="text-data">test data19</div>
-    <div class="text-data">test data20</div>
-    <div class="text-data">test data21</div>
-    <div class="text-data">test data22</div>
-    <div class="text-data">test data23</div>
-    <div class="text-data">test data24</div>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
     <nut-backtop @click="handleClick"></nut-backtop>
   </div>
 </template>
-<script>
-  export default {
-    setup() {
-      const handleClick = () => {
-        console.log('backtop');
-      };
-
-      return {
-        handleClick
-      };
-    }
-  };
+<script setup>
+const handleClick = () => {
+  console.log('back to top');
+};
 </script>
 <style>
-  .text-data {
-    margin: 0 auto;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    line-height: 19px;
-    font-size: 13px;
-    color: rgba(102, 102, 102, 1);
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
@@ -87,54 +44,19 @@ app.use(Backtop);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo" id="elId">
-    <div class="text-data">test data1</div>
-    <div class="text-data">test data2</div>
-    <div class="text-data">test data3</div>
-    <div class="text-data">test data4</div>
-    <div class="text-data">test data5</div>
-    <div class="text-data">test data6</div>
-    <div class="text-data">test data7</div>
-    <div class="text-data">test data8</div>
-    <div class="text-data">test data9</div>
-    <div class="text-data">test data10</div>
-    <div class="text-data">test data11</div>
-    <div class="text-data">test data12</div>
-    <div class="text-data">test data13</div>
-    <div class="text-data">test data14</div>
-    <div class="text-data">test data15</div>
-    <div class="text-data">test data16</div>
-    <div class="text-data">test data17</div>
-    <div class="text-data">test data18</div>
-    <div class="text-data">test data19</div>
-    <div class="text-data">test data20</div>
-    <div class="text-data">test data21</div>
-    <div class="text-data">test data22</div>
-    <div class="text-data">test data23</div>
-    <div class="text-data">test data24</div>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
     <nut-backtop :distance="200"></nut-backtop>
   </div>
 </template>
 
 <style>
-  .text-data {
-    margin: 0 auto;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    line-height: 19px;
-    font-size: 13px;
-    color: rgba(102, 102, 102, 1);
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
@@ -144,54 +66,19 @@ app.use(Backtop);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo" id="elId">
-    <div class="text-data">test data1</div>
-    <div class="text-data">test data2</div>
-    <div class="text-data">test data3</div>
-    <div class="text-data">test data4</div>
-    <div class="text-data">test data5</div>
-    <div class="text-data">test data6</div>
-    <div class="text-data">test data7</div>
-    <div class="text-data">test data8</div>
-    <div class="text-data">test data9</div>
-    <div class="text-data">test data10</div>
-    <div class="text-data">test data11</div>
-    <div class="text-data">test data12</div>
-    <div class="text-data">test data13</div>
-    <div class="text-data">test data14</div>
-    <div class="text-data">test data15</div>
-    <div class="text-data">test data16</div>
-    <div class="text-data">test data17</div>
-    <div class="text-data">test data18</div>
-    <div class="text-data">test data19</div>
-    <div class="text-data">test data20</div>
-    <div class="text-data">test data21</div>
-    <div class="text-data">test data22</div>
-    <div class="text-data">test data23</div>
-    <div class="text-data">test data24</div>
-    <nut-backtop @click="handleClick" :distance="100" :bottom="90"><div>无</div></nut-backtop>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
+    <nut-backtop :distance="100" :bottom="90"><div>无</div></nut-backtop>
   </div>
 </template>
 
 <style>
-  .text-data {
-    margin: 0 auto;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    line-height: 19px;
-    font-size: 13px;
-    color: rgba(102, 102, 102, 1);
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/backtop/doc.md b/src/packages/__VUE/backtop/doc.md
index 3061ac4ca7..0e8d513ad0 100644
--- a/src/packages/__VUE/backtop/doc.md
+++ b/src/packages/__VUE/backtop/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Backtop } from '@nutui/nutui';
 
@@ -18,66 +18,23 @@ app.use(Backtop);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo" id="elId">
-    <div class="text-data">我是测试数据1</div>
-    <div class="text-data">我是测试数据2</div>
-    <div class="text-data">我是测试数据3</div>
-    <div class="text-data">我是测试数据4</div>
-    <div class="text-data">我是测试数据5</div>
-    <div class="text-data">我是测试数据6</div>
-    <div class="text-data">我是测试数据7</div>
-    <div class="text-data">我是测试数据8</div>
-    <div class="text-data">我是测试数据9</div>
-    <div class="text-data">我是测试数据10</div>
-    <div class="text-data">我是测试数据11</div>
-    <div class="text-data">我是测试数据12</div>
-    <div class="text-data">我是测试数据13</div>
-    <div class="text-data">我是测试数据14</div>
-    <div class="text-data">我是测试数据15</div>
-    <div class="text-data">我是测试数据16</div>
-    <div class="text-data">我是测试数据17</div>
-    <div class="text-data">我是测试数据18</div>
-    <div class="text-data">我是测试数据19</div>
-    <div class="text-data">我是测试数据20</div>
-    <div class="text-data">我是测试数据21</div>
-    <div class="text-data">我是测试数据22</div>
-    <div class="text-data">我是测试数据23</div>
-    <div class="text-data">我是测试数据24</div>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
     <nut-backtop @click="handleClick"></nut-backtop>
   </div>
 </template>
-<script>
-  export default {
-    setup() {
-      const handleClick = () => {
-        console.log('触发返回顶部');
-      };
-
-      return {
-        handleClick
-      };
-    }
-  };
+<script setup>
+const handleClick = () => {
+  console.log('back to top');
+};
 </script>
 <style>
-  .text-data {
-    margin: 0 auto;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    line-height: 19px;
-    font-size: 13px;
-    color: rgba(102, 102, 102, 1);
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
@@ -87,54 +44,19 @@ app.use(Backtop);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo" id="elId">
-    <div class="text-data">我是测试数据1</div>
-    <div class="text-data">我是测试数据2</div>
-    <div class="text-data">我是测试数据3</div>
-    <div class="text-data">我是测试数据4</div>
-    <div class="text-data">我是测试数据5</div>
-    <div class="text-data">我是测试数据6</div>
-    <div class="text-data">我是测试数据7</div>
-    <div class="text-data">我是测试数据8</div>
-    <div class="text-data">我是测试数据9</div>
-    <div class="text-data">我是测试数据10</div>
-    <div class="text-data">我是测试数据11</div>
-    <div class="text-data">我是测试数据12</div>
-    <div class="text-data">我是测试数据13</div>
-    <div class="text-data">我是测试数据14</div>
-    <div class="text-data">我是测试数据15</div>
-    <div class="text-data">我是测试数据16</div>
-    <div class="text-data">我是测试数据17</div>
-    <div class="text-data">我是测试数据18</div>
-    <div class="text-data">我是测试数据19</div>
-    <div class="text-data">我是测试数据20</div>
-    <div class="text-data">我是测试数据21</div>
-    <div class="text-data">我是测试数据22</div>
-    <div class="text-data">我是测试数据23</div>
-    <div class="text-data">我是测试数据24</div>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
     <nut-backtop :distance="200"></nut-backtop>
   </div>
 </template>
 
 <style>
-  .text-data {
-    margin: 0 auto;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    line-height: 19px;
-    font-size: 13px;
-    color: rgba(102, 102, 102, 1);
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
@@ -144,54 +66,19 @@ app.use(Backtop);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo" id="elId">
-    <div class="text-data">我是测试数据1</div>
-    <div class="text-data">我是测试数据2</div>
-    <div class="text-data">我是测试数据3</div>
-    <div class="text-data">我是测试数据4</div>
-    <div class="text-data">我是测试数据5</div>
-    <div class="text-data">我是测试数据6</div>
-    <div class="text-data">我是测试数据7</div>
-    <div class="text-data">我是测试数据8</div>
-    <div class="text-data">我是测试数据9</div>
-    <div class="text-data">我是测试数据10</div>
-    <div class="text-data">我是测试数据11</div>
-    <div class="text-data">我是测试数据12</div>
-    <div class="text-data">我是测试数据13</div>
-    <div class="text-data">我是测试数据14</div>
-    <div class="text-data">我是测试数据15</div>
-    <div class="text-data">我是测试数据16</div>
-    <div class="text-data">我是测试数据17</div>
-    <div class="text-data">我是测试数据18</div>
-    <div class="text-data">我是测试数据19</div>
-    <div class="text-data">我是测试数据20</div>
-    <div class="text-data">我是测试数据21</div>
-    <div class="text-data">我是测试数据22</div>
-    <div class="text-data">我是测试数据23</div>
-    <div class="text-data">我是测试数据24</div>
-    <nut-backtop @click="handleClick" :distance="100" :bottom="90"><div>无</div></nut-backtop>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
+    <nut-backtop :distance="100" :bottom="90"><div>无</div></nut-backtop>
   </div>
 </template>
 
 <style>
-  .text-data {
-    margin: 0 auto;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    line-height: 19px;
-    font-size: 13px;
-    color: rgba(102, 102, 102, 1);
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/backtop/doc.taro.md b/src/packages/__VUE/backtop/doc.taro.md
index 68ae598558..c79b10dbe2 100644
--- a/src/packages/__VUE/backtop/doc.taro.md
+++ b/src/packages/__VUE/backtop/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Backtop } from '@nutui/nutui-taro';
 
@@ -18,64 +18,16 @@ app.use(Backtop);
 
 ```html
 <view class="demo">
-  <nut-backtop @click="click">
+  <nut-backtop>
     <template v-slot:content>
-      <div class="text-data">我是测试数据1</div>
-      <div class="text-data">我是测试数据2</div>
-      <div class="text-data">我是测试数据3</div>
-      <div class="text-data">我是测试数据4</div>
-      <div class="text-data">我是测试数据5</div>
-      <div class="text-data">我是测试数据6</div>
-      <div class="text-data">我是测试数据7</div>
-      <div class="text-data">我是测试数据8</div>
-      <div class="text-data">我是测试数据9</div>
-      <div class="text-data">我是测试数据10</div>
-      <div class="text-data">我是测试数据11</div>
-      <div class="text-data">我是测试数据12</div>
-      <div class="text-data">我是测试数据13</div>
-      <div class="text-data">我是测试数据14</div>
-      <div class="text-data">我是测试数据15</div>
-      <div class="text-data">我是测试数据16</div>
-      <div class="text-data">我是测试数据17</div>
-      <div class="text-data">我是测试数据18</div>
-      <div class="text-data">我是测试数据19</div>
-      <div class="text-data">我是测试数据20</div>
-      <div class="text-data">我是测试数据21</div>
-      <div class="text-data">我是测试数据22</div>
-      <div class="text-data">我是测试数据23</div>
-      <div class="text-data">我是测试数据24</div>
+      <div v-for="(item, index) in 24" class="test">{{index}}</div>
     </template>
   </nut-backtop>
 </view>
-<script>
-  export default {
-    setup() {
-      const click = () => {
-        console.log('click');
-      };
-
-      return {
-        click
-      };
-    }
-  };
-</script>
 <style>
-  .text-data {
-    margin: 0 auto;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 46px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    line-height: 19px;
-    font-size: 13px;
-    color: rgba(102, 102, 102, 1);
+  .test {
+    padding: 12px 0 12px 20px;
+    border-top: 1px solid #eee;
   }
 </style>
 ```
diff --git a/src/packages/__VUE/circleprogress/doc.en-US.md b/src/packages/__VUE/circleprogress/doc.en-US.md
index 53ff83cac0..edd0f467ae 100644
--- a/src/packages/__VUE/circleprogress/doc.en-US.md
+++ b/src/packages/__VUE/circleprogress/doc.en-US.md
@@ -92,8 +92,7 @@ const gradientColor = {
   <nut-button type="primary" @click="add">add</nut-button>
 </template>
 <script setup>
-import { reactive, ref } from 'vue';
-const percent = ref(30);
+import { ref } from 'vue';
 const percent = ref(30);
 const add = () => {
   percent.value = Math.min(100, percent.value + 10);
diff --git a/src/packages/__VUE/circleprogress/doc.md b/src/packages/__VUE/circleprogress/doc.md
index c24d14fa84..f1b5ce5d1e 100644
--- a/src/packages/__VUE/circleprogress/doc.md
+++ b/src/packages/__VUE/circleprogress/doc.md
@@ -92,8 +92,7 @@ const gradientColor = {
   <nut-button type="primary" @click="add">增加</nut-button>
 </template>
 <script setup>
-import { reactive, ref } from 'vue';
-const percent = ref(30);
+import { ref } from 'vue';
 const percent = ref(30);
 const add = () => {
   percent.value = Math.min(100, percent.value + 10);
diff --git a/src/packages/__VUE/circleprogress/doc.taro.md b/src/packages/__VUE/circleprogress/doc.taro.md
index 557e465519..66b1d13155 100644
--- a/src/packages/__VUE/circleprogress/doc.taro.md
+++ b/src/packages/__VUE/circleprogress/doc.taro.md
@@ -92,8 +92,7 @@ const gradientColor = {
   <nut-button type="primary" @click="add">增加</nut-button>
 </template>
 <script setup>
-import { reactive, ref } from 'vue';
-const percent = ref(30);
+import { ref } from 'vue';
 const percent = ref(30);
 const add = () => {
   percent.value = Math.min(100, percent.value + 10);
diff --git a/src/packages/__VUE/empty/doc.en-US.md b/src/packages/__VUE/empty/doc.en-US.md
index 0229dcf5e8..5370654c39 100644
--- a/src/packages/__VUE/empty/doc.en-US.md
+++ b/src/packages/__VUE/empty/doc.en-US.md
@@ -45,6 +45,7 @@ app.use(Empty);
   </nut-tabs>
 </template>
 <script setup>
+import { ref } from 'vue';
 const tabValue = ref(0);
 </script>
 ```
diff --git a/src/packages/__VUE/empty/doc.md b/src/packages/__VUE/empty/doc.md
index 56cf46ab31..81d7edb225 100644
--- a/src/packages/__VUE/empty/doc.md
+++ b/src/packages/__VUE/empty/doc.md
@@ -45,6 +45,7 @@ app.use(Empty);
   </nut-tabs>
 </template>
 <script setup>
+import { ref } from 'vue';
 const tabValue = ref(0);
 </script>
 ```
diff --git a/src/packages/__VUE/empty/doc.taro.md b/src/packages/__VUE/empty/doc.taro.md
index 1c3670adc4..b6ed791bf2 100644
--- a/src/packages/__VUE/empty/doc.taro.md
+++ b/src/packages/__VUE/empty/doc.taro.md
@@ -45,6 +45,7 @@ app.use(Empty);
   </nut-tabs>
 </template>
 <script setup>
+import { ref } from 'vue';
 const tabValue = ref(0);
 </script>
 ```
diff --git a/src/packages/__VUE/fixednav/doc.en-US.md b/src/packages/__VUE/fixednav/doc.en-US.md
index 266dfb3b5a..258dec8347 100644
--- a/src/packages/__VUE/fixednav/doc.en-US.md
+++ b/src/packages/__VUE/fixednav/doc.en-US.md
@@ -6,7 +6,7 @@ Hover stow experience Interaction for quick navigation
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { FixedNav } from '@nutui/nutui';
 
@@ -18,44 +18,36 @@ app.use(FixedNav);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-fixed-nav :position="{top:'70px' }" v-model:visible="visible" :nav-list="navList" />
+  <nut-fixed-nav :position="{ top: '70px' }" v-model:visible="visible" :nav-list="navList" />
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const navList = reactive([
-        {
-          id: 1,
-          text: 'Index',
-          icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
-        },
-        {
-          id: 2,
-          text: 'Category',
-          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
-        },
-        {
-          id: 3,
-          text: 'Cart',
-          num: 2,
-          icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
-        },
-        {
-          id: 4,
-          text: 'My',
-          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
-        }
-      ]);
-      return {
-        visible,
-        navList
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: 'Index',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: 'Category',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: 'Cart',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: 'My',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
 </script>
 ```
 
@@ -63,31 +55,130 @@ app.use(FixedNav);
 
 ### Left effect
 
-```html
-<nut-fixed-nav type="left" :position="{top:'140px' }" v-model:visible="visible" :nav-list="navList" />
+:::demo
+
+```vue
+<template>
+  <nut-fixed-nav type="left" :position="{ top: '140px' }" v-model:visible="visible" :nav-list="navList" />
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: 'Index',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: 'Category',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: 'Cart',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: 'My',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
+</script>
 ```
 
+:::
+
 ### Unmask background
 
-```html
-<nut-fixed-nav :overlay="false" :position="{top:'210px' }" v-model:visible="visible" :nav-list="navList" />
+:::demo
+
+```vue
+<template>
+  <nut-fixed-nav :overlay="false" :position="{ top: '210px' }" v-model:visible="visible" :nav-list="navList" />
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: 'Index',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: 'Category',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: 'Cart',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: 'My',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
+</script>
 ```
 
+:::
+
 ### Support drag and drop with drag
 
-```html
-<nut-drag direction="y" :style="{right:'0px',bottom:'240px'}">
-  <nut-fixed-nav un-active-text="drag" v-model:visible="visible" :nav-list="navList" />
-</nut-drag>
+:::demo
+
+```vue
+<template>
+  <nut-drag direction="y" :style="{ right: '0px', bottom: '240px' }">
+    <nut-fixed-nav un-active-text="drag" v-model:visible="visible" :nav-list="navList" />
+  </nut-drag>
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: 'Index',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: 'Category',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: 'Cart',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: 'My',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
+</script>
 ```
 
+:::
+
 ### Custom use
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-fixed-nav :position="{top:'280px' }" type="left" v-model:visible="myActive">
+  <nut-fixed-nav :position="{ top: '280px' }" type="left" v-model:visible="myActive">
     <template v-slot:list>
       <ul class="nut-fixed-nav__list">
         <li class="nut-fixed-nav__list-item">1</li>
@@ -103,32 +194,32 @@ app.use(FixedNav);
     </template>
   </nut-fixed-nav>
 </template>
-<script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  const myActive = ref(false);
-  const navList = reactive([
-    {
-      id: 1,
-      text: 'Index',
-      icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
-    },
-    {
-      id: 2,
-      text: 'Category',
-      icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
-    },
-    {
-      id: 3,
-      text: 'Cart',
-      num: 2,
-      icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
-    },
-    {
-      id: 4,
-      text: 'My',
-      icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
-    }
-  ]);
+<script setup>
+import { ref, reactive } from 'vue';
+const myActive = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: 'Index',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: 'Category',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: 'Cart',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: 'My',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
 </script>
 ```
 
diff --git a/src/packages/__VUE/fixednav/doc.md b/src/packages/__VUE/fixednav/doc.md
index bf51e6b7d8..3bddd459eb 100644
--- a/src/packages/__VUE/fixednav/doc.md
+++ b/src/packages/__VUE/fixednav/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { FixedNav } from '@nutui/nutui';
 
@@ -18,44 +18,36 @@ app.use(FixedNav);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-fixed-nav :position="{top:'70px' }" v-model:visible="visible" :nav-list="navList" />
+  <nut-fixed-nav :position="{ top: '70px' }" v-model:visible="visible" :nav-list="navList" />
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const navList = reactive([
-        {
-          id: 1,
-          text: '首页',
-          icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
-        },
-        {
-          id: 2,
-          text: '分类',
-          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
-        },
-        {
-          id: 3,
-          text: '购物车',
-          num: 2,
-          icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
-        },
-        {
-          id: 4,
-          text: '我的',
-          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
-        }
-      ]);
-      return {
-        visible,
-        navList
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
 </script>
 ```
 
@@ -63,31 +55,130 @@ app.use(FixedNav);
 
 ### 左侧效果
 
-```html
-<nut-fixed-nav type="left" :position="{top:'140px' }" v-model:visible="visible" :nav-list="navList" />
+:::demo
+
+```vue
+<template>
+  <nut-fixed-nav type="left" :position="{ top: '140px' }" v-model:visible="visible" :nav-list="navList" />
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
+</script>
 ```
 
+:::
+
 ### 取消背景遮罩
 
-```html
-<nut-fixed-nav :overlay="false" :position="{top:'210px' }" v-model:visible="visible" :nav-list="navList" />
+:::demo
+
+```vue
+<template>
+  <nut-fixed-nav :overlay="false" :position="{ top: '210px' }" v-model:visible="visible" :nav-list="navList" />
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
+</script>
 ```
 
-### 配合 Drag 支持拖拽 , 小程序暂不支持
+:::
+
+### 配合 Drag 支持拖拽
+
+:::demo
 
-```html
-<nut-drag direction="y" :style="{right:'0px',bottom:'240px'}">
-  <nut-fixed-nav un-active-text="支持拖拽" v-model:visible="visible" :nav-list="navList" />
-</nut-drag>
+```vue
+<template>
+  <nut-drag direction="y" :style="{ right: '0px', bottom: '240px' }">
+    <nut-fixed-nav un-active-text="支持拖拽" v-model:visible="visible" :nav-list="navList" />
+  </nut-drag>
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
+</script>
 ```
 
+:::
+
 ### 自定义使用
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-fixed-nav :position="{top:'280px' }" type="left" v-model:visible="myActive">
+  <nut-fixed-nav :position="{ top: '280px' }" type="left" v-model:visible="myActive">
     <template v-slot:list>
       <ul class="nut-fixed-nav__list">
         <li class="nut-fixed-nav__list-item">1</li>
@@ -103,33 +194,33 @@ app.use(FixedNav);
     </template>
   </nut-fixed-nav>
 </template>
-<script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import { Retweet } from '@nutui/icons-vue';
-  const myActive = ref(false);
-  const navList = reactive([
-    {
-      id: 1,
-      text: '首页',
-      icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
-    },
-    {
-      id: 2,
-      text: '分类',
-      icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
-    },
-    {
-      id: 3,
-      text: '购物车',
-      num: 2,
-      icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
-    },
-    {
-      id: 4,
-      text: '我的',
-      icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
-    }
-  ]);
+<script setup>
+import { ref, reactive } from 'vue';
+import { Retweet } from '@nutui/icons-vue';
+const myActive = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
 </script>
 ```
 
diff --git a/src/packages/__VUE/fixednav/doc.taro.md b/src/packages/__VUE/fixednav/doc.taro.md
index 32ad6884dc..e2ecf919c5 100644
--- a/src/packages/__VUE/fixednav/doc.taro.md
+++ b/src/packages/__VUE/fixednav/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { FixedNav } from '@nutui/nutui-taro';
 
@@ -18,44 +18,36 @@ app.use(FixedNav);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-fixed-nav :position="{top:'70px' }" v-model:visible="visible" :nav-list="navList" />
+  <nut-fixed-nav :position="{ top: '70px' }" v-model:visible="visible" :nav-list="navList" />
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const navList = reactive([
-        {
-          id: 1,
-          text: '首页',
-          icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
-        },
-        {
-          id: 2,
-          text: '分类',
-          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
-        },
-        {
-          id: 3,
-          text: '购物车',
-          num: 2,
-          icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
-        },
-        {
-          id: 4,
-          text: '我的',
-          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
-        }
-      ]);
-      return {
-        visible,
-        navList
-      };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
 </script>
 ```
 
@@ -63,31 +55,89 @@ app.use(FixedNav);
 
 ### 左侧效果
 
-```html
-<nut-fixed-nav type="left" :position="{top:'140px' }" v-model:visible="visible" :nav-list="navList" />
+:::demo
+
+```vue
+<template>
+  <nut-fixed-nav type="left" :position="{ top: '140px' }" v-model:visible="visible" :nav-list="navList" />
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
+</script>
 ```
 
-### 取消背景遮罩
+:::
 
-```html
-<nut-fixed-nav :overlay="false" :position="{top:'210px' }" v-model:visible="visible" :nav-list="navList" />
-```
+### 取消背景遮罩
 
-### 配合 Drag 支持拖拽 , 小程序暂不支持
+:::demo
 
-```html
-<nut-drag direction="y" :style="{right:'0px',bottom:'240px'}">
-  <nut-fixed-nav un-active-text="支持拖拽" v-model:visible="visible" :nav-list="navList" />
-</nut-drag>
+```vue
+<template>
+  <nut-fixed-nav :overlay="false" :position="{ top: '210px' }" v-model:visible="visible" :nav-list="navList" />
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+const visible = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
+</script>
 ```
 
+:::
+
 ### 自定义使用
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-fixed-nav :position="{top:'280px' }" type="left" v-model:visible="myActive">
+  <nut-fixed-nav :position="{ top: '280px' }" type="left" v-model:visible="myActive">
     <template v-slot:list>
       <ul class="nut-fixed-nav__list">
         <li class="nut-fixed-nav__list-item">1</li>
@@ -103,37 +153,33 @@ app.use(FixedNav);
     </template>
   </nut-fixed-nav>
 </template>
-<script lang="ts">
-  import { ref, reactive } from 'vue';
-  import { Retweet } from '@nutui/icons-vue-taro';
-  const myActive = ref(false);
-  const navList = reactive([
-    {
-      id: 1,
-      text: '首页',
-      icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
-    },
-    {
-      id: 2,
-      text: '分类',
-      icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
-    },
-    {
-      id: 3,
-      text: '购物车',
-      num: 2,
-      icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
-    },
-    {
-      id: 4,
-      text: '我的',
-      icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
-    }
-  ]);
-  return {
-    myActive,
-    navList
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+import { Retweet } from '@nutui/icons-vue-taro';
+const myActive = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
 </script>
 ```
 
diff --git a/src/packages/__VUE/form/doc.en-US.md b/src/packages/__VUE/form/doc.en-US.md
index d504387139..b0a0db7032 100644
--- a/src/packages/__VUE/form/doc.en-US.md
+++ b/src/packages/__VUE/form/doc.en-US.md
@@ -65,70 +65,82 @@ app.use(FormItem);
 <template>
   <nut-form :model-value="dynamicForm.state" ref="dynamicRefForm">
     <nut-form-item label="Name" prop="name" required :rules="[{ required: true, message: 'Please enter your name' }]">
-      <nut-input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="Please enter your name" type="text" />
+      <nut-input
+        class="nut-input-text"
+        v-model="dynamicForm.state.name"
+        placeholder="Please enter your name"
+        type="text"
+      />
     </nut-form-item>
-    <nut-form-item :label="'Tel'+index" :prop="'tels.' + index + '.value'" required
-      :rules="[{ required: true, message: 'Please enter tel'+index }]" :key="item.key"
-      v-for="(item,index) in dynamicForm.state.tels">
+    <nut-form-item
+      :label="'Tel'+index"
+      :prop="'tels.' + index + '.value'"
+      required
+      :rules="[{ required: true, message: 'Please enter tel'+index }]"
+      :key="item.key"
+      v-for="(item,index) in dynamicForm.state.tels"
+    >
       <nut-input class="nut-input-text" v-model="item.value" :placeholder="'Please enter tel'+index" type="text" />
     </nut-form-item>
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">Add</nut-button>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.remove">Remove</nut-button>
-      <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit">Submit</nut-button>
+      <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit"
+        >Submit</nut-button
+      >
       <nut-button size="small" @click="dynamicForm.methods.reset">Reset prompt status</nut-button>
     </nut-cell>
   </nut-form>
 </template>
 <script lang="ts">
-import { ref,reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/toast/style';
-export default {
-  setup(){
-    const dynamicRefForm = ref<any>(null);
-    const dynamicForm = {
-      state: reactive({
-        name: '',
-        tels: new Array({
-          key: 1,
-          value: ''
-        })
-      }),
-
-      methods: {
-        submit() {
-          dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
-            if (valid) {
-              console.log('success', dynamicForm);
-            } else {
-              showToast.warn(errors[0].message);
-              console.log('error submit!!', errors);
-            }
-          });
-        },
-        reset() {
-          dynamicRefForm.value.reset();
-        },
-        remove() {
-          dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
-        },
-        add() {
-          let newIndex = dynamicForm.state.tels.length;
-          dynamicForm.state.tels.push({
-            key: Date.now(),
+  import { ref, reactive } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
+  export default {
+    setup() {
+      const dynamicRefForm = ref<any>(null);
+      const dynamicForm = {
+        state: reactive({
+          name: '',
+          tels: new Array({
+            key: 1,
             value: ''
-          });
+          })
+        }),
+
+        methods: {
+          submit() {
+            dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
+              if (valid) {
+                console.log('success', dynamicForm);
+              } else {
+                showToast.warn(errors[0].message);
+                console.log('error submit!!', errors);
+              }
+            });
+          },
+          reset() {
+            dynamicRefForm.value.reset();
+          },
+          remove() {
+            dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
+          },
+          add() {
+            let newIndex = dynamicForm.state.tels.length;
+            dynamicForm.state.tels.push({
+              key: Date.now(),
+              value: ''
+            });
+          }
         }
-      }
-    };
-    return {
-      dynamicForm,
-      dynamicRefForm
-    };
-  }
-}
-</>
+      };
+      return {
+        dynamicForm,
+        dynamicRefForm
+      };
+    }
+  };
+</script>
 ```
 
 :::
diff --git a/src/packages/__VUE/form/doc.md b/src/packages/__VUE/form/doc.md
index 24a37e9847..34dc93aa09 100644
--- a/src/packages/__VUE/form/doc.md
+++ b/src/packages/__VUE/form/doc.md
@@ -67,68 +67,75 @@ app.use(FormItem);
     <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
       <nut-input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
     </nut-form-item>
-    <nut-form-item :label="'联系方式'+index" :prop="'tels.' + index + '.value'" required
-      :rules="[{ required: true, message: '请填写联系方式'+index }]" :key="item.key"
-      v-for="(item,index) in dynamicForm.state.tels">
+    <nut-form-item
+      :label="'联系方式'+index"
+      :prop="'tels.' + index + '.value'"
+      required
+      :rules="[{ required: true, message: '请填写联系方式'+index }]"
+      :key="item.key"
+      v-for="(item,index) in dynamicForm.state.tels"
+    >
       <nut-input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式'+index" type="text" />
     </nut-form-item>
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.remove">删除</nut-button>
-      <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit">提交</nut-button>
+      <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit"
+        >提交</nut-button
+      >
       <nut-button size="small" @click="dynamicForm.methods.reset">重置提示状态</nut-button>
     </nut-cell>
   </nut-form>
 </template>
 <script lang="ts">
-import { ref,reactive } from 'vue';
-import { showToast } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/toast/style';
-export default {
-  setup(){
-    const dynamicRefForm = ref<any>(null);
-    const dynamicForm = {
-      state: reactive({
-        name: '',
-        tels: new Array({
-          key: 1,
-          value: ''
-        })
-      }),
-
-      methods: {
-        submit() {
-          dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
-            if (valid) {
-              console.log('success', dynamicForm);
-            } else {
-              showToast.warn(errors[0].message);
-              console.log('error submit!!', errors);
-            }
-          });
-        },
-        reset() {
-          dynamicRefForm.value.reset();
-        },
-        remove() {
-          dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
-        },
-        add() {
-          let newIndex = dynamicForm.state.tels.length;
-          dynamicForm.state.tels.push({
-            key: Date.now(),
+  import { ref, reactive } from 'vue';
+  import { showToast } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/toast/style';
+  export default {
+    setup() {
+      const dynamicRefForm = ref<any>(null);
+      const dynamicForm = {
+        state: reactive({
+          name: '',
+          tels: new Array({
+            key: 1,
             value: ''
-          });
+          })
+        }),
+
+        methods: {
+          submit() {
+            dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
+              if (valid) {
+                console.log('success', dynamicForm);
+              } else {
+                showToast.warn(errors[0].message);
+                console.log('error submit!!', errors);
+              }
+            });
+          },
+          reset() {
+            dynamicRefForm.value.reset();
+          },
+          remove() {
+            dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
+          },
+          add() {
+            let newIndex = dynamicForm.state.tels.length;
+            dynamicForm.state.tels.push({
+              key: Date.now(),
+              value: ''
+            });
+          }
         }
-      }
-    };
-    return {
-      dynamicForm,
-      dynamicRefForm
-    };
-  }
-}
-</>
+      };
+      return {
+        dynamicForm,
+        dynamicRefForm
+      };
+    }
+  };
+</script>
 ```
 
 :::
@@ -281,8 +288,19 @@ export default {
           }, 1000);
         });
       };
-      return { ruleForm, formData, validate, customValidator, customRulePropValidator, nameLengthValidator, asyncValidator, customBlurValidate, submit, reset };
-    };
+      return {
+        ruleForm,
+        formData,
+        validate,
+        customValidator,
+        customRulePropValidator,
+        nameLengthValidator,
+        asyncValidator,
+        customBlurValidate,
+        submit,
+        reset
+      };
+    }
   };
 </script>
 ```
diff --git a/src/packages/__VUE/form/doc.taro.md b/src/packages/__VUE/form/doc.taro.md
index e678c0c220..fe2c1ed88c 100644
--- a/src/packages/__VUE/form/doc.taro.md
+++ b/src/packages/__VUE/form/doc.taro.md
@@ -67,66 +67,73 @@ app.use(FormItem);
     <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
       <nut-input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
     </nut-form-item>
-    <nut-form-item :label="'联系方式'+index" :prop="'tels.' + index + '.value'" required
-      :rules="[{ required: true, message: '请填写联系方式'+index }]" :key="item.key"
-      v-for="(item,index) in dynamicForm.state.tels">
+    <nut-form-item
+      :label="'联系方式'+index"
+      :prop="'tels.' + index + '.value'"
+      required
+      :rules="[{ required: true, message: '请填写联系方式'+index }]"
+      :key="item.key"
+      v-for="(item,index) in dynamicForm.state.tels"
+    >
       <nut-input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式'+index" type="text" />
     </nut-form-item>
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.remove">删除</nut-button>
-      <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit">提交</nut-button>
+      <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit"
+        >提交</nut-button
+      >
       <nut-button size="small" @click="dynamicForm.methods.reset">重置提示状态</nut-button>
     </nut-cell>
   </nut-form>
 </template>
 <script lang="ts">
-import { ref,reactive } from 'vue';
-export default {
-  setup(){
-    const dynamicRefForm = ref<any>(null);
-    const dynamicForm = {
-      state: reactive({
-        name: '',
-        tels: new Array({
-          key: 1,
-          value: ''
-        })
-      }),
-
-      methods: {
-        submit() {
-          dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
-            if (valid) {
-              console.log('success', dynamicForm);
-            } else {
-              console.log(errors[0].message);
-              console.log('error submit!!', errors);
-            }
-          });
-        },
-        reset() {
-          dynamicRefForm.value.reset();
-        },
-        remove() {
-          dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
-        },
-        add() {
-          let newIndex = dynamicForm.state.tels.length;
-          dynamicForm.state.tels.push({
-            key: Date.now(),
+  import { ref, reactive } from 'vue';
+  export default {
+    setup() {
+      const dynamicRefForm = ref<any>(null);
+      const dynamicForm = {
+        state: reactive({
+          name: '',
+          tels: new Array({
+            key: 1,
             value: ''
-          });
+          })
+        }),
+
+        methods: {
+          submit() {
+            dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
+              if (valid) {
+                console.log('success', dynamicForm);
+              } else {
+                console.log(errors[0].message);
+                console.log('error submit!!', errors);
+              }
+            });
+          },
+          reset() {
+            dynamicRefForm.value.reset();
+          },
+          remove() {
+            dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
+          },
+          add() {
+            let newIndex = dynamicForm.state.tels.length;
+            dynamicForm.state.tels.push({
+              key: Date.now(),
+              value: ''
+            });
+          }
         }
-      }
-    };
-    return {
-      dynamicForm,
-      dynamicRefForm
-    };
-  }
-}
-</>
+      };
+      return {
+        dynamicForm,
+        dynamicRefForm
+      };
+    }
+  };
+</script>
 ```
 
 :::
@@ -277,8 +284,19 @@ export default {
           }, 1000);
         });
       };
-      return { ruleForm, formData, validate, customValidator, customRulePropValidator, nameLengthValidator, asyncValidator, customBlurValidate, submit, reset };
-    };
+      return {
+        ruleForm,
+        formData,
+        validate,
+        customValidator,
+        customRulePropValidator,
+        nameLengthValidator,
+        asyncValidator,
+        customBlurValidate,
+        submit,
+        reset
+      };
+    }
   };
 </script>
 ```
diff --git a/src/packages/__VUE/infiniteloading/doc.en-US.md b/src/packages/__VUE/infiniteloading/doc.en-US.md
index d39e18698a..ebce44c7d3 100644
--- a/src/packages/__VUE/infiniteloading/doc.en-US.md
+++ b/src/packages/__VUE/infiniteloading/doc.en-US.md
@@ -6,7 +6,7 @@ Scrolling to the bottom of the list automatically loads more data.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { InfiniteLoading } from '@nutui/nutui';
 
@@ -18,88 +18,35 @@ app.use(InfiniteLoading);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-tabs v-model="tabsValue" animatedTime="0">
-    <nut-tab-pane title="Basic Usage">
-      <ul class="infiniteUl">
-        <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
-          <div class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</div>
-        </nut-infinite-loading>
-      </ul>
-    </nut-tab-pane>
-  </nut-tabs>
+  <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
+    <div class="test" v-for="(item, index) in sum" :key="index">{{ index }}</div>
+  </nut-infinite-loading>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      let cycle = 0;
-      const tabsValue = ref(0);
-      const infinityValue = ref(false);
-      const hasMore = ref(true);
-      const letter = [
-        'A',
-        'B',
-        'C',
-        'D',
-        'E',
-        'F',
-        'G',
-        'H',
-        'IJ',
-        'K',
-        'L',
-        'M',
-        'N',
-        'O',
-        'P',
-        'Q',
-        'R',
-        'S',
-        'T',
-        'U',
-        'V',
-        'W',
-        'X',
-        'Y',
-        'Z'
-      ];
-      const defultList = ref(letter);
-      const loadMore = (done) => {
-        setTimeout(() => {
-          defultList.value = defultList.value.concat(letter);
-          cycle++;
-          if (cycle > 2) hasMore.value = false;
-          infinityValue.value = false;
-        }, 1000);
-      };
-
-      return { tabsValue, loadMore, hasMore, defultList, infinityValue };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const cycle = ref(0);
+const tabsValue = ref(0);
+const sum = ref(24);
+const infinityValue = ref(false);
+const hasMore = ref(true);
+const loadMore = (done) => {
+  setTimeout(() => {
+    sum.value = sum.value + 24;
+    cycle.value++;
+    if (cycle.value > 2) hasMore.value = false;
+    infinityValue.value = false;
+  }, 1000);
+};
 </script>
 
 <style>
-  .nut-tab-pane {
-    padding: 0 !important;
-    padding-left: 16px !important;
-  }
-  .infiniteUl {
-    width: 100%;
-    height: calc(100vh - 120px);
-    padding: 0;
-    margin: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .infiniteLi {
-    font-size: 14px;
-    color: #333;
-    padding: 12px 0;
-    border-bottom: 1px solid #eee;
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
@@ -109,94 +56,88 @@ app.use(InfiniteLoading);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-tabs v-model="tabsValue" animatedTime="0">
-    <nut-tab-pane title="Custom loading copywriting">
-      <ul class="infiniteUl">
-        <nut-infinite-loading
-          v-model="infinityValue"
-          load-txt="Loading..."
-          load-more-txt="No more ~"
-          :has-more="hasMore"
-          @load-more="loadMore"
-        >
-          <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
-        </nut-infinite-loading>
-      </ul>
-    </nut-tab-pane>
-  </nut-tabs>
+  <nut-infinite-loading
+    v-model="infinityValue"
+    load-txt="Loading..."
+    load-more-txt="End~"
+    :has-more="hasMore"
+    @load-more="loadMore"
+  >
+    <div class="test" v-for="(item, index) in sum" :key="index">{{ index }}</div>
+  </nut-infinite-loading>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      let cycle = 0;
-      const tabsValue = ref(0);
-      const infinityValue = ref(false);
-      const hasMore = ref(true);
-      const letter = [
-        'A',
-        'B',
-        'C',
-        'D',
-        'E',
-        'F',
-        'G',
-        'H',
-        'IJ',
-        'K',
-        'L',
-        'M',
-        'N',
-        'O',
-        'P',
-        'Q',
-        'R',
-        'S',
-        'T',
-        'U',
-        'V',
-        'W',
-        'X',
-        'Y',
-        'Z'
-      ];
-      const defultList = ref(letter);
-      const loadMore = (done) => {
-        setTimeout(() => {
-          defultList.value = defultList.value.concat(letter);
-          cycle++;
-          if (cycle > 2) hasMore.value = false;
-          infinityValue.value = false;
-        }, 1000);
-      };
-
-      return { tabsValue, loadMore, hasMore, defultList, infinityValue };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const cycle = ref(0);
+const tabsValue = ref(0);
+const sum = ref(24);
+const infinityValue = ref(false);
+const hasMore = ref(true);
+const loadMore = (done) => {
+  setTimeout(() => {
+    sum.value = sum.value + 24;
+    cycle.value++;
+    if (cycle.value > 2) hasMore.value = false;
+    infinityValue.value = false;
+  }, 1000);
+};
 </script>
 
 <style>
-  .nut-tab-pane {
-    padding: 0 !important;
-    padding-left: 16px !important;
-  }
-  .infiniteUl {
-    width: 100%;
-    height: calc(100vh - 120px);
-    padding: 0;
-    margin: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .infiniteLi {
-    font-size: 14px;
-    color: #333;
-    padding: 12px 0;
-    border-bottom: 1px solid #eee;
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
+</style>
+```
+
+:::
+
+### Use with PullRefresh
+
+:::demo
+
+```vue
+<template>
+  <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
+    <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
+      <div class="test" v-for="(item, index) in sum" :key="index">{{ index }}</div>
+    </nut-pull-refresh>
+  </nut-infinite-loading>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const cycle = ref(0);
+const tabsValue = ref(0);
+const sum = ref(24);
+const infinityValue = ref(false);
+const hasMore = ref(true);
+const loadMore = (done) => {
+  setTimeout(() => {
+    sum.value = sum.value + 24;
+    cycle.value++;
+    if (cycle.value > 2) hasMore.value = false;
+    infinityValue.value = false;
+  }, 1000);
+};
+const refresh = ref(false);
+const refreshFun = () => {
+  setTimeout(() => {
+    refresh.value = false;
+    sum.value = 24;
+  }, 3000);
+};
+</script>
+
+<style>
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/infiniteloading/doc.md b/src/packages/__VUE/infiniteloading/doc.md
index f495e597f9..1cfe754a50 100644
--- a/src/packages/__VUE/infiniteloading/doc.md
+++ b/src/packages/__VUE/infiniteloading/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { InfiniteLoading } from '@nutui/nutui';
 
@@ -18,88 +18,35 @@ app.use(InfiniteLoading);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-tabs v-model="tabsValue" animatedTime="0">
-    <nut-tab-pane title="基础用法">
-      <ul class="infiniteUl">
-        <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
-          <div class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</div>
-        </nut-infinite-loading>
-      </ul>
-    </nut-tab-pane>
-  </nut-tabs>
+  <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
+    <div class="test" v-for="(item, index) in sum" :key="index">{{ index }}</div>
+  </nut-infinite-loading>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      let cycle = 0;
-      const tabsValue = ref(0);
-      const infinityValue = ref(false);
-      const hasMore = ref(true);
-      const letter = [
-        'A',
-        'B',
-        'C',
-        'D',
-        'E',
-        'F',
-        'G',
-        'H',
-        'IJ',
-        'K',
-        'L',
-        'M',
-        'N',
-        'O',
-        'P',
-        'Q',
-        'R',
-        'S',
-        'T',
-        'U',
-        'V',
-        'W',
-        'X',
-        'Y',
-        'Z'
-      ];
-      const defultList = ref(letter);
-      const loadMore = (done) => {
-        setTimeout(() => {
-          defultList.value = defultList.value.concat(letter);
-          cycle++;
-          if (cycle > 2) hasMore.value = false;
-          infinityValue.value = false;
-        }, 1000);
-      };
-
-      return { tabsValue, loadMore, hasMore, defultList, infinityValue };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const cycle = ref(0);
+const tabsValue = ref(0);
+const sum = ref(24);
+const infinityValue = ref(false);
+const hasMore = ref(true);
+const loadMore = (done) => {
+  setTimeout(() => {
+    sum.value = sum.value + 24;
+    cycle.value++;
+    if (cycle.value > 2) hasMore.value = false;
+    infinityValue.value = false;
+  }, 1000);
+};
 </script>
 
 <style>
-  .nut-tab-pane {
-    padding: 0 !important;
-    padding-left: 16px !important;
-  }
-  .infiniteUl {
-    width: 100%;
-    height: calc(100vh - 120px);
-    padding: 0;
-    margin: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .infiniteLi {
-    font-size: 14px;
-    color: #333;
-    padding: 12px 0;
-    border-bottom: 1px solid #eee;
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
@@ -109,94 +56,88 @@ app.use(InfiniteLoading);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-tabs v-model="tabsValue" animatedTime="0">
-    <nut-tab-pane title="自定义加载文案">
-      <ul class="infiniteUl">
-        <nut-infinite-loading
-          v-model="infinityValue"
-          load-txt="Loading..."
-          load-more-txt="没有啦~"
-          :has-more="hasMore"
-          @load-more="loadMore"
-        >
-          <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
-        </nut-infinite-loading>
-      </ul>
-    </nut-tab-pane>
-  </nut-tabs>
+  <nut-infinite-loading
+    v-model="infinityValue"
+    load-txt="Loading..."
+    load-more-txt="End~"
+    :has-more="hasMore"
+    @load-more="loadMore"
+  >
+    <div class="test" v-for="(item, index) in sum" :key="index">{{ index }}</div>
+  </nut-infinite-loading>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      let cycle = 0;
-      const tabsValue = ref(0);
-      const infinityValue = ref(false);
-      const hasMore = ref(true);
-      const letter = [
-        'A',
-        'B',
-        'C',
-        'D',
-        'E',
-        'F',
-        'G',
-        'H',
-        'IJ',
-        'K',
-        'L',
-        'M',
-        'N',
-        'O',
-        'P',
-        'Q',
-        'R',
-        'S',
-        'T',
-        'U',
-        'V',
-        'W',
-        'X',
-        'Y',
-        'Z'
-      ];
-      const defultList = ref(letter);
-      const loadMore = (done) => {
-        setTimeout(() => {
-          defultList.value = defultList.value.concat(letter);
-          cycle++;
-          if (cycle > 2) hasMore.value = false;
-          infinityValue.value = false;
-        }, 1000);
-      };
-
-      return { tabsValue, loadMore, hasMore, defultList, infinityValue };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const cycle = ref(0);
+const tabsValue = ref(0);
+const sum = ref(24);
+const infinityValue = ref(false);
+const hasMore = ref(true);
+const loadMore = (done) => {
+  setTimeout(() => {
+    sum.value = sum.value + 24;
+    cycle.value++;
+    if (cycle.value > 2) hasMore.value = false;
+    infinityValue.value = false;
+  }, 1000);
+};
 </script>
 
 <style>
-  .nut-tab-pane {
-    padding: 0 !important;
-    padding-left: 16px !important;
-  }
-  .infiniteUl {
-    width: 100%;
-    height: calc(100vh - 120px);
-    padding: 0;
-    margin: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .infiniteLi {
-    font-size: 14px;
-    color: #333;
-    padding: 12px 0;
-    border-bottom: 1px solid #eee;
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
+</style>
+```
+
+:::
+
+### 搭配 PullRefresh
+
+:::demo
+
+```vue
+<template>
+  <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
+    <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
+      <div class="test" v-for="(item, index) in sum" :key="index">{{ index }}</div>
+    </nut-pull-refresh>
+  </nut-infinite-loading>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const cycle = ref(0);
+const tabsValue = ref(0);
+const sum = ref(24);
+const infinityValue = ref(false);
+const hasMore = ref(true);
+const loadMore = (done) => {
+  setTimeout(() => {
+    sum.value = sum.value + 24;
+    cycle.value++;
+    if (cycle.value > 2) hasMore.value = false;
+    infinityValue.value = false;
+  }, 1000);
+};
+const refresh = ref(false);
+const refreshFun = () => {
+  setTimeout(() => {
+    refresh.value = false;
+    sum.value = 24;
+  }, 3000);
+};
+</script>
+
+<style>
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/invoice/doc.en-US.md b/src/packages/__VUE/invoice/doc.en-US.md
index 70bd61bcef..dada251971 100644
--- a/src/packages/__VUE/invoice/doc.en-US.md
+++ b/src/packages/__VUE/invoice/doc.en-US.md
@@ -117,7 +117,6 @@ app.use(Invoice);
       };
 
       return {
-        translate,
         data,
         formValue,
         submit,
diff --git a/src/packages/__VUE/invoice/doc.md b/src/packages/__VUE/invoice/doc.md
index c73bf3f6cd..ee7e7d948e 100644
--- a/src/packages/__VUE/invoice/doc.md
+++ b/src/packages/__VUE/invoice/doc.md
@@ -116,7 +116,6 @@ app.use(Invoice);
       };
 
       return {
-        translate,
         data,
         formValue,
         submit,
diff --git a/src/packages/__VUE/invoice/doc.taro.md b/src/packages/__VUE/invoice/doc.taro.md
index 98bdfa25cc..29a24437cf 100644
--- a/src/packages/__VUE/invoice/doc.taro.md
+++ b/src/packages/__VUE/invoice/doc.taro.md
@@ -114,7 +114,6 @@ app.use(Invoice);
       };
 
       return {
-        translate,
         data,
         formValue,
         submit,
diff --git a/src/packages/__VUE/navbar/doc.en-US.md b/src/packages/__VUE/navbar/doc.en-US.md
index 7026e351eb..c257e8928f 100644
--- a/src/packages/__VUE/navbar/doc.en-US.md
+++ b/src/packages/__VUE/navbar/doc.en-US.md
@@ -6,7 +6,7 @@ Provide navigation function, often used at the top of the page.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Navbar } from '@nutui/nutui';
 
@@ -18,14 +18,14 @@ app.use(Navbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-navbar @on-click-back="back" @on-click-title="title" title="Order details">
     <template #left>
       <div>Back</div>
     </template>
     <template #right>
-      <ShareN width="16px"></ShareN>
+      <ShareN width="16px" />
     </template>
   </nut-navbar>
 
@@ -48,37 +48,28 @@ app.use(Navbar);
     desc="Edit"
   >
     <template #title-icon>
-      <Cart2 width="16px"></Cart2>
+      <Cart2 width="16px" />
     </template>
     <template #right>
-      <MoreX class="right" width="16px"></MoreX>
+      <MoreX class="right" width="16px" />
     </template>
   </nut-navbar>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { ShareN, Cart2, MoreX } from '@nutui/icons-vue';
-  export default {
-    components: { ShareN, Cart2, MoreX },
-    setup() {
-      const methods = {
-        back() {
-          console.log('Click Back');
-        },
-        title() {
-          console.log('Click Title');
-        },
-        rightClick() {
-          console.log('Click Right');
-        }
-      };
-
-      return {
-        ...methods
-      };
-    }
-  };
+<script setup>
+import { ShareN, Cart2, MoreX } from '@nutui/icons-vue';
+const back = () => {
+  console.log('Click Back');
+};
+const title = () => {
+  console.log('Click Title');
+};
+const rightClick = () => {
+  console.log('Click Right');
+};
+const icon = () => {
+  console.log('Click Icon');
+};
 </script>
 ```
 
@@ -88,7 +79,7 @@ app.use(Navbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" desc="Edit">
     <template #content>
@@ -104,34 +95,22 @@ app.use(Navbar);
   </nut-navbar>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { MoreX } from '@nutui/icons-vue';
-  export default {
-    components: { MoreX },
-    setup() {
-      const tab1value = ref(0);
-      const methods = {
-        back() {
-          console.log('Click Back');
-        },
-        title() {
-          console.log('Click Title');
-        },
-        rightClick() {
-          console.log('Click Right');
-        },
-        changeTab(tab: any) {
-          tab1value.value = tab.paneKey as number;
-        }
-      };
-
-      return {
-        tab1value,
-        ...methods
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { MoreX } from '@nutui/icons-vue';
+const tab1value = ref(0);
+const back = () => {
+  console.log('Click Back');
+};
+const title = () => {
+  console.log('Click Title');
+};
+const rightClick = () => {
+  console.log('Click Right');
+};
+const changeTab = (tab) => {
+  tab1value.value = tab.paneKey;
+};
 </script>
 ```
 
@@ -141,7 +120,7 @@ app.use(Navbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-navbar @on-click-back="back">
     <template #content>
@@ -158,27 +137,16 @@ app.use(Navbar);
   </nut-navbar>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { HorizontalN } from '@nutui/icons-vue';
-  export default {
-    components: { HorizontalN },
-    setup() {
-      const tab2value = ref(0);
-      const methods = {
-        back() {
-          console.log('Click Back');
-        },
-        changeTabList(tab: any) {
-          tab2value.value = tab.paneKey as number;
-        }
-      };
-      return {
-        tab2value,
-        ...methods
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { HorizontalN } from '@nutui/icons-vue';
+const tab2value = ref(0);
+const back = () => {
+  console.log('Click Back');
+};
+const changeTabList = (tab) => {
+  tab2value.value = tab.paneKey;
+};
 </script>
 ```
 
diff --git a/src/packages/__VUE/navbar/doc.md b/src/packages/__VUE/navbar/doc.md
index 56330ca6f1..856650ccc9 100644
--- a/src/packages/__VUE/navbar/doc.md
+++ b/src/packages/__VUE/navbar/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Navbar } from '@nutui/nutui';
 
@@ -18,14 +18,14 @@ app.use(Navbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-navbar @on-click-back="back" @on-click-title="title" title="订单详情">
     <template #left>
       <div>返回</div>
     </template>
     <template #right>
-      <ShareN width="16px"></ShareN>
+      <ShareN width="16px" />
     </template>
   </nut-navbar>
 
@@ -48,37 +48,28 @@ app.use(Navbar);
     desc="编辑"
   >
     <template #title-icon>
-      <Cart2 width="16px"></Cart2>
+      <Cart2 width="16px" />
     </template>
     <template #right>
-      <MoreX class="right" width="16px"></MoreX>
+      <MoreX class="right" width="16px" />
     </template>
   </nut-navbar>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { ShareN, Cart2, MoreX } from '@nutui/icons-vue';
-  export default {
-    components: { ShareN, Cart2, MoreX },
-    setup() {
-      const methods = {
-        back() {
-          console.log('Click Back');
-        },
-        title() {
-          console.log('Click Title');
-        },
-        rightClick() {
-          console.log('Click Right');
-        }
-      };
-
-      return {
-        ...methods
-      };
-    }
-  };
+<script setup>
+import { ShareN, Cart2, MoreX } from '@nutui/icons-vue';
+const back = () => {
+  console.log('Click Back');
+};
+const title = () => {
+  console.log('Click Title');
+};
+const rightClick = () => {
+  console.log('Click Right');
+};
+const icon = () => {
+  console.log('Click Icon');
+};
 </script>
 ```
 
@@ -88,7 +79,7 @@ app.use(Navbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" desc="编辑">
     <template #content>
@@ -104,34 +95,22 @@ app.use(Navbar);
   </nut-navbar>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { MoreX } from '@nutui/icons-vue';
-  export default {
-    components: { MoreX },
-    setup() {
-      const tab1value = ref(0);
-      const methods = {
-        back() {
-          console.log('Click Back');
-        },
-        title() {
-          console.log('Click Title');
-        },
-        rightClick() {
-          console.log('Click Right');
-        },
-        changeTab(tab: any) {
-          tab1value.value = tab.paneKey as number;
-        }
-      };
-
-      return {
-        tab1value,
-        ...methods
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { MoreX } from '@nutui/icons-vue';
+const tab1value = ref(0);
+const back = () => {
+  console.log('Click Back');
+};
+const title = () => {
+  console.log('Click Title');
+};
+const rightClick = () => {
+  console.log('Click Right');
+};
+const changeTab = (tab) => {
+  tab1value.value = tab.paneKey;
+};
 </script>
 ```
 
@@ -141,7 +120,7 @@ app.use(Navbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-navbar @on-click-back="back">
     <template #content>
@@ -158,27 +137,16 @@ app.use(Navbar);
   </nut-navbar>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { HorizontalN } from '@nutui/icons-vue';
-  export default {
-    components: { HorizontalN },
-    setup() {
-      const tab2value = ref(0);
-      const methods = {
-        back() {
-          console.log('Click Back');
-        },
-        changeTabList(tab: any) {
-          tab2value.value = tab.paneKey as number;
-        }
-      };
-      return {
-        tab2value,
-        ...methods
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { HorizontalN } from '@nutui/icons-vue';
+const tab2value = ref(0);
+const back = () => {
+  console.log('Click Back');
+};
+const changeTabList = (tab) => {
+  tab2value.value = tab.paneKey;
+};
 </script>
 ```
 
@@ -199,7 +167,7 @@ app.use(Navbar);
 | fixed               | 是否固定到顶部                                     | boolean          | `false` |
 | placeholder         | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | boolean          | `false` |
 | safe-area-inset-top | 是否开启顶部安全区适配                             | boolean          | `false` |
-| z-index             | 导航栏 `z-index `                                  | number ｜ string | -       |
+| z-index             | 导航栏 `z-index`                                   | number ｜ string | -       |
 
 ### Events
 
diff --git a/src/packages/__VUE/navbar/doc.taro.md b/src/packages/__VUE/navbar/doc.taro.md
index 46293a937d..da533958e8 100644
--- a/src/packages/__VUE/navbar/doc.taro.md
+++ b/src/packages/__VUE/navbar/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Navbar } from '@nutui/nutui-taro';
 
@@ -18,14 +18,14 @@ app.use(Navbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-navbar @on-click-back="back" @on-click-title="title" title="订单详情">
     <template #left>
       <div>返回</div>
     </template>
     <template #right>
-      <ShareN width="16px"></ShareN>
+      <ShareN width="16px" />
     </template>
   </nut-navbar>
 
@@ -48,37 +48,28 @@ app.use(Navbar);
     desc="编辑"
   >
     <template #title-icon>
-      <Cart2 width="16px"></Cart2>
+      <Cart2 width="16px" />
     </template>
     <template #right>
-      <MoreX class="right" width="16px"></MoreX>
+      <MoreX class="right" width="16px" />
     </template>
   </nut-navbar>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { ShareN, Cart2, MoreX } from '@nutui/icons-vue-taro';
-  export default {
-    components: { ShareN, Cart2, MoreX },
-    setup() {
-      const methods = {
-        back() {
-          console.log('Click Back');
-        },
-        title() {
-          console.log('Click Title');
-        },
-        rightClick() {
-          console.log('Click Right');
-        }
-      };
-
-      return {
-        ...methods
-      };
-    }
-  };
+<script setup>
+import { ShareN, Cart2, MoreX } from '@nutui/icons-vue-taro';
+const back = () => {
+  console.log('Click Back');
+};
+const title = () => {
+  console.log('Click Title');
+};
+const rightClick = () => {
+  console.log('Click Right');
+};
+const icon = () => {
+  console.log('Click Icon');
+};
 </script>
 ```
 
@@ -88,7 +79,7 @@ app.use(Navbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" desc="编辑">
     <template #content>
@@ -104,34 +95,22 @@ app.use(Navbar);
   </nut-navbar>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { MoreX } from '@nutui/icons-vue-taro';
-  export default {
-    components: { MoreX },
-    setup() {
-      const tab1value = ref(0);
-      const methods = {
-        back() {
-          console.log('Click Back');
-        },
-        title() {
-          console.log('Click Title');
-        },
-        rightClick() {
-          console.log('Click Right');
-        },
-        changeTab(tab: any) {
-          tab1value.value = tab.paneKey as number;
-        }
-      };
-
-      return {
-        tab1value,
-        ...methods
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { MoreX } from '@nutui/icons-vue-taro';
+const tab1value = ref(0);
+const back = () => {
+  console.log('Click Back');
+};
+const title = () => {
+  console.log('Click Title');
+};
+const rightClick = () => {
+  console.log('Click Right');
+};
+const changeTab = (tab) => {
+  tab1value.value = tab.paneKey;
+};
 </script>
 ```
 
@@ -141,7 +120,7 @@ app.use(Navbar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-navbar @on-click-back="back">
     <template #content>
@@ -158,27 +137,16 @@ app.use(Navbar);
   </nut-navbar>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  import { HorizontalN } from '@nutui/icons-vue-taro';
-  export default {
-    components: { HorizontalN },
-    setup() {
-      const tab2value = ref(0);
-      const methods = {
-        back() {
-          console.log('Click Back');
-        },
-        changeTabList(tab: any) {
-          tab2value.value = tab.paneKey as number;
-        }
-      };
-      return {
-        tab2value,
-        ...methods
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { HorizontalN } from '@nutui/icons-vue-taro';
+const tab2value = ref(0);
+const back = () => {
+  console.log('Click Back');
+};
+const changeTabList = (tab) => {
+  tab2value.value = tab.paneKey;
+};
 </script>
 ```
 
@@ -203,12 +171,12 @@ app.use(Navbar);
 
 ### Events
 
-| 事件名         | 说明                   | 回调参数    |
-| -------------- | ---------------------- | ----------- |
-| on-click-title | 点击页面标题事件       | event:Event |
-| on-click-icon  | 点击页面标题 icon 事件 | event:Event |
-| on-click-right | 点击右侧按钮事件       | event:Event |
-| on-click-back  | 点击左侧图标事件       | event:Event |
+| 事件名         | 说明                     | 回调参数    |
+| -------------- | ------------------------ | ----------- |
+| on-click-title | 点击页面标题事件         | event:Event |
+| on-click-icon  | 点击页面标题 `icon` 事件 | event:Event |
+| on-click-right | 点击右侧按钮事件         | event:Event |
+| on-click-back  | 点击左侧图标事件         | event:Event |
 
 ### Slots
 
diff --git a/src/packages/__VUE/pullrefresh/doc.en-US.md b/src/packages/__VUE/pullrefresh/doc.en-US.md
index 9e70fa1e1b..3ac0f9488d 100644
--- a/src/packages/__VUE/pullrefresh/doc.en-US.md
+++ b/src/packages/__VUE/pullrefresh/doc.en-US.md
@@ -6,7 +6,7 @@ Used to provide interactive operations for pull-down refresh.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { PullRefresh } from '@nutui/nutui';
 
@@ -20,27 +20,30 @@ The refresh event will be Emitted when pull refresh, you should set v-model to f
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
-    <div class="pull-block">Try to pull down!</div>
+    <div>Try to pull down!</div>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
   </nut-pull-refresh>
 </template>
 
-<script>
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup(props) {
-      const refresh = ref(false);
-      const refreshFun = () => {
-        setTimeout(() => {
-          refresh.value = false;
-        }, 3000);
-      };
-      return { refresh, refreshFun };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const refresh = ref(false);
+const refreshFun = () => {
+  setTimeout(() => {
+    refresh.value = false;
+  }, 3000);
+};
 </script>
+
+<style>
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
+</style>
 ```
 
 :::
@@ -51,30 +54,33 @@ The pull-down refresh has four states:`'loading' | 'loosing' | 'pulling' `，res
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-pull-refresh v-model="refresh2" loosingTxt="Relax" loadingTxt="Desperate loading..." @refresh="refreshFun">
-    <template #pullingTxt>
+  <nut-pull-refresh v-model="refresh2" loosing-txt="Relax" loading-txt="Desperate loading..." @refresh="refreshFun">
+    <template #pulling-txt>
       <div>Pull</div>
     </template>
-    <div class="pull-block">Try to pull down!</div>
+    <div>Try to pull down!</div>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
   </nut-pull-refresh>
 </template>
 
-<script>
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup(props) {
-      const refresh2 = ref(false);
-      const refreshFun = () => {
-        setTimeout(() => {
-          refresh2.value = false;
-        }, 3000);
-      };
-      return { refresh, refreshFun };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const refresh = ref(false);
+const refreshFun = () => {
+  setTimeout(() => {
+    refresh.value = false;
+  }, 3000);
+};
 </script>
+
+<style>
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
+</style>
 ```
 
 :::
@@ -85,39 +91,30 @@ The trigger conditions for PullRefresh are: The parent position of the scroll ba
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="parentpage">
     <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
-      <div class="pull-letter" v-for="item in refreshList2">
-        <div>{{item}}</div>
-      </div>
+      <div v-for="(item, index) in 24" class="test">{{ index }}</div>
     </nut-pull-refresh>
   </div>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      setup(props) {
-      const refresh = ref(false);
-      const refreshFun = () => {
-        setTimeout(() => {
-          refresh.value = false;
-        }, 3000);
-      };
-      return { refresh, refreshFun };
-    }
-    }
-  }
+<script setup>
+import { ref } from 'vue';
+const refresh = ref(false);
+const refreshFun = () => {
+  setTimeout(() => {
+    refresh.value = false;
+  }, 3000);
+};
 </script>
 
 <style>
-  .parentpage {
-    height: 600px;
-    overflow: auto;
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/pullrefresh/doc.md b/src/packages/__VUE/pullrefresh/doc.md
index 0ad0f43dec..dff67207ff 100644
--- a/src/packages/__VUE/pullrefresh/doc.md
+++ b/src/packages/__VUE/pullrefresh/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { PullRefresh } from '@nutui/nutui';
 
@@ -20,27 +20,30 @@ app.use(PullRefresh);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
-    <div class="pull-block">向下拉试试吧！</div>
+    <div>向下拉试试吧！</div>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
   </nut-pull-refresh>
 </template>
 
-<script>
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup(props) {
-      const refresh = ref(false);
-      const refreshFun = () => {
-        setTimeout(() => {
-          refresh.value = false;
-        }, 3000);
-      };
-      return { refresh, refreshFun };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const refresh = ref(false);
+const refreshFun = () => {
+  setTimeout(() => {
+    refresh.value = false;
+  }, 3000);
+};
 </script>
+
+<style>
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
+</style>
 ```
 
 :::
@@ -51,30 +54,33 @@ app.use(PullRefresh);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-pull-refresh v-model="refresh2" loosingTxt="松开吧" loadingTxt="玩命加载中..." @refresh="refreshFun">
-    <template #pullingTxt>
+  <nut-pull-refresh v-model="refresh" loosing-txt="松开吧" loading-txt="玩命加载中..." @refresh="refreshFun">
+    <template #pulling-txt>
       <div>用力拉</div>
     </template>
-    <div class="pull-block">向下拉试试吧！</div>
+    <div>向下拉试试吧！</div>
+    <div v-for="(item, index) in 24" class="test">{{ index }}</div>
   </nut-pull-refresh>
 </template>
 
-<script>
-  import { ref, reactive, onMounted, toRefs } from 'vue';
-  export default {
-    setup(props) {
-      const refresh2 = ref(false);
-      const refreshFun = () => {
-        setTimeout(() => {
-          refresh2.value = false;
-        }, 3000);
-      };
-      return { refresh, refreshFun };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const refresh = ref(false);
+const refreshFun = () => {
+  setTimeout(() => {
+    refresh.value = false;
+  }, 3000);
+};
 </script>
+
+<style>
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
+</style>
 ```
 
 :::
@@ -85,39 +91,30 @@ PullRefresh 的触发条件是：父级滚动元素的滚动条在顶部位置
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="parentpage">
     <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
-      <div class="pull-letter" v-for="item in refreshList2">
-        <div>{{item}}</div>
-      </div>
+      <div v-for="(item, index) in 24" class="test">{{ index }}</div>
     </nut-pull-refresh>
   </div>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      setup(props) {
-      const refresh = ref(false);
-      const refreshFun = () => {
-        setTimeout(() => {
-          refresh.value = false;
-        }, 3000);
-      };
-      return { refresh, refreshFun };
-    }
-    }
-  }
+<script setup>
+import { ref } from 'vue';
+const refresh = ref(false);
+const refreshFun = () => {
+  setTimeout(() => {
+    refresh.value = false;
+  }, 3000);
+};
 </script>
 
 <style>
-  .parentpage {
-    height: 600px;
-    overflow: auto;
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/rate/doc.en-US.md b/src/packages/__VUE/rate/doc.en-US.md
index 25b035c7cd..a09f0a6482 100644
--- a/src/packages/__VUE/rate/doc.en-US.md
+++ b/src/packages/__VUE/rate/doc.en-US.md
@@ -6,7 +6,7 @@ Use for quick rating actions, or to showcase reviews.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Rate } from '@nutui/nutui';
 
@@ -18,20 +18,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="state.val" />
-  </nut-cell>
+  <nut-rate v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -41,20 +34,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-     <nut-cell class="cell">
-         <nut-rate allow-half v-model="value"></nut-rate>
-     <nut-cell>
+  <nut-rate allow-half v-model="value" />
 </template>
-<script lang="ts">
+<script setup>
 import { ref } from 'vue';
-export default {
-     setup() {
-         const value = ref(3.5);
-         return { value }
-     }
-}
+const value = ref(3.5);
 </script>
 ```
 
@@ -64,22 +50,14 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate :custom-icon="HeartFill" v-model="value" />
-  </nut-cell>
+  <nut-rate :custom-icon="HeartFill" v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { HeartFill } from '@nutui/icons-vue';
-  export default {
-    components: { HeartFill },
-    setup() {
-      const value = ref(3);
-      return { value, HeartFill };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue';
+const value = ref(3);
 </script>
 ```
 
@@ -89,20 +67,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate count="10" v-model="value" />
-  </nut-cell>
+  <nut-rate count="10" v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -112,20 +83,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" active-color="#FFC800" />
-  </nut-cell>
+  <nut-rate v-model="value" active-color="#FFC800" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -135,20 +99,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate disabled v-model="value" />
-  </nut-cell>
+  <nut-rate disabled v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -158,20 +115,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" readonly />
-  </nut-cell>
+  <nut-rate v-model="value" readonly />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -181,25 +131,16 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" @change="onChange" />
-  </nut-cell>
+  <nut-rate v-model="value" @change="onChange" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(3);
-      const onChange = (val) => {
-        showToast.text(val);
-      };
-      return { value, onChange };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
+const onChange = (val) => {
+  console.log(val);
+};
 </script>
 ```
 
@@ -209,20 +150,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" size="35" />
-  </nut-cell>
+  <nut-rate v-model="value" size="35" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
diff --git a/src/packages/__VUE/rate/doc.md b/src/packages/__VUE/rate/doc.md
index 3a7837320b..8c89adda3d 100644
--- a/src/packages/__VUE/rate/doc.md
+++ b/src/packages/__VUE/rate/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Rate } from '@nutui/nutui';
 
@@ -18,20 +18,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" />
-  </nut-cell>
+  <nut-rate v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -41,20 +34,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-    <nut-cell class="cell">
-        <nut-rate allow-half v-model="value"></nut-rate>
-    <nut-cell>
+  <nut-rate allow-half v-model="value" />
 </template>
-<script lang="ts">
+<script setup>
 import { ref } from 'vue';
-export default {
-    setup() {
-        const value = ref(3.5);
-        return { value }
-    }
-}
+const value = ref(3.5);
 </script>
 ```
 
@@ -64,22 +50,14 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate :custom-icon="HeartFill" v-model="value" />
-  </nut-cell>
+  <nut-rate :custom-icon="HeartFill" v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { HeartFill } from '@nutui/icons-vue';
-  export default {
-    components: { HeartFill },
-    setup() {
-      const value = ref(3);
-      return { value, HeartFill };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue';
+const value = ref(3);
 </script>
 ```
 
@@ -89,20 +67,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate count="10" v-model="value" />
-  </nut-cell>
+  <nut-rate count="10" v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -112,20 +83,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" active-color="#FFC800" />
-  </nut-cell>
+  <nut-rate v-model="value" active-color="#FFC800" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -135,20 +99,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate disabled v-model="value" />
-  </nut-cell>
+  <nut-rate disabled v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -158,20 +115,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" readonly />
-  </nut-cell>
+  <nut-rate v-model="value" readonly />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -181,25 +131,16 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" @change="onChange" />
-  </nut-cell>
+  <nut-rate v-model="value" @change="onChange" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const value = ref(3);
-      const onChange = (val) => {
-        showToast.text(val);
-      };
-      return { value, onChange };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
+const onChange = (val) => {
+  console.log(val);
+};
 </script>
 ```
 
@@ -209,20 +150,13 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" size="35" />
-  </nut-cell>
+  <nut-rate v-model="value" size="35" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
diff --git a/src/packages/__VUE/rate/doc.taro.md b/src/packages/__VUE/rate/doc.taro.md
index a723b8b778..c6b5784f06 100644
--- a/src/packages/__VUE/rate/doc.taro.md
+++ b/src/packages/__VUE/rate/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Rate } from '@nutui/nutui-taro';
 
@@ -18,20 +18,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" />
-  </nut-cell>
+  <nut-rate v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -41,20 +34,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate allow-half v-model="value"></nut-rate>
-  </nut-cell>
+  <nut-rate allow-half v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3.5);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3.5);
 </script>
 ```
 
@@ -64,22 +50,14 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate :custom-icon="HeartFill" v-model="value" />
-  </nut-cell>
+  <nut-rate :custom-icon="HeartFill" v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { HeartFill } from '@nutui/icons-vue-taro';
-  export default {
-    components: { HeartFill },
-    setup() {
-      const value = ref(3);
-      return { value, HeartFill };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue-taro';
+const value = ref(3);
 </script>
 ```
 
@@ -89,20 +67,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate :count="6" v-model="value" />
-  </nut-cell>
+  <nut-rate count="10" v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -112,20 +83,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" active-color="#FFC800" />
-  </nut-cell>
+  <nut-rate v-model="value" active-color="#FFC800" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -135,20 +99,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate disabled v-model="value" />
-  </nut-cell>
+  <nut-rate disabled v-model="value" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -158,20 +115,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" readonly />
-  </nut-cell>
+  <nut-rate v-model="value" readonly />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -181,23 +131,16 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" @change="onChange" />
-  </nut-cell>
+  <nut-rate v-model="value" @change="onChange" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      const onChange = (val) => {
-        console.log(val);
-      };
-      return { value, onChange };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
+const onChange = (val) => {
+  console.log(val);
+};
 </script>
 ```
 
@@ -207,20 +150,13 @@ app.use(Rate);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell class="cell">
-    <nut-rate v-model="value" size="35" />
-  </nut-cell>
+  <nut-rate v-model="value" size="35" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref(3);
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref(3);
 </script>
 ```
 
@@ -234,11 +170,11 @@ app.use(Rate);
 | ------------ | --------------------------------------------------------------------------------------------------- | ---------------- | ----------- |
 | v-model      | 当前 `star` 数，可使用 `v-model` 双向绑定数据                                                       | number \| string | -           |
 | count        | `star` 总数                                                                                         | number \| string | `5`         |
-| active-color | 图标选中颜色                                                                                        | string           | `#fa200c `  |
+| active-color | 图标选中颜色                                                                                        | string           | `#fa200c`   |
 | void-color   | 图标未选中颜色                                                                                      | string           | `#ccc`      |
-| allow-half   | 是否半星                                                                                            | Boolean          | `false`     |
-| readonly     | 是否只读                                                                                            | Boolean          | `false`     |
-| disabled     | 是否禁用                                                                                            | Boolean          | `false`     |
+| allow-half   | 是否半星                                                                                            | boolean          | `false`     |
+| readonly     | 是否只读                                                                                            | boolean          | `false`     |
+| disabled     | 是否禁用                                                                                            | boolean          | `false`     |
 | spacing      | 间距                                                                                                | number \| string | `20`        |
 | size         | `Icon` 尺寸大小，如 `20px` `2em` `2rem`                                                             | number \| string | -           |
 | custom-icon  | 自定义 `Icon`, 传入 [VNode](https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode            | `StarFillN` |
diff --git a/src/packages/__VUE/signature/doc.en-US.md b/src/packages/__VUE/signature/doc.en-US.md
index 4bf9cd2feb..dd441997ac 100644
--- a/src/packages/__VUE/signature/doc.en-US.md
+++ b/src/packages/__VUE/signature/doc.en-US.md
@@ -6,7 +6,7 @@ Signature component based on canvas.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Signature } from '@nutui/nutui';
 
@@ -18,31 +18,26 @@ app.use(Signature);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-signature @confirm="confirm" @clear="clear"></nut-signature>
   <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
-<script>
-  export default {
-    props: {},
-    setup() {
-      const demoSignUrl = ref('');
-      const confirm = (canvas, data) => {
-        if (data === '') {
-          console.log(canvas);
-          return false;
-        }
-        demoSignUrl.value = data;
-        console.log('The map`s address', canvas, data);
-      };
-      const clear = () => {
-        demoSignUrl.value = '';
-        console.log('clear event');
-      };
-      return { confirm, clear, demoSignUrl };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const demoSignUrl = ref('');
+const confirm = (canvas, data) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
+  }
+  demoSignUrl.value = data;
+  console.log('img data', canvas, data);
+};
+const clear = () => {
+  demoSignUrl.value = '';
+  console.log('clear');
+};
 </script>
 ```
 
@@ -52,36 +47,35 @@ app.use(Signature);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-signature :lineWidth="lineWidth" :strokeStyle="strokeStyle" @confirm="confirm" @clear="clear"></nut-signature>
+  <nut-signature
+    :lineWidth="state.lineWidth"
+    :strokeStyle="state.strokeStyle"
+    @confirm="confirm"
+    @clear="clear"
+  ></nut-signature>
   <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        lineWidth: 4,
-        strokeStyle: 'green'
-      });
-      const demoSignUrl = ref('');
-      const confirm = (canvas, data) => {
-        if (data === '') {
-          console.log(canvas);
-          return false;
-        }
-        demoSignUrl.value = data;
-        console.log('The map`s address', canvas, data);
-      };
-      const clear = () => {
-        demoSignUrl.value = '';
-        console.log('clear event');
-      };
-      return { ...state, demoSignUrl, confirm, clear };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const state = reactive({
+  lineWidth: 4,
+  strokeStyle: 'green'
+});
+const demoSignUrl = ref('');
+const confirm = (canvas, data) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
+  }
+  demoSignUrl.value = data;
+  console.log('img data', canvas, data);
+};
+const clear = () => {
+  demoSignUrl.value = '';
+  console.log('clear');
+};
 </script>
 ```
 
diff --git a/src/packages/__VUE/signature/doc.md b/src/packages/__VUE/signature/doc.md
index 40a400cc07..a4fda6c033 100644
--- a/src/packages/__VUE/signature/doc.md
+++ b/src/packages/__VUE/signature/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Signature } from '@nutui/nutui';
 
@@ -18,31 +18,26 @@ app.use(Signature);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-signature @confirm="confirm" @clear="clear"></nut-signature>
   <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
-<script>
-  export default {
-    props: {},
-    setup() {
-      const demoSignUrl = ref('');
-      const confirm = (canvas, data) => {
-        if (data === '') {
-          console.log(canvas);
-          return false;
-        }
-        demoSignUrl.value = data;
-        console.log('图片地址', canvas, data);
-      };
-      const clear = () => {
-        demoSignUrl.value = '';
-        console.log('清除事件');
-      };
-      return { confirm, clear, demoSignUrl };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const demoSignUrl = ref('');
+const confirm = (canvas, data) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
+  }
+  demoSignUrl.value = data;
+  console.log('图片地址', canvas, data);
+};
+const clear = () => {
+  demoSignUrl.value = '';
+  console.log('清除事件');
+};
 </script>
 ```
 
@@ -52,36 +47,35 @@ app.use(Signature);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-signature :lineWidth="lineWidth" :strokeStyle="strokeStyle" @confirm="confirm" @clear="clear"></nut-signature>
+  <nut-signature
+    :lineWidth="state.lineWidth"
+    :strokeStyle="state.strokeStyle"
+    @confirm="confirm"
+    @clear="clear"
+  ></nut-signature>
   <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        lineWidth: 4,
-        strokeStyle: 'green'
-      });
-      const demoSignUrl = ref('');
-      const confirm = (canvas, data) => {
-        if (data === '') {
-          console.log(canvas);
-          return false;
-        }
-        demoSignUrl.value = data;
-        console.log('图片地址', canvas, data);
-      };
-      const clear = () => {
-        demoSignUrl.value = '';
-        console.log('清除事件');
-      };
-      return { ...state, demoSignUrl, confirm, clear };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const state = reactive({
+  lineWidth: 4,
+  strokeStyle: 'green'
+});
+const demoSignUrl = ref('');
+const confirm = (canvas, data) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
+  }
+  demoSignUrl.value = data;
+  console.log('图片地址', canvas, data);
+};
+const clear = () => {
+  demoSignUrl.value = '';
+  console.log('清除事件');
+};
 </script>
 ```
 
diff --git a/src/packages/__VUE/signature/doc.taro.md b/src/packages/__VUE/signature/doc.taro.md
index 8f87fd08ea..1e53c0daa0 100644
--- a/src/packages/__VUE/signature/doc.taro.md
+++ b/src/packages/__VUE/signature/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Signature } from '@nutui/nutui-taro';
 
@@ -18,31 +18,26 @@ app.use(Signature);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-signature @confirm="confirm" @clear="clear"></nut-signature>
   <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
-<script>
-  export default {
-    props: {},
-    setup() {
-      const demoSignUrl = ref('');
-      const confirm = (canvas, data) => {
-        if (data === '') {
-          console.log(canvas);
-          return false;
-        }
-        demoSignUrl.value = data;
-        console.log('图片地址', canvas, data);
-      };
-      const clear = () => {
-        demoSignUrl.value = '';
-        console.log('清除事件');
-      };
-      return { confirm, clear, demoSignUrl };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const demoSignUrl = ref('');
+const confirm = (canvas, data) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
+  }
+  demoSignUrl.value = data;
+  console.log('图片地址', canvas, data);
+};
+const clear = () => {
+  demoSignUrl.value = '';
+  console.log('清除事件');
+};
 </script>
 ```
 
@@ -50,39 +45,42 @@ app.use(Signature);
 
 ### 修改颜色和签字粗细
 
-```html
+:::demo
+
+```vue
 <template>
-  <nut-signature :lineWidth="lineWidth" :strokeStyle="strokeStyle" @confirm="confirm" @clear="clear"></nut-signature>
+  <nut-signature
+    :lineWidth="state.lineWidth"
+    :strokeStyle="state.strokeStyle"
+    @confirm="confirm"
+    @clear="clear"
+  ></nut-signature>
   <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        lineWidth: 4,
-        strokeStyle: 'green'
-      });
-      const demoSignUrl = ref('');
-      const confirm = (canvas, data) => {
-        if (data === '') {
-          console.log(canvas);
-          return false;
-        }
-        demoSignUrl.value = data;
-        console.log('图片地址', canvas, data);
-      };
-      const clear = () => {
-        demoSignUrl.value = '';
-        console.log('清除事件');
-      };
-      return { ...state, demoSignUrl, confirm, clear };
-    }
-  };
+<script setup>
+import { ref, reactive } from 'vue';
+const state = reactive({
+  lineWidth: 4,
+  strokeStyle: 'green'
+});
+const demoSignUrl = ref('');
+const confirm = (canvas, data) => {
+  if (data === '') {
+    console.log(canvas);
+    return false;
+  }
+  demoSignUrl.value = data;
+  console.log('图片地址', canvas, data);
+};
+const clear = () => {
+  demoSignUrl.value = '';
+  console.log('清除事件');
+};
 </script>
 ```
 
+:::
+
 ## API
 
 ### Props
diff --git a/src/packages/__VUE/steps/doc.en-US.md b/src/packages/__VUE/steps/doc.en-US.md
index dfb345c0a9..b5ef0ebe94 100644
--- a/src/packages/__VUE/steps/doc.en-US.md
+++ b/src/packages/__VUE/steps/doc.en-US.md
@@ -6,7 +6,7 @@ Split and display the steps of a process, guide users to complete tasks accordin
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Steps, Step } from '@nutui/nutui';
 
@@ -19,7 +19,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps :current="current1" @click-step="handleClickStep">
     <nut-step title="Step One">
@@ -30,19 +30,12 @@ app.use(Step);
     <nut-step title="Not started">3</nut-step>
   </nut-steps>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        current1: 1
-      });
-      const handleClickStep = (index: number) => {
-        console.log(index);
-      };
-      return { ...toRefs(state), handleClickStep };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const current1 = ref(1);
+const handleClickStep = (index) => {
+  console.log(index);
+};
 </script>
 ```
 
@@ -52,7 +45,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps :current="current2" progress-dot>
     <nut-step></nut-step>
@@ -63,19 +56,12 @@ app.use(Step);
     <nut-button size="mini" type="primary" @click="handleStep('current2')">{{ translate('next') }}</nut-button>
   </div>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        current2: 1
-      });
-      const handleClickStep = (index: number) => {
-        console.log(index);
-      };
-      return { ...toRefs(state), handleClickStep };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const curren2 = ref(1);
+const handleClickStep = (index) => {
+  console.log(index);
+};
 </script>
 ```
 
@@ -85,7 +71,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps :current="current2">
     <nut-step title="Completed" content="Step description">1</nut-step>
@@ -93,16 +79,9 @@ app.use(Step);
     <nut-step title="Not started" content="Step description">3</nut-step>
   </nut-steps>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        current2: 1
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const curren2 = ref(1);
 </script>
 ```
 
@@ -112,7 +91,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps current="1">
     <nut-step title="Completed">
@@ -126,11 +105,8 @@ app.use(Step);
     </nut-step>
   </nut-steps>
 </template>
-<script lang="ts">
-  import { Service, People, Location2 } from '@nutui/icons-vue';
-  export default {
-    components: { Service, People, Location2 }
-  };
+<script setup>
+import { Service, People, Location2 } from '@nutui/icons-vue';
 </script>
 ```
 
@@ -140,7 +116,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps direction="vertical" current="2">
     <nut-step title="Completed" content="Your order has been packaged and the goods have been delivered">1</nut-step>
@@ -160,7 +136,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps direction="vertical" progress-dot current="2">
     <nut-step title="Completed" content="Your order has been packaged and the goods have been delivered">1</nut-step>
diff --git a/src/packages/__VUE/steps/doc.md b/src/packages/__VUE/steps/doc.md
index 6a498b81d3..8e55bc97f2 100644
--- a/src/packages/__VUE/steps/doc.md
+++ b/src/packages/__VUE/steps/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Steps, Step } from '@nutui/nutui';
 
@@ -19,7 +19,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps :current="current1" @click-step="handleClickStep">
     <nut-step title="步骤一">
@@ -30,19 +30,12 @@ app.use(Step);
     <nut-step title="未开始">3</nut-step>
   </nut-steps>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        current1: 1
-      });
-      const handleClickStep = (index: number) => {
-        console.log(index);
-      };
-      return { ...toRefs(state), handleClickStep };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const current1 = ref(1);
+const handleClickStep = (index) => {
+  console.log(index);
+};
 </script>
 ```
 
@@ -52,7 +45,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps :current="current2" progress-dot>
     <nut-step></nut-step>
@@ -63,19 +56,12 @@ app.use(Step);
     <nut-button size="mini" type="primary" @click="handleStep('current2')">{{ translate('next') }}</nut-button>
   </div>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        current2: 1
-      });
-      const handleClickStep = (index: number) => {
-        console.log(index);
-      };
-      return { ...toRefs(state), handleClickStep };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const curren2 = ref(1);
+const handleClickStep = (index) => {
+  console.log(index);
+};
 </script>
 ```
 
@@ -85,7 +71,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps :current="current2">
     <nut-step title="已完成" content="步骤描述">1</nut-step>
@@ -93,16 +79,9 @@ app.use(Step);
     <nut-step title="未开始" content="步骤描述">3</nut-step>
   </nut-steps>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        current2: 1
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const curren2 = ref(1);
 </script>
 ```
 
@@ -112,7 +91,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps current="1">
     <nut-step title="已完成">
@@ -126,11 +105,8 @@ app.use(Step);
     </nut-step>
   </nut-steps>
 </template>
-<script lang="ts">
-  import { Service, People, Location2 } from '@nutui/icons-vue';
-  export default {
-    components: { Service, People, Location2 }
-  };
+<script setup>
+import { Service, People, Location2 } from '@nutui/icons-vue';
 </script>
 ```
 
@@ -140,7 +116,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps direction="vertical" current="2">
     <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
@@ -156,7 +132,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps direction="vertical" progress-dot current="2">
     <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
diff --git a/src/packages/__VUE/steps/doc.taro.md b/src/packages/__VUE/steps/doc.taro.md
index 25ee0445a1..b59ea14a35 100644
--- a/src/packages/__VUE/steps/doc.taro.md
+++ b/src/packages/__VUE/steps/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Steps, Step } from '@nutui/nutui-taro';
 
@@ -19,7 +19,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps :current="current1" @click-step="handleClickStep">
     <nut-step title="步骤一">
@@ -30,19 +30,12 @@ app.use(Step);
     <nut-step title="未开始">3</nut-step>
   </nut-steps>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        current1: 1
-      });
-      const handleClickStep = (index: number) => {
-        console.log(index);
-      };
-      return { ...toRefs(state), handleClickStep };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const current1 = ref(1);
+const handleClickStep = (index) => {
+  console.log(index);
+};
 </script>
 ```
 
@@ -52,7 +45,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps :current="current2" progress-dot>
     <nut-step></nut-step>
@@ -63,19 +56,12 @@ app.use(Step);
     <nut-button size="mini" type="primary" @click="handleStep('current2')">{{ translate('next') }}</nut-button>
   </div>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        current2: 1
-      });
-      const handleClickStep = (index: number) => {
-        console.log(index);
-      };
-      return { ...toRefs(state), handleClickStep };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const curren2 = ref(1);
+const handleClickStep = (index) => {
+  console.log(index);
+};
 </script>
 ```
 
@@ -85,7 +71,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps :current="current2">
     <nut-step title="已完成" content="步骤描述">1</nut-step>
@@ -93,16 +79,9 @@ app.use(Step);
     <nut-step title="未开始" content="步骤描述">3</nut-step>
   </nut-steps>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        current2: 1
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const curren2 = ref(1);
 </script>
 ```
 
@@ -112,7 +91,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps current="1">
     <nut-step title="已完成">
@@ -126,11 +105,8 @@ app.use(Step);
     </nut-step>
   </nut-steps>
 </template>
-<script lang="ts">
-  import { Service, People, Location2 } from '@nutui/icons-vue-taro';
-  export default {
-    components: { Service, People, Location2 }
-  };
+<script setup>
+import { Service, People, Location2 } from '@nutui/icons-vue-taro';
 </script>
 ```
 
@@ -140,7 +116,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps direction="vertical" current="2">
     <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
@@ -156,7 +132,7 @@ app.use(Step);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-steps direction="vertical" progress-dot current="2">
     <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
diff --git a/src/packages/__VUE/sticky/doc.en-US.md b/src/packages/__VUE/sticky/doc.en-US.md
index f7a5ad04d9..60ddd17755 100644
--- a/src/packages/__VUE/sticky/doc.en-US.md
+++ b/src/packages/__VUE/sticky/doc.en-US.md
@@ -20,9 +20,11 @@ app.use(Sticky);
 
 ```vue
 <template>
-  <nut-sticky>
-    <nut-button type="primary">Ceiling button</nut-button>
-  </nut-sticky>
+  <div style="height: 200vh; padding-top: 100px;">
+    <nut-sticky>
+      <nut-button type="primary">Ceiling button</nut-button>
+    </nut-sticky>
+  </div>
 </template>
 ```
 
@@ -34,9 +36,11 @@ app.use(Sticky);
 
 ```vue
 <template>
-  <nut-sticky top="120">
-    <nut-button type="primary">Ceiling button distance 120px</nut-button>
-  </nut-sticky>
+  <div style="height: 200vh; padding-top: 200px;">
+    <nut-sticky top="120">
+      <nut-button type="primary">Ceiling button distance 120px</nut-button>
+    </nut-sticky>
+  </div>
 </template>
 ```
 
@@ -48,10 +52,12 @@ app.use(Sticky);
 
 ```vue
 <template>
-  <div style="width: 100%; height: 150px; background: white" ref="container">
-    <nut-sticky top="20" :container="container">
-      <nut-button type="info">指定容器</nut-button>
-    </nut-sticky>
+  <div style="height: 200vh; padding-top: 100px">
+    <div style="width: 100%; height: 150px; background: pink" ref="container">
+      <nut-sticky top="20" :container="container">
+        <nut-button type="info">Container</nut-button>
+      </nut-sticky>
+    </div>
   </div>
 </template>
 <script setup>
@@ -68,9 +74,11 @@ const container = ref(null);
 
 ```vue
 <template>
-  <nut-sticky bottom="50" position="bottom">
-    <nut-button type="primary">Suction distance 50px</nut-button>
-  </nut-sticky>
+  <div style="height: 100vh; padding-top: 100vh">
+    <nut-sticky bottom="50" position="bottom">
+      <nut-button type="primary">Suction distance 50px</nut-button>
+    </nut-sticky>
+  </div>
 </template>
 ```
 
diff --git a/src/packages/__VUE/sticky/doc.md b/src/packages/__VUE/sticky/doc.md
index d5b5854121..d006d13895 100644
--- a/src/packages/__VUE/sticky/doc.md
+++ b/src/packages/__VUE/sticky/doc.md
@@ -20,9 +20,11 @@ app.use(Sticky);
 
 ```vue
 <template>
-  <nut-sticky>
-    <nut-button type="primary">吸顶按钮</nut-button>
-  </nut-sticky>
+  <div style="height: 200vh; padding-top: 100px;">
+    <nut-sticky>
+      <nut-button type="primary">吸顶按钮</nut-button>
+    </nut-sticky>
+  </div>
 </template>
 ```
 
@@ -34,9 +36,11 @@ app.use(Sticky);
 
 ```vue
 <template>
-  <nut-sticky top="120">
-    <nut-button type="primary">吸顶距离120px</nut-button>
-  </nut-sticky>
+  <div style="height: 200vh; padding-top: 200px;">
+    <nut-sticky top="120">
+      <nut-button type="primary">吸顶距离120px</nut-button>
+    </nut-sticky>
+  </div>
 </template>
 ```
 
@@ -48,10 +52,12 @@ app.use(Sticky);
 
 ```vue
 <template>
-  <div style="width: 100%; height: 150px; background: white" ref="container">
-    <nut-sticky top="20" :container="container">
-      <nut-button type="info">指定容器</nut-button>
-    </nut-sticky>
+  <div style="height: 200vh; padding-top: 100px">
+    <div style="width: 100%; height: 150px; background: pink" ref="container">
+      <nut-sticky top="20" :container="container">
+        <nut-button type="info">指定容器</nut-button>
+      </nut-sticky>
+    </div>
   </div>
 </template>
 <script setup>
@@ -68,9 +74,11 @@ const container = ref(null);
 
 ```vue
 <template>
-  <nut-sticky bottom="50" position="bottom">
-    <nut-button type="primary">吸底距离 50px</nut-button>
-  </nut-sticky>
+  <div style="height: 100vh; padding-top: 100vh">
+    <nut-sticky bottom="50" position="bottom">
+      <nut-button type="primary">吸底距离 50px</nut-button>
+    </nut-sticky>
+  </div>
 </template>
 ```
 
diff --git a/src/packages/__VUE/sticky/doc.taro.md b/src/packages/__VUE/sticky/doc.taro.md
index 567dc82912..bebf40d994 100644
--- a/src/packages/__VUE/sticky/doc.taro.md
+++ b/src/packages/__VUE/sticky/doc.taro.md
@@ -20,9 +20,11 @@ app.use(Sticky);
 
 ```vue
 <template>
-  <nut-sticky>
-    <nut-button type="primary">吸顶按钮</nut-button>
-  </nut-sticky>
+  <view style="height: 200vh; padding-top: 100px;">
+    <nut-sticky>
+      <nut-button type="primary">吸顶按钮</nut-button>
+    </nut-sticky>
+  </view>
 </template>
 ```
 
@@ -34,9 +36,11 @@ app.use(Sticky);
 
 ```vue
 <template>
-  <nut-sticky top="120">
-    <nut-button type="primary">吸顶距离120px</nut-button>
-  </nut-sticky>
+  <div style="height: 200vh; padding-top: 200px;">
+    <nut-sticky top="120">
+      <nut-button type="primary">吸顶距离120px</nut-button>
+    </nut-sticky>
+  </div>
 </template>
 ```
 
diff --git a/src/packages/__VUE/swipe/doc.en-US.md b/src/packages/__VUE/swipe/doc.en-US.md
index dbbfbd4a5a..80fcb15a6a 100644
--- a/src/packages/__VUE/swipe/doc.en-US.md
+++ b/src/packages/__VUE/swipe/doc.en-US.md
@@ -86,7 +86,8 @@ app.use(Swipe);
   </nut-swipe>
 </template>
 <script setup>
-const refSwipe = ref<HTMLElement>();
+import { ref } from 'vue';
+const refSwipe = ref();
 const checked = ref(false);
 const changSwitch = (value) => {
   if (value) {
@@ -122,6 +123,7 @@ const changSwitch = (value) => {
   </nut-swipe>
 </template>
 <script setup>
+import { ref } from 'vue';
 const number = ref(0);
 </script>
 ```
diff --git a/src/packages/__VUE/swipe/doc.md b/src/packages/__VUE/swipe/doc.md
index 5b8220a04d..87e4ff88ea 100644
--- a/src/packages/__VUE/swipe/doc.md
+++ b/src/packages/__VUE/swipe/doc.md
@@ -86,7 +86,8 @@ app.use(Swipe);
   </nut-swipe>
 </template>
 <script setup>
-const refSwipe = ref<HTMLElement>();
+import { ref } from 'vue';
+const refSwipe = ref();
 const checked = ref(false);
 const changSwitch = (value) => {
   if (value) {
@@ -122,6 +123,7 @@ const changSwitch = (value) => {
   </nut-swipe>
 </template>
 <script setup>
+import { ref } from 'vue';
 const number = ref(0);
 </script>
 ```
diff --git a/src/packages/__VUE/swipe/doc.taro.md b/src/packages/__VUE/swipe/doc.taro.md
index 83821e307a..ee75e19ff6 100644
--- a/src/packages/__VUE/swipe/doc.taro.md
+++ b/src/packages/__VUE/swipe/doc.taro.md
@@ -86,7 +86,8 @@ app.use(Swipe);
   </nut-swipe>
 </template>
 <script setup>
-const refSwipe = ref<HTMLElement>();
+import { ref } from 'vue';
+const refSwipe = ref();
 const checked = ref(false);
 const changSwitch = (value) => {
   if (value) {
@@ -122,6 +123,7 @@ const changSwitch = (value) => {
   </nut-swipe>
 </template>
 <script setup>
+import { ref } from 'vue';
 const number = ref(0);
 </script>
 ```
diff --git a/src/packages/__VUE/switch/doc.en-US.md b/src/packages/__VUE/switch/doc.en-US.md
index 8a72a060b0..7961aad119 100644
--- a/src/packages/__VUE/switch/doc.en-US.md
+++ b/src/packages/__VUE/switch/doc.en-US.md
@@ -6,7 +6,7 @@ Used to turn options on or off.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Switch } from '@nutui/nutui';
 
@@ -18,18 +18,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -39,18 +34,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" disable />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -60,18 +50,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-switch v-model="checked" loading active-color />
+  <nut-switch v-model="checked" loading active-color="red" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -81,27 +66,16 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" @change="change" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-
-  export default {
-    setup() {
-      const checked = ref(true);
-      const change = (value: boolean, event: Event) => {
-        showToast.text(`value：${value}`);
-      };
-      return {
-        checked,
-        change
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
+const change = (value, event) => {
+  console.log(`value：${value}`);
+};
 </script>
 ```
 
@@ -111,31 +85,19 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch :model-value="checkedAsync" @change="changeAsync" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-
-  export default {
-    setup() {
-      const checkedAsync = ref(true);
-      const changeAsync = (value: boolean, event: Event) => {
-        showToast.text(`after 2 second： ${value}`);
-        setTimeout(() => {
-          checkedAsync.value = value;
-        }, 2000);
-      };
-
-      return {
-        checkedAsync,
-        changeAsync
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkedAsync = ref(true);
+const changeAsync = (value, event) => {
+  console.log(`2s ${value}`);
+  setTimeout(() => {
+    checkedAsync.value = value;
+  }, 2000);
+};
 </script>
 ```
 
@@ -145,18 +107,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" active-color="blue" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -166,18 +123,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-switch v-model="checked" active-text="Open" inactive-text="Closed" />
+  <nut-switch v-model="checked" active-text="open" inactive-text="close" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -187,21 +139,16 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" loading>
     <template #icon><Loading name="loading" /></template>
   </nut-switch>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { Loading } from '@nutui/icons-vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Loading } from '@nutui/icons-vue';
+const checked = ref(true);
 </script>
 ```
 
diff --git a/src/packages/__VUE/switch/doc.md b/src/packages/__VUE/switch/doc.md
index 3693c00569..f882823044 100644
--- a/src/packages/__VUE/switch/doc.md
+++ b/src/packages/__VUE/switch/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Switch } from '@nutui/nutui';
 
@@ -18,18 +18,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -39,18 +34,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" disable />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -60,18 +50,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" loading active-color="red" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -81,27 +66,16 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" @change="change" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-
-  export default {
-    setup() {
-      const checked = ref(true);
-      const change = (value: boolean, event: Event) => {
-        showToast.text(`value：${value}`);
-      };
-      return {
-        checked,
-        change
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
+const change = (value, event) => {
+  console.log(`value：${value}`);
+};
 </script>
 ```
 
@@ -111,31 +85,19 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch :model-value="checkedAsync" @change="changeAsync" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-
-  export default {
-    setup() {
-      const checkedAsync = ref(true);
-      const changeAsync = (value: boolean, event: Event) => {
-        showToast.text(`2秒后异步触发 ${value}`);
-        setTimeout(() => {
-          checkedAsync.value = value;
-        }, 2000);
-      };
-
-      return {
-        checkedAsync,
-        changeAsync
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkedAsync = ref(true);
+const changeAsync = (value, event) => {
+  console.log(`2s ${value}`);
+  setTimeout(() => {
+    checkedAsync.value = value;
+  }, 2000);
+};
 </script>
 ```
 
@@ -145,18 +107,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" active-color="blue" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -166,18 +123,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" active-text="开" inactive-text="关" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -187,21 +139,16 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" loading>
     <template #icon><Loading name="loading" /></template>
   </nut-switch>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { Loading } from '@nutui/icons-vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Loading } from '@nutui/icons-vue';
+const checked = ref(true);
 </script>
 ```
 
diff --git a/src/packages/__VUE/switch/doc.taro.md b/src/packages/__VUE/switch/doc.taro.md
index 7b3c2eee2b..b18ae3ab67 100644
--- a/src/packages/__VUE/switch/doc.taro.md
+++ b/src/packages/__VUE/switch/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Switch } from '@nutui/nutui-taro';
 
@@ -18,18 +18,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -39,18 +34,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" disable />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -60,18 +50,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-switch v-model="checked" loading />
+  <nut-switch v-model="checked" loading active-color="red" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -81,24 +66,16 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" @change="change" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      const change = (value: boolean, event: Event) => {
-        console.log(`value：${value}`);
-      };
-      return {
-        checked,
-        change
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
+const change = (value, event) => {
+  console.log(`value：${value}`);
+};
 </script>
 ```
 
@@ -108,28 +85,19 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch :model-value="checkedAsync" @change="changeAsync" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checkedAsync = ref(true);
-      const changeAsync = (value: boolean, event: Event) => {
-        console.log(`2秒后异步触发 ${value}`);
-        setTimeout(() => {
-          checkedAsync.value = value;
-        }, 2000);
-      };
-
-      return {
-        checkedAsync,
-        changeAsync
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checkedAsync = ref(true);
+const changeAsync = (value, event) => {
+  console.log(`2s ${value}`);
+  setTimeout(() => {
+    checkedAsync.value = value;
+  }, 2000);
+};
 </script>
 ```
 
@@ -139,18 +107,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" active-color="blue" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -160,18 +123,13 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" active-text="开" inactive-text="关" />
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
 </script>
 ```
 
@@ -181,21 +139,16 @@ app.use(Switch);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-switch v-model="checked" loading>
     <template #icon><Loading name="loading" /></template>
   </nut-switch>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { Loading } from '@nutui/icons-vue-taro';
-  export default {
-    setup() {
-      const checked = ref(true);
-      return { checked };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Loading } from '@nutui/icons-vue-taro';
+const checked = ref(true);
 </script>
 ```
 
diff --git a/src/packages/__VUE/table/doc.md b/src/packages/__VUE/table/doc.md
index 32cca5526f..db50e0f135 100644
--- a/src/packages/__VUE/table/doc.md
+++ b/src/packages/__VUE/table/doc.md
@@ -412,7 +412,7 @@ app.use(Table);
                   size: 'small',
                   type: 'primary'
                 },
-                'Hello'
+                () => 'Hello'
               );
             }
           },
@@ -438,7 +438,7 @@ app.use(Table);
                     window.open('https://www.jd.com');
                   }
                 },
-                '跳转到京东'
+                () => '跳转到京东'
               );
             }
           }
diff --git a/src/packages/__VUE/table/doc.taro.md b/src/packages/__VUE/table/doc.taro.md
index 04073a12e2..468c05dbd5 100644
--- a/src/packages/__VUE/table/doc.taro.md
+++ b/src/packages/__VUE/table/doc.taro.md
@@ -412,7 +412,7 @@ app.use(Table);
                   size: 'small',
                   type: 'primary'
                 },
-                'Hello'
+                () => 'Hello'
               );
             }
           },
@@ -438,7 +438,7 @@ app.use(Table);
                     window.open('https://www.jd.com');
                   }
                 },
-                '跳转到京东'
+                () => '跳转到京东'
               );
             }
           }
diff --git a/src/packages/__VUE/textarea/doc.en-US.md b/src/packages/__VUE/textarea/doc.en-US.md
index 9bedde19f5..0efae46a4d 100644
--- a/src/packages/__VUE/textarea/doc.en-US.md
+++ b/src/packages/__VUE/textarea/doc.en-US.md
@@ -6,7 +6,7 @@ Enter or edit text in the text box, and limit the number of entries is supported
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Textarea } from '@nutui/nutui';
 
@@ -18,18 +18,13 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea v-model="value" />
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref('');
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -39,10 +34,14 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea v-model="value" limit-show max-length="20" />
 </template>
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+</script>
 ```
 
 :::
@@ -51,10 +50,14 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-textarea v-model="value" rows="1" autosize />
+  <nut-textarea v-model="value" :rows="1" autosize />
 </template>
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+</script>
 ```
 
 :::
@@ -63,7 +66,7 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea readonly model-value="Textarea read only status" />
   <nut-textarea disabled model-value="Textarea disabled" />
diff --git a/src/packages/__VUE/textarea/doc.md b/src/packages/__VUE/textarea/doc.md
index 697e75bbb7..25194dc017 100644
--- a/src/packages/__VUE/textarea/doc.md
+++ b/src/packages/__VUE/textarea/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Textarea } from '@nutui/nutui';
 
@@ -18,18 +18,13 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea v-model="value" />
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref('');
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -39,10 +34,14 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea v-model="value" limit-show max-length="20" />
 </template>
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+</script>
 ```
 
 :::
@@ -51,10 +50,14 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea v-model="value" :rows="1" autosize />
 </template>
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+</script>
 ```
 
 :::
@@ -63,7 +66,7 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea readonly model-value="textarea 只读状态" />
   <nut-textarea disabled model-value="textarea 禁用状态" />
@@ -91,11 +94,11 @@ app.use(Textarea);
 
 ### Events
 
-| 事件名 | 说明               | 回调参数       |
-| ------ | ------------------ | -------------- |
-| change | 输入框值改变时触发 | `value`        |
-| focus  | 聚焦时触发         | `event`        |
-| blur   | 失焦时触发         | `value, event` |
+| 事件名 | 说明               | 回调参数      |
+| ------ | ------------------ | ------------- |
+| change | 输入框值改变时触发 | `value`       |
+| focus  | 聚焦时触发         | `event`       |
+| blur   | 失焦时触发         | `value,event` |
 
 ## 主题定制
 
diff --git a/src/packages/__VUE/textarea/doc.taro.md b/src/packages/__VUE/textarea/doc.taro.md
index efef55c1c3..2b7284370a 100644
--- a/src/packages/__VUE/textarea/doc.taro.md
+++ b/src/packages/__VUE/textarea/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Textarea } from '@nutui/nutui-taro';
 
@@ -18,18 +18,13 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea v-model="value" />
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const value = ref('');
-      return { value };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
 </script>
 ```
 
@@ -39,10 +34,14 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea v-model="value" limit-show max-length="20" />
 </template>
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+</script>
 ```
 
 :::
@@ -51,10 +50,14 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea v-model="value" autosize />
 </template>
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+</script>
 ```
 
 :::
@@ -63,7 +66,7 @@ app.use(Textarea);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-textarea readonly model-value="textarea 只读状态" />
   <nut-textarea disabled model-value="textarea 禁用状态" />