From 085022b2ad60c4aabc94dd92a0a7d83de7002c56 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Sat, 4 Nov 2023 01:28:44 +0800
Subject: [PATCH] chore(exhibition): move to setup sugar  (#2633)

---
 .../src/exhibition/pages/avatar/index.vue     |  24 +-
 .../src/exhibition/pages/collapse/index.vue   |  79 +-
 .../src/exhibition/pages/countdown/index.vue  | 135 ++-
 .../src/exhibition/pages/countup/index.vue    | 117 +--
 .../src/exhibition/pages/ellipsis/index.vue   |  18 +-
 .../src/exhibition/pages/list/index.vue       |  35 +-
 .../src/exhibition/pages/noticebar/index.vue  |  87 +-
 .../src/exhibition/pages/popover/index.vue    | 325 +++---
 .../src/exhibition/pages/skeleton/index.vue   |  19 +-
 .../src/exhibition/pages/steps/index.vue      |  47 +-
 .../src/exhibition/pages/swiper/index.vue     | 135 ++-
 .../src/exhibition/pages/table/index.vue      | 439 ++++----
 .../src/exhibition/pages/tour/index.vue       | 172 ++--
 .../src/exhibition/pages/trendarrow/index.vue |  12 +-
 .../src/exhibition/pages/watermark/index.vue  |  34 +-
 src/packages/__VUE/badge/demo.vue             |  15 +-
 src/packages/__VUE/badge/doc.en-US.md         | 133 ++-
 src/packages/__VUE/badge/doc.md               | 135 ++-
 src/packages/__VUE/badge/doc.taro.md          | 135 ++-
 src/packages/__VUE/collapse/demo.vue          |  53 +-
 src/packages/__VUE/collapse/doc.en-US.md      | 216 ++--
 src/packages/__VUE/collapse/doc.md            | 216 ++--
 src/packages/__VUE/collapse/doc.taro.md       | 218 ++--
 src/packages/__VUE/countdown/demo.vue         | 134 ++-
 src/packages/__VUE/countup/demo.vue           | 115 +--
 src/packages/__VUE/countup/doc.en-US.md       | 172 ++--
 src/packages/__VUE/countup/doc.md             | 174 ++--
 src/packages/__VUE/countup/doc.taro.md        | 172 ++--
 src/packages/__VUE/ellipsis/demo.vue          |  22 +-
 src/packages/__VUE/ellipsis/doc.en-US.md      |  42 +-
 src/packages/__VUE/ellipsis/doc.md            |  40 +-
 src/packages/__VUE/ellipsis/doc.taro.md       |  40 +-
 src/packages/__VUE/imagepreview/demo.vue      | 167 ++-
 src/packages/__VUE/imagepreview/doc.en-US.md  | 447 ++++----
 src/packages/__VUE/imagepreview/doc.md        | 445 ++++----
 src/packages/__VUE/imagepreview/doc.taro.md   | 346 +++----
 src/packages/__VUE/list/demo.vue              |  35 +-
 src/packages/__VUE/list/doc.en-US.md          | 117 +--
 src/packages/__VUE/list/doc.md                | 117 +--
 src/packages/__VUE/list/doc.taro.md           | 117 +--
 src/packages/__VUE/noticebar/demo.vue         |  87 +-
 src/packages/__VUE/noticebar/doc.en-US.md     | 151 ++-
 src/packages/__VUE/noticebar/doc.md           | 155 ++-
 src/packages/__VUE/noticebar/doc.taro.md      | 157 ++-
 src/packages/__VUE/popover/demo.vue           | 356 ++++---
 src/packages/__VUE/popover/doc.en-US.md       | 536 +++++-----
 src/packages/__VUE/popover/doc.md             | 533 +++++-----
 src/packages/__VUE/popover/doc.taro.md        | 538 +++++-----
 src/packages/__VUE/skeleton/demo.vue          |  17 +-
 src/packages/__VUE/skeleton/doc.en-US.md      |  77 +-
 src/packages/__VUE/skeleton/doc.md            | 121 ++-
 src/packages/__VUE/skeleton/doc.taro.md       | 109 +-
 src/packages/__VUE/swiper/demo.vue            | 135 ++-
 src/packages/__VUE/swiper/doc.en-US.md        | 524 +++++-----
 src/packages/__VUE/swiper/doc.md              | 525 +++++-----
 src/packages/__VUE/swiper/doc.taro.md         | 507 +++++----
 src/packages/__VUE/table/demo.vue             | 503 +++++----
 src/packages/__VUE/table/doc.en-US.md         | 960 ++++++++----------
 src/packages/__VUE/table/doc.md               | 960 ++++++++----------
 src/packages/__VUE/table/doc.taro.md          | 957 ++++++++---------
 src/packages/__VUE/tour/demo.vue              | 184 ++--
 src/packages/__VUE/tour/doc.en-US.md          | 321 +++---
 src/packages/__VUE/tour/doc.md                | 321 +++---
 src/packages/__VUE/tour/doc.taro.md           | 329 +++---
 src/packages/__VUE/trendarrow/demo.vue        |  12 +-
 src/packages/__VUE/trendarrow/doc.en-US.md    |  61 +-
 src/packages/__VUE/trendarrow/doc.md          |  61 +-
 src/packages/__VUE/trendarrow/doc.taro.md     |  61 +-
 src/packages/__VUE/video/demo.vue             | 130 +--
 src/packages/__VUE/video/doc.en-US.md         | 384 ++++---
 src/packages/__VUE/video/doc.md               | 376 +++----
 src/packages/__VUE/watermark/demo.vue         |  32 +-
 src/packages/__VUE/watermark/doc.en-US.md     | 132 ++-
 src/packages/__VUE/watermark/doc.md           | 130 ++-
 src/packages/__VUE/watermark/doc.taro.md      | 130 ++-
 75 files changed, 7278 insertions(+), 8795 deletions(-)

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue
index 53c3dfebd2..2e5a6d51ee 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue
@@ -106,27 +106,19 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { My } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import { ref } from 'vue';
-export default {
-  components: { My, Header },
-  props: {},
-  setup() {
-    const env = Taro.getEnv();
-    const handleClick = () => {
-      console.log('触发点击头像');
-    };
-
-    const avatarCount = ref(4);
-    const addAvatar = () => {
-      avatarCount.value += 1;
-    };
+const env = Taro.getEnv();
+const handleClick = () => {
+  console.log('触发点击头像');
+};
 
-    return { handleClick, env, avatarCount, addAvatar };
-  }
+const avatarCount = ref(4);
+const addAvatar = () => {
+  avatarCount.value += 1;
 };
 </script>
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue
index 05d3dba5e1..6e43ebfb80 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue
@@ -2,77 +2,64 @@
   <div class="demo full" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
-    <nut-collapse v-model="active1" @change="change">
-      <nut-collapse-item :title="title1" :name="1">
+    <nut-collapse v-model="data.active1" @change="change">
+      <nut-collapse-item :title="data.title1" :name="1">
         京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
       </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2"> 京东到家：教师节期间 创意花束销量增长53倍 </nut-collapse-item>
-      <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
+      <nut-collapse-item :title="data.title2" :name="2"> 京东到家：教师节期间 创意花束销量增长53倍 </nut-collapse-item>
+      <nut-collapse-item :title="data.title3" :name="3" disabled> </nut-collapse-item>
     </nut-collapse>
     <h2>手风琴</h2>
-    <nut-collapse v-model="active2" :accordion="true">
-      <nut-collapse-item :title="title1" :name="1">
+    <nut-collapse v-model="data.active2" :accordion="true">
+      <nut-collapse-item :title="data.title1" :name="1">
         <template #value> 文本测试 </template>
         华为终端操作系统EMUI 11发布，9月11日正式开启
       </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2" :value="subTitle">
+      <nut-collapse-item :title="data.title2" :name="2" :value="data.subTitle">
         中国服务机器人市场已占全球市场超1/4
       </nut-collapse-item>
-      <nut-collapse-item :title="title3" :name="3"> QuestMobile：90后互联网用户规模超越80后达3.62亿 </nut-collapse-item>
+      <nut-collapse-item :title="data.title3" :name="3">
+        QuestMobile：90后互联网用户规模超越80后达3.62亿
+      </nut-collapse-item>
     </nut-collapse>
     <h2>自定义折叠图标</h2>
-    <nut-collapse v-model="active3" :accordion="true">
-      <nut-collapse-item :title="title1" :name="1" :icon="Notice"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2" value="文本内容" :icon="Follow">
+    <nut-collapse v-model="data.active3" :accordion="true">
+      <nut-collapse-item :title="data.title1" :name="1" :icon="Notice"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
+      <nut-collapse-item :title="data.title2" :name="2" value="文本内容" :icon="Follow">
         世界制造业大会开幕，阿里巴巴与安徽合作再升级
       </nut-collapse-item>
     </nut-collapse>
     <h2>设置固定内容（不折叠部分）</h2>
-    <nut-collapse v-model="active6" :accordion="true">
-      <nut-collapse-item :title="title1" :name="1">
+    <nut-collapse v-model="data.active6" :accordion="true">
+      <nut-collapse-item :title="data.title1" :name="1">
         <template #extra>固定内容</template>
         NutUI是一套拥有京东风格的轻量级的 Vue 组件库
       </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2">
+      <nut-collapse-item :title="data.title2" :name="2">
         在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
       </nut-collapse-item>
     </nut-collapse>
   </div>
 </template>
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { Notice, Follow } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-
-export default {
-  components: {
-    Header
-  },
-  setup(props, context) {
-    const env = Taro.getEnv();
-    const data = reactive({
-      active1: [1, '2'],
-      active2: 1,
-      active3: 1,
-      active4: 1,
-      active5: 1,
-      active6: 1,
-      title1: '标题1',
-      title2: '标题2',
-      title3: '标题3',
-      subTitle: '副标题'
-    });
-    const change = (name: string) => {
-      console.log(`点击了name是${name}的面板`);
-    };
-    return {
-      change,
-      ...toRefs(data),
-      Notice,
-      Follow,
-      env
-    };
-  }
+const env = Taro.getEnv();
+const data = reactive({
+  active1: [1, '2'],
+  active2: 1,
+  active3: 1,
+  active4: 1,
+  active5: 1,
+  active6: 1,
+  title1: '标题1',
+  title2: '标题2',
+  title3: '标题3',
+  subTitle: '副标题'
+});
+const change = (name: string) => {
+  console.log(`点击了name是${name}的面板`);
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue
index 05203b3848..07618a37ba 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue
@@ -3,37 +3,37 @@
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-countdown :endTime="end" @end="onend"></nut-countdown>
+      <nut-countdown :endTime="state.end" @end="onend"></nut-countdown>
     </nut-cell>
     <h2>自定义格式</h2>
     <nut-cell>
-      <nut-countdown :endTime="end" format="DD 天 HH 时 mm 分 ss 秒" />
+      <nut-countdown :endTime="state.end" format="DD 天 HH 时 mm 分 ss 秒" />
     </nut-cell>
 
     <h2>毫秒级渲染</h2>
 
     <nut-cell>
-      <nut-countdown :endTime="end" millisecond format="HH:mm:ss:SS" />
+      <nut-countdown :endTime="state.end" millisecond format="HH:mm:ss:SS" />
     </nut-cell>
 
     <h2>以服务端的时间为准</h2>
 
     <nut-cell>
-      <nut-countdown :startTime="serverTime" :endTime="end" />
+      <nut-countdown :startTime="state.serverTime" :endTime="state.end" />
     </nut-cell>
 
     <h2>异步更新结束时间</h2>
 
     <nut-cell>
-      <nut-countdown :endTime="asyncEnd" />
+      <nut-countdown :endTime="state.asyncEnd" />
     </nut-cell>
 
     <h2>控制开始和暂停的倒计时</h2>
 
     <nut-cell>
-      <nut-countdown :endTime="end" :paused="paused" @paused="onpaused" @restart="onrestart" />
+      <nut-countdown :endTime="state.end" :paused="state.paused" @paused="onpaused" @restart="onrestart" />
       <div style="position: absolute; right: 10px; top: 9px">
-        <nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
+        <nut-button type="primary" size="small" @click="toggle">{{ state.paused ? 'start' : 'stop' }}</nut-button>
       </div>
     </nut-cell>
 
@@ -41,14 +41,14 @@
 
     <nut-cell>
       <span>
-        <nut-countdown v-model="resetTime" :endTime="end">
+        <nut-countdown v-model="state.resetTime" :endTime="state.end">
           <div class="countdown-part-box">
-            <div class="part-item-symbol">{{ resetTime.d }}天</div>
-            <div class="part-item h">{{ resetTime.h }}</div>
+            <div class="part-item-symbol">{{ state.resetTime.d }}天</div>
+            <div class="part-item h">{{ state.resetTime.h }}</div>
             <span class="part-item-symbol">:</span>
-            <div class="part-item m">{{ resetTime.m }}</div>
+            <div class="part-item m">{{ state.resetTime.m }}</div>
             <span class="part-item-symbol">:</span>
-            <div class="part-item s">{{ resetTime.s }}</div>
+            <div class="part-item s">{{ state.resetTime.s }}</div>
           </div>
         </nut-countdown>
       </span>
@@ -67,75 +67,56 @@
   </div>
 </template>
 
-<script lang="ts">
-import { toRefs, onMounted, ref, reactive } from 'vue';
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-
-export default {
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const Countdown = ref(null);
-    const state = reactive({
-      serverTime: Date.now() - 20 * 1000,
-      end: Date.now() + 60 * 1000,
-      starttime: Date.now(),
-      asyncEnd: 0,
-      paused: false,
-      resetTime: {
-        d: '1',
-        h: '00',
-        m: '00',
-        s: '00'
-      }
-    });
-
-    const toggle = () => {
-      state.paused = !state.paused;
-    };
-    const onend = () => {
-      console.log('countdown: ended.');
-    };
-    const onpaused = (v) => {
-      console.log('paused: ', v);
-    };
-    const onrestart = (v) => {
-      console.log('restart: ', v);
-    };
-    const start = () => {
-      Countdown.value.start();
-    };
-
-    const pause = () => {
-      Countdown.value.pause();
-    };
-
-    const reset = () => {
-      Countdown.value.reset();
-    };
-    onMounted(() => {
-      console.log(Countdown.value);
-    });
-
-    setTimeout(() => {
-      state.asyncEnd = Date.now() + 30 * 1000;
-    }, 3000);
-
-    return {
-      ...toRefs(state),
-      toggle,
-      onend,
-      onpaused,
-      onrestart,
-      Countdown,
-      start,
-      pause,
-      reset,
-      env
-    };
+const env = Taro.getEnv();
+const Countdown = ref<any>(null);
+const state = reactive({
+  serverTime: Date.now() - 20 * 1000,
+  end: Date.now() + 60 * 1000,
+  starttime: Date.now(),
+  asyncEnd: 0,
+  paused: false,
+  resetTime: {
+    d: '1',
+    h: '00',
+    m: '00',
+    s: '00'
   }
+});
+
+const toggle = () => {
+  state.paused = !state.paused;
+};
+const onend = () => {
+  console.log('countdown: ended.');
+};
+const onpaused = (v) => {
+  console.log('paused: ', v);
+};
+const onrestart = (v) => {
+  console.log('restart: ', v);
+};
+const start = () => {
+  Countdown.value.start();
 };
+
+const pause = () => {
+  Countdown.value.pause();
+};
+
+const reset = () => {
+  Countdown.value.reset();
+};
+onMounted(() => {
+  console.log(Countdown.value);
+});
+
+setTimeout(() => {
+  state.asyncEnd = Date.now() + 30 * 1000;
+}, 3000);
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countup/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/countup/index.vue
index 863fc2feb1..5e19800568 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/countup/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/countup/index.vue
@@ -10,8 +10,8 @@
     <h2>自定义滚动图片展示</h2>
     <div class="show-demo">
       <nut-countup
-        :custom-change-num="customNumber"
-        :custom-bg-img="bgImage"
+        :custom-change-num="data.customNumber"
+        :custom-bg-img="data.bgImage"
         :custom-spac-num="11"
         :num-width="33"
         :num-height="47"
@@ -24,10 +24,10 @@
       <nut-countup
         ref="countupMachine"
         type="machine"
-        :machine-num="machineNum"
+        :machine-num="data.machineNum"
         :machine-prize-num="5"
-        :machine-prize-level="prizeLevel"
-        :custom-bg-img="bgImage2"
+        :machine-prize-level="data.prizeLevel"
+        :custom-bg-img="data.bgImage2"
         :num-width="100"
         :num-height="100"
         :during="3000"
@@ -35,79 +35,62 @@
       >
       </nut-countup>
       <div class="btnBtn">
-        <nut-button type="danger" @click="startRole" :disabled="startFlag">中奖</nut-button>
-        <nut-button type="danger" @click="startRole2" :disabled="startFlag">不中奖</nut-button>
+        <nut-button type="danger" @click="startRole" :disabled="data.startFlag">中奖</nut-button>
+        <nut-button type="danger" @click="startRole2" :disabled="data.startFlag">不中奖</nut-button>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
-import { reactive, toRefs, onMounted } from 'vue';
+import { reactive, onMounted } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const data = reactive({
-      customNumber: 618,
-      bgImage:
-        'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png',
-      startFlag: false,
-      startFlag2: false,
-      machineNum: 3,
-      bgImage2:
-        'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png',
-      prizeLevel: 0
-    });
-    const scrollAniEnd = (val: boolean) => {
-      console.log(val ? '恭喜中奖！！！' : '很遗憾！没有中奖');
-      setTimeout(() => {
-        data.startFlag = false;
-      }, 300);
-    };
-    const run = () => {
-      let timer = null;
-      timer = setInterval(() => {
-        data.customNumber = Math.floor(Math.random() * (700 - 100 + 1) + 100);
-      }, 5000);
-    };
-    const startRole = () => {
-      data.prizeLevel = Math.floor(Math.random() * 5 + 1);
-      console.log(data.prizeLevel, '中奖');
-      data.startFlag = true;
-      // 实际运行情况下，开始滚动函数，需要放在奖品回调函数之后，如果异步操作会影响转动结果
-      setTimeout(() => {
-        (countupMachine.value as any).machineLuck();
-      }, 500);
-    };
-    const countupMachine = ref(null);
-    const startRole2 = () => {
-      data.prizeLevel = -1;
-      console.log(data.prizeLevel, '不中奖');
-      data.startFlag = true;
-      setTimeout(() => {
-        (countupMachine.value as any).machineLuck();
-      }, 500);
-    };
-    onMounted(() => {
-      run();
-    });
-    return {
-      ...toRefs(data),
-      scrollAniEnd,
-      startRole,
-      startRole2,
-      countupMachine,
-      env
-    };
-  }
+const env = Taro.getEnv();
+const data = reactive({
+  customNumber: 618,
+  bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png',
+  startFlag: false,
+  startFlag2: false,
+  machineNum: 3,
+  bgImage2: 'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png',
+  prizeLevel: 0
+});
+const scrollAniEnd = (val: boolean) => {
+  console.log(val ? '恭喜中奖！！！' : '很遗憾！没有中奖');
+  setTimeout(() => {
+    data.startFlag = false;
+  }, 300);
+};
+const run = () => {
+  setInterval(() => {
+    data.customNumber = Math.floor(Math.random() * (700 - 100 + 1) + 100);
+  }, 5000);
+};
+const startRole = () => {
+  data.prizeLevel = Math.floor(Math.random() * 5 + 1);
+  console.log(data.prizeLevel, '中奖');
+  data.startFlag = true;
+  // 实际运行情况下，开始滚动函数，需要放在奖品回调函数之后，如果异步操作会影响转动结果
+  setTimeout(() => {
+    (countupMachine.value as any).machineLuck();
+  }, 500);
+};
+const countupMachine = ref(null);
+const startRole2 = () => {
+  data.prizeLevel = -1;
+  console.log(data.prizeLevel, '不中奖');
+  data.startFlag = true;
+  setTimeout(() => {
+    (countupMachine.value as any).machineLuck();
+  }, 500);
 };
+onMounted(() => {
+  run();
+});
 </script>
 
-<style></style>
 <style lang="scss">
 #app .countup-demo {
   padding: 57px 0 0 0;
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/ellipsis/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/ellipsis/index.vue
index a862bd246d..88084e2637 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/ellipsis/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/ellipsis/index.vue
@@ -33,18 +33,12 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default defineComponent({
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const content = ref(
-      'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
-    );
-    return { content, env };
-  }
-});
+const env = Taro.getEnv();
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
 </script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/list/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/list/index.vue
index c3aac306fb..9468d98d57 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/list/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/list/index.vue
@@ -3,7 +3,7 @@
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
+      <nut-list :height="50" :listData="state.count" @scroll-bottom="handleScroll">
         <template v-slot="{ item }">
           <div class="list-item">
             {{ item }}
@@ -13,30 +13,23 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default defineComponent({
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const state = reactive({
-      count: new Array(100).fill(0)
-    });
-
-    const handleScroll = () => {
-      let arr = new Array(100).fill(0);
-      const len = state.count.length;
-      state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
-    };
+const env = Taro.getEnv();
+const state = reactive({
+  count: new Array(100).fill(0)
+});
 
-    onMounted(() => {
-      state.count = state.count.map((item: number, index: number) => index + 1);
-    });
+const handleScroll = () => {
+  let arr = new Array(100).fill(0);
+  const len = state.count.length;
+  state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
+};
 
-    return { ...toRefs(state), handleScroll, env };
-  }
+onMounted(() => {
+  state.count = state.count.map((item: number, index: number) => index + 1);
 });
 </script>
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/noticebar/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/noticebar/index.vue
index 13baa000cd..8daf7b8407 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/noticebar/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/noticebar/index.vue
@@ -56,7 +56,7 @@
     <div class="interstroll-list">
       <nut-noticebar
         direction="vertical"
-        :list="horseLamp1"
+        :list="state.horseLamp1"
         :speed="10"
         :standTime="1000"
         @click="go"
@@ -71,7 +71,7 @@
     <div class="interstroll-list">
       <nut-noticebar
         direction="vertical"
-        :list="horseLamp2"
+        :list="state.horseLamp2"
         :speed="10"
         :standTime="2000"
         :complexAm="true"
@@ -106,7 +106,7 @@
     <div class="interstroll-list">
       <nut-noticebar
         direction="vertical"
-        :list="horseLamp1"
+        :list="state.horseLamp1"
         :speed="10"
         :standTime="1000"
         :background="`rgba(251, 248, 220, 1)`"
@@ -123,59 +123,44 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, ref } from 'vue';
-import { Fabulous } from '@nutui/icons-vue-taro';
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
+const env = Taro.getEnv();
+const state = reactive({
+  horseLamp1: [
+    'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+    '爆款准点秒',
+    '买超值优惠',
+    '赢百万京豆'
+  ],
+  horseLamp2: [
+    'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+    '爆款准点秒',
+    '买超值优惠',
+    '赢百万京豆'
+  ],
+  horseLamp3: [
+    'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+    '爆款准点秒',
+    '买超值优惠',
+    '赢百万京豆'
+  ],
+  text: 'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。'
+});
 
-export default {
-  components: { Fabulous, Header },
-  setup() {
-    const env = Taro.getEnv();
-    const state = reactive({
-      horseLamp1: [
-        'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
-        '爆款准点秒',
-        '买超值优惠',
-        '赢百万京豆'
-      ],
-      horseLamp2: [
-        'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
-        '爆款准点秒',
-        '买超值优惠',
-        '赢百万京豆'
-      ],
-      horseLamp3: [
-        'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
-        '爆款准点秒',
-        '买超值优惠',
-        '赢百万京豆'
-      ],
-      text: 'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。'
-    });
+const data1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
 
-    const data1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+setTimeout(() => {
+  data1.value = ['公告栏 Noticebar', '级联选择 Cascader', '日期选择器 DatePicker', '复选按钮 CheckBox'];
+}, 2000);
 
-    setTimeout(() => {
-      data1.value = ['公告栏 Noticebar', '级联选择 Cascader', '日期选择器 DatePicker', '复选按钮 CheckBox'];
-    }, 2000);
-
-    const hello = () => {
-      console.log('hello world');
-    };
-    const go = (item: any) => {
-      console.log(item);
-    };
-
-    return {
-      ...toRefs(state),
-      hello,
-      go,
-      env,
-      data1
-    };
-  }
+const hello = () => {
+  console.log('hello world');
+};
+const go = (item: any) => {
+  console.log(item);
 };
 </script>
 
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue
index 08e8ce8499..8f1902548b 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue
@@ -5,7 +5,7 @@
     <nut-row type="flex">
       <nut-col :span="8">
         <nut-popover
-          v-model:visible="lightTheme"
+          v-model:visible="state.lightTheme"
           :list="iconItemList"
           location="bottom-start"
           @choose="chooseItem"
@@ -17,7 +17,12 @@
         </nut-popover>
       </nut-col>
       <nut-col :span="8">
-        <nut-popover v-model:visible="darkTheme" theme="dark" :list="iconItemList" custom-class="popover-demo-custom">
+        <nut-popover
+          v-model:visible="state.darkTheme"
+          theme="dark"
+          :list="iconItemList"
+          custom-class="popover-demo-custom"
+        >
           <template #reference>
             <nut-button type="primary" shape="square">暗黑风格</nut-button>
           </template>
@@ -28,7 +33,7 @@
     <h2>选项配置</h2>
     <nut-row type="flex">
       <nut-col :span="8">
-        <nut-popover v-model:visible="showIcon" theme="dark" :list="itemList" custom-class="popover-demo-custom">
+        <nut-popover v-model:visible="state.showIcon" theme="dark" :list="itemList" custom-class="popover-demo-custom">
           <template #reference>
             <nut-button type="primary" shape="square">展示图标</nut-button>
           </template>
@@ -36,7 +41,7 @@
       </nut-col>
       <nut-col :span="8">
         <nut-popover
-          v-model:visible="disableAction"
+          v-model:visible="state.disableAction"
           :list="itemListDisabled"
           location="right-start"
           custom-class="popover-demo-custom"
@@ -49,7 +54,7 @@
     </nut-row>
 
     <h2>自定义内容</h2>
-    <nut-popover v-model:visible="Customized" location="top-start" custom-class="customClass">
+    <nut-popover v-model:visible="state.Customized" location="top-start" custom-class="customClass">
       <template #reference>
         <nut-button type="primary" shape="square">自定义内容</nut-button>
       </template>
@@ -68,7 +73,7 @@
     <h2>位置自定义</h2>
     <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
 
-    <nut-popup position="bottom" v-model:visible="showPicker" custom-class="popover-demo-custom">
+    <nut-popup position="bottom" v-model:visible="state.showPicker" custom-class="popover-demo-custom">
       <nut-picker
         :columns="columns"
         title=""
@@ -86,7 +91,7 @@
     </nut-popup>
 
     <nut-popover
-      v-model:visible="customPositon"
+      v-model:visible="state.customPositon"
       targetId="pickerTarget"
       :location="curPostion"
       theme="dark"
@@ -98,7 +103,7 @@
     <h2>自定义目标元素</h2>
     <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle"> 自定义对象 </nut-button>
     <nut-popover
-      v-model:visible="customTarget"
+      v-model:visible="state.customTarget"
       targetId="popid"
       :list="iconItemList"
       location="top-start"
@@ -108,7 +113,7 @@
     <h2>自定义颜色</h2>
 
     <nut-popover
-      v-model:visible="customColor"
+      v-model:visible="state.customColor"
       :list="iconItemList"
       location="right-start"
       bgColor="#f00"
@@ -121,186 +126,158 @@
     </nut-popover>
   </div>
 </template>
-<script lang="ts">
-import { reactive, ref, toRefs, h } from 'vue';
+<script setup lang="ts">
+import { reactive, ref, h } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-import { renderIcon } from '@/packages/utils/create';
 import { Service, Notice, Location, Category, Scan2, Message, Cart2, My2 } from '@nutui/icons-vue-taro';
+const env = Taro.getEnv();
+const state = reactive({
+  showIcon: false,
+  placement: false,
+  darkTheme: false,
+  lightTheme: false,
+  Customized: false,
+  disableAction: false,
+  topLocation: false, //向上弹出
+  rightLocation: false, //向右弹出
+  leftLocation: false, //向左弹出
+  customPositon: false,
 
-export default {
-  components: {
-    Service,
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const state = reactive({
-      showIcon: false,
-      placement: false,
-      darkTheme: false,
-      lightTheme: false,
-      Customized: false,
-      disableAction: false,
-      topLocation: false, //向上弹出
-      rightLocation: false, //向右弹出
-      leftLocation: false, //向左弹出
-      customPositon: false,
-
-      showPicker: false,
-      customTarget: false,
-      customColor: false
-    });
-    const curPostion = ref('top');
+  showPicker: false,
+  customTarget: false,
+  customColor: false
+});
+const curPostion = ref('top');
 
-    const columns = ref([
-      { text: 'top', value: 'top' },
-      { text: 'top-start', value: 'top-start' },
-      { text: 'top-end', value: 'top-end' },
-      { text: 'right', value: 'right' },
-      { text: 'right-start', value: 'right-start' },
-      { text: 'right-end', value: 'right-end' },
-      { text: 'bottom', value: 'bottom' },
-      { text: 'bottom-start', value: 'bottom-start' },
-      { text: 'bottom-end', value: 'bottom-end' },
-      { text: 'left', value: 'left' },
-      { text: 'left-start', value: 'left-start' },
-      { text: 'left-end', value: 'left-end' }
-    ]);
+const columns = ref([
+  { text: 'top', value: 'top' },
+  { text: 'top-start', value: 'top-start' },
+  { text: 'top-end', value: 'top-end' },
+  { text: 'right', value: 'right' },
+  { text: 'right-start', value: 'right-start' },
+  { text: 'right-end', value: 'right-end' },
+  { text: 'bottom', value: 'bottom' },
+  { text: 'bottom-start', value: 'bottom-start' },
+  { text: 'bottom-end', value: 'bottom-end' },
+  { text: 'left', value: 'left' },
+  { text: 'left-start', value: 'left-start' },
+  { text: 'left-end', value: 'left-end' }
+]);
 
-    const iconItemList = reactive([
-      {
-        name: 'option1'
-      },
-      {
-        name: 'option2'
-      },
-      {
-        name: 'option3'
-      }
-    ]);
-
-    const positionList = reactive([
-      {
-        name: 'option1'
-      },
-      {
-        name: 'option2'
-      }
-    ]);
+const iconItemList = reactive([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  },
+  {
+    name: 'option3'
+  }
+]);
 
-    const itemList = reactive([
-      {
-        name: 'option1',
-        icon: () => {
-          return h(My2, {
-            width: '14px',
-            color: 'rgba(250, 44, 25, 1)'
-          });
-        }
-      },
-      {
-        name: 'option2',
-        icon: () => {
-          return h(Cart2, {
-            width: '14px'
-          });
-        }
-      },
-      {
-        name: 'option3',
-        icon: () => {
-          return h(Location, {
-            width: '14px'
-          });
-        }
-      }
-    ]);
+const positionList = reactive([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  }
+]);
 
-    const itemListDisabled = reactive([
-      {
-        name: 'option1',
-        disabled: true
-      },
-      {
-        name: 'option2',
-        disabled: true
-      },
-      {
-        name: 'option3'
-      }
-    ]);
+const itemList = reactive([
+  {
+    name: 'option1',
+    icon: () => {
+      return h(My2, {
+        width: '14px',
+        color: 'rgba(250, 44, 25, 1)'
+      });
+    }
+  },
+  {
+    name: 'option2',
+    icon: () => {
+      return h(Cart2, {
+        width: '14px'
+      });
+    }
+  },
+  {
+    name: 'option3',
+    icon: () => {
+      return h(Location, {
+        width: '14px'
+      });
+    }
+  }
+]);
 
-    const selfContent = reactive([
-      {
-        name: Service,
-        desc: 'option1'
-      },
-      {
-        name: Notice,
-        desc: 'option2'
-      },
-      {
-        name: Location,
-        desc: 'option3'
-      },
-      {
-        name: Category,
-        desc: 'option4'
-      },
-      {
-        name: Scan2,
-        desc: 'option5'
-      },
-      {
-        name: Message,
-        desc: 'option6'
-      }
-    ]);
+const itemListDisabled = reactive([
+  {
+    name: 'option1',
+    disabled: true
+  },
+  {
+    name: 'option2',
+    disabled: true
+  },
+  {
+    name: 'option3'
+  }
+]);
 
-    const chooseItem = (item: unknown, index: number) => {
-      console.log(item, index);
-    };
+const selfContent = reactive([
+  {
+    name: Service,
+    desc: 'option1'
+  },
+  {
+    name: Notice,
+    desc: 'option2'
+  },
+  {
+    name: Location,
+    desc: 'option3'
+  },
+  {
+    name: Category,
+    desc: 'option4'
+  },
+  {
+    name: Scan2,
+    desc: 'option5'
+  },
+  {
+    name: Message,
+    desc: 'option6'
+  }
+]);
 
-    const handlePicker = () => {
-      state.showPicker = true;
-      setTimeout(() => {
-        state.customPositon = true;
-      }, 1000);
-    };
+const chooseItem = (item: unknown, index: number) => {
+  console.log(item, index);
+};
 
-    const change = ({ selectedValue }) => {
-      curPostion.value = selectedValue[0];
-      if (state.showPicker) state.customPositon = true;
-    };
+const handlePicker = () => {
+  state.showPicker = true;
+  setTimeout(() => {
+    state.customPositon = true;
+  }, 1000);
+};
 
-    const clickCustomHandle = () => {
-      state.customTarget = !state.customTarget;
-    };
+const change = ({ selectedValue }) => {
+  curPostion.value = selectedValue[0];
+  if (state.showPicker) state.customPositon = true;
+};
 
-    const closePicker = () => {
-      state.customPositon = false;
-      state.showPicker = false;
-    };
+const clickCustomHandle = () => {
+  state.customTarget = !state.customTarget;
+};
 
-    return {
-      iconItemList,
-      itemList,
-      ...toRefs(state),
-      itemListDisabled,
-      selfContent,
-      chooseItem,
-      curPostion,
-      positionList,
-      columns,
-      change,
-      handlePicker,
-      clickCustomHandle,
-      renderIcon,
-      closePicker,
-      env
-    };
-  }
+const closePicker = () => {
+  state.customPositon = false;
+  state.showPicker = false;
 };
 </script>
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue
index 3a1bced9a3..898f4a49ba 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue
@@ -42,25 +42,12 @@
   </view>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const checked = ref(false);
-
-    return {
-      checked,
-      env
-    };
-  }
-};
+const env = Taro.getEnv();
+const checked = ref(false);
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/steps/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/steps/index.vue
index 9d7e046feb..9623470a12 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/steps/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/steps/index.vue
@@ -3,7 +3,7 @@
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <div class="steps-wrapper">
-      <nut-steps :current="current1">
+      <nut-steps :current="state.current1">
         <nut-step title="步骤一">
           1
           <template #title>步骤一</template>
@@ -17,7 +17,7 @@
     </div>
     <h2>基础用法（点状）</h2>
     <div class="steps-wrapper">
-      <nut-steps :current="current2" progress-dot>
+      <nut-steps :current="state.current2" progress-dot>
         <nut-step></nut-step>
         <nut-step></nut-step>
         <nut-step></nut-step>
@@ -28,7 +28,7 @@
     </div>
     <h2>标题和描述信息</h2>
     <div class="steps-wrapper">
-      <nut-steps :current="current3">
+      <nut-steps :current="state.current3">
         <nut-step title="步骤一" content="步骤描述">1</nut-step>
         <nut-step title="步骤二" content="步骤描述"></nut-step>
         <nut-step title="步骤三" content="步骤描述"></nut-step>
@@ -70,35 +70,24 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const state = reactive({
-      current1: 1,
-      current2: 1,
-      current3: 1,
-      current4: 1,
-      current5: 1
-    });
+const env = Taro.getEnv();
+const state = reactive({
+  current1: 1,
+  current2: 1,
+  current3: 1,
+  current4: 1,
+  current5: 1
+});
 
-    const handleStep = (params) => {
-      if (state[params] >= 3) {
-        state[params] = 1;
-      } else {
-        state[params] += 1;
-      }
-    };
-
-    return {
-      ...toRefs(state),
-      handleStep,
-      env
-    };
+const handleStep = (params) => {
+  if (state[params] >= 3) {
+    state[params] = 1;
+  } else {
+    state[params] += 1;
   }
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue
index 0044da36e3..619b5788c6 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue
@@ -3,62 +3,62 @@
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in list" :key="item">
+      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
+        <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>异步加载(3s)</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in list1" :key="item">
+      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
+        <nut-swiper-item v-for="item in state.list1" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>动态加载</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in list2" :key="item">
+      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
+        <nut-swiper-item v-for="item in state.list2" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>自定义大小</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page2" :loop="false" width="300">
-        <nut-swiper-item v-for="item in list" :key="item">
+      <nut-swiper :init-page="state.page2" :loop="false" width="300">
+        <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>自定义指示器</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page3" :loop="true" @change="change">
-        <nut-swiper-item v-for="item in list" :key="item">
+      <nut-swiper :init-page="state.page3" :loop="true" @change="change">
+        <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
         <template #page>
-          <div class="page"> {{ current }}/4 </div>
+          <div class="page"> {{ state.current }}/4 </div>
         </template>
       </nut-swiper>
     </view>
     <h2>自定义指示器(异步加载3s)</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :loop="true" @change="change1" auto-play="2000">
-        <nut-swiper-item v-for="item in list1" :key="item">
+      <nut-swiper :init-page="state.page" :loop="true" @change="change1" auto-play="2000">
+        <nut-swiper-item v-for="item in state.list1" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
         <template #page>
-          <div class="page"> {{ current1 }}/4 </div>
+          <div class="page"> {{ state.current1 }}/4 </div>
         </template>
       </nut-swiper>
     </view>
     <h2>手动切换</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :loop="true" ref="swiper">
-        <nut-swiper-item v-for="item in list" :key="item">
+      <nut-swiper :init-page="state.page" :loop="true" ref="swiper">
+        <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
@@ -74,7 +74,7 @@
     <h2>垂直方向</h2>
     <view class="demo-box">
       <nut-swiper
-        :init-page="page4"
+        :init-page="state.page4"
         :loop="true"
         auto-play="3000"
         direction="vertical"
@@ -82,7 +82,7 @@
         :pagination-visible="true"
         style="height: 150px"
       >
-        <nut-swiper-item v-for="item in list" :key="item">
+        <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
@@ -90,67 +90,52 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, onMounted, ref, Ref } from 'vue';
+<script setup lang="ts">
+import { reactive, onMounted, ref, Ref } from 'vue';
 import { Left, Right } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-
-export default {
-  setup() {
-    const env = Taro.getEnv();
-    const swiper = ref(null) as Ref;
-    const state = reactive({
-      page: 2,
-      page2: 0,
-      page3: 0,
-      page4: 0,
-      current: 1,
-      current1: 3,
-      list: [
-        'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-        'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-        'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-        'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-      ],
-      list2: [
-        'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-        'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-        'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-        'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-      ],
-      list1: [] as string[]
-    });
-    const change = (index: number) => {
-      state.current = index + 1;
-    };
-    const change1 = (index: number) => {
-      state.current1 = index + 1;
-    };
-    const handlePrev = () => {
-      swiper.value.prev();
-    };
-    const handleNext = () => {
-      swiper.value.next();
-    };
-    onMounted(() => {
-      setTimeout(() => {
-        state.list1 = state.list.slice();
-        state.list2.splice(1, 1);
-      }, 3000);
-    });
-    return {
-      ...toRefs(state),
-      swiper,
-      change,
-      change1,
-      handlePrev,
-      handleNext,
-      env
-    };
-  },
-  components: { Left, Right, Header }
+const env = Taro.getEnv();
+const swiper = ref(null) as Ref;
+const state = reactive({
+  page: 2,
+  page2: 0,
+  page3: 0,
+  page4: 0,
+  current: 1,
+  current1: 3,
+  list: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ],
+  list2: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ],
+  list1: [] as string[]
+});
+const change = (index: number) => {
+  state.current = index + 1;
+};
+const change1 = (index: number) => {
+  state.current1 = index + 1;
+};
+const handlePrev = () => {
+  swiper.value.prev();
+};
+const handleNext = () => {
+  swiper.value.next();
 };
+onMounted(() => {
+  setTimeout(() => {
+    state.list1 = state.list.slice();
+    state.list2.splice(1, 1);
+  }, 3000);
+});
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/table/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/table/index.vue
index 1636250d3c..b7c57b8555 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/table/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/table/index.vue
@@ -2,258 +2,243 @@
   <div class="demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
-    <nut-table :columns="columns1" :data="data1"></nut-table>
+    <nut-table :columns="state.columns1" :data="state.data1"></nut-table>
     <h2>是否显示边框，文字对齐</h2>
-    <nut-table :columns="columns2" :data="data1" :bordered="bordered1"></nut-table>
+    <nut-table :columns="state.columns2" :data="state.data1" :bordered="state.bordered1"></nut-table>
     <h2>显示总结栏</h2>
-    <nut-table :columns="columns3" :data="data2" :summary="summary"></nut-table>
+    <nut-table :columns="state.columns3" :data="state.data2" :summary="state.summary"></nut-table>
     <h2>条纹、明暗交替</h2>
-    <nut-table :columns="columns3" :data="data2" :striped="striped"></nut-table>
+    <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
     <h2>无数据默认展示，支持自定义</h2>
-    <nut-table :columns="columns3" :data="data3"> </nut-table>
+    <nut-table :columns="state.columns3" :data="state.data3"> </nut-table>
     <br />
-    <nut-table :columns="columns3" :data="data3">
+    <nut-table :columns="state.columns3" :data="state.data3">
       <template #nodata>
         <div class="no-data"> 这里是自定义展示 </div>
       </template>
     </nut-table>
     <h2>自定义单元格</h2>
-    <nut-table :columns="columns4" :data="data4"> </nut-table>
+    <nut-table :columns="state.columns4" :data="state.data4"> </nut-table>
     <h2>支持异步渲染(5s之后看效果)</h2>
-    <nut-table :columns="columns3" :data="data5"> </nut-table>
+    <nut-table :columns="state.columns3" :data="state.data5"> </nut-table>
     <h2>支持排序</h2>
-    <nut-table :columns="columns6" :data="data6" @sorter="handleSorter"> </nut-table>
+    <nut-table :columns="state.columns6" :data="state.data6" @sorter="handleSorter"> </nut-table>
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, onMounted, onUnmounted, h, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, onMounted, onUnmounted, h } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import Button from '@/packages/__VUE/button';
 import { TableColumnProps } from '@/packages/__VUE/table/types';
 import { Dongdong } from '@nutui/icons-vue-taro';
-export default defineComponent({
-  components: {
-    Dongdong,
-    Header
-  },
-  props: {},
-  setup() {
-    const env = Taro.getEnv();
-    const state = reactive({
-      bordered1: false,
-      striped: true,
-      columns1: [
-        {
-          title: '姓名',
-          key: 'name'
-        },
-        {
-          title: '性别',
-          key: 'sex'
-        },
-        {
-          title: '学历',
-          key: 'record'
-        }
-      ],
-      columns2: [
-        {
-          title: '姓名',
-          key: 'name',
-          align: 'center'
-        },
-        {
-          title: '性别',
-          key: 'sex'
-        },
-        {
-          title: '学历',
-          key: 'record'
-        }
-      ],
-      columns3: [
-        {
-          title: '姓名',
-          key: 'name'
-        },
-        {
-          title: '性别',
-          key: 'sex'
-        },
-        {
-          title: '学历',
-          key: 'record'
-        },
-        {
-          title: '年龄',
-          key: 'age'
-        },
-        {
-          title: '地址',
-          key: 'address'
-        }
-      ],
-      columns4: [
-        {
-          title: '姓名',
-          key: 'name',
-          align: 'center'
-        },
-        {
-          title: '性别',
-          key: 'sex'
-        },
-        {
-          title: '学历',
-          key: 'record'
-        },
-        {
-          title: '操作',
-          key: 'render'
-        }
-      ],
-      columns6: [
-        {
-          title: '姓名',
-          key: 'name',
-          align: 'center',
-          sorter: true
-        },
-        {
-          title: '性别',
-          key: 'sex'
-        },
-        {
-          title: '学历',
-          key: 'record'
-        },
-        {
-          title: '年龄',
-          key: 'age',
-          sorter: (row1: any, row2: any) => {
-            return row1.age - row2.age;
-          }
-        }
-      ],
-      data1: [
-        {
-          name: 'Tom',
-          sex: '男',
-          record: '小学'
-        },
-        {
-          name: 'Lucy',
-          sex: '女',
-          record: '本科'
-        },
-        {
-          name: 'Jack',
-          sex: '男',
-          record: '高中'
-        }
-      ],
-      data2: [
-        {
-          name: 'Tom',
-          sex: '男',
-          record: '小学',
-          age: 13,
-          address: '北京'
-        },
-        {
-          name: 'Lucy',
-          sex: '女',
-          record: '本科',
-          age: 34,
-          address: '上海'
-        },
-        {
-          name: 'Jack',
-          sex: '男',
-          record: '高中',
-          age: 4,
-          address: '杭州'
-        }
-      ],
-      data3: [],
-      data4: [
-        {
-          name: 'Tom',
-          sex: '男',
-          record: '小学',
-          render: () => {
-            return h(Button, { size: 'small', type: 'primary' }, () => 'Hello');
-          }
-        },
-        {
-          name: 'Lucy',
-          sex: '女',
-          record: '本科',
-          render: () => {
-            return h(Dongdong, { size: '14px' });
-          }
-        },
-        {
-          name: 'Jack',
-          sex: '男',
-          record: '高中',
-          render: () => {
-            return h(Button, { type: 'success', size: 'small' }, () => '编辑按钮');
-          }
-        }
-      ],
-      data5: [],
-      data6: [
-        {
-          name: 'Tom',
-          sex: '男',
-          record: '小学',
-          age: 10
-        },
-        {
-          name: 'Lucy',
-          sex: '女',
-          record: '本科',
-          age: 30
-        },
-        {
-          name: 'Jack',
-          sex: '男',
-          record: '高中',
-          age: 4
-        }
-      ],
-      timer: null as number | null,
-      summary: () => {
-        return {
-          value: '这是总结栏',
-          colspan: 5
-        };
+const env = Taro.getEnv();
+const state = reactive({
+  bordered1: false,
+  striped: true,
+  columns1: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    }
+  ],
+  columns2: [
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    }
+  ],
+  columns3: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
+    }
+  ],
+  columns4: [
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '操作',
+      key: 'render'
+    }
+  ],
+  columns6: [
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age',
+      sorter: (row1: any, row2: any) => {
+        return row1.age - row2.age;
       }
-    });
-
-    const handleSorter = (item: TableColumnProps) => {
-      console.log(JSON.stringify(item));
+    }
+  ],
+  data1: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中'
+    }
+  ],
+  data2: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 13,
+      address: '北京'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      age: 34,
+      address: '上海'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4,
+      address: '杭州'
+    }
+  ],
+  data3: [],
+  data4: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      render: () => {
+        return h(Button, { size: 'small', type: 'primary' }, () => 'Hello');
+      }
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      render: () => {
+        return h(Dongdong, { size: '14px' });
+      }
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      render: () => {
+        return h(Button, { type: 'success', size: 'small' }, () => '编辑按钮');
+      }
+    }
+  ],
+  data5: [],
+  data6: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 10
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      age: 30
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4
+    }
+  ],
+  timer: null as number | null,
+  summary: () => {
+    return {
+      value: '这是总结栏',
+      colspan: 5
     };
+  }
+});
 
-    onMounted(() => {
-      state.timer = setTimeout(() => {
-        state.data5 = state.data2.slice() as any;
-      }, 5000);
-    });
+const handleSorter = (item: TableColumnProps) => {
+  console.log(JSON.stringify(item));
+};
 
-    onUnmounted(() => {
-      state.timer = null;
-    });
+onMounted(() => {
+  state.timer = setTimeout(() => {
+    state.data5 = state.data2.slice() as any;
+  }, 5000);
+});
 
-    return {
-      ...toRefs(state),
-      handleSorter,
-      env
-    };
-  }
+onUnmounted(() => {
+  state.timer = null;
 });
 </script>
 
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
index 6233563f20..4eb0e25ad6 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
@@ -4,14 +4,14 @@
     <h2>基础用法</h2>
     <nut-cell title="点击试试">
       <template #link>
-        <nut-switch id="target7" v-model="switchValue" @click="showTour3 = true" />
+        <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
       </template>
     </nut-cell>
 
     <nut-tour
       class="nut-custom-tour nut-customword-tour"
-      v-model="showTour3"
-      :steps="steps3"
+      v-model="state.showTour3"
+      :steps="state.steps3"
       type="tile"
       location="bottom-end"
     ></nut-tour>
@@ -20,14 +20,14 @@
 
     <nut-cell title="点击试试">
       <template #link>
-        <nut-switch id="target5" v-model="switchValue" @click="showTourHandle" />
+        <nut-switch id="target5" v-model="state.switchValue" @click="showTourHandle" />
       </template>
     </nut-cell>
 
     <nut-tour
       class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-      v-model="showTour1"
-      :steps="steps1"
+      v-model="state.showTour1"
+      :steps="state.steps1"
       location="bottom-end"
       type="tile"
       bgColor="#f00"
@@ -39,7 +39,7 @@
 
     <h2>设置偏移量</h2>
 
-    <nut-cell title="点击试试" @click="showTour2 = true">
+    <nut-cell title="点击试试" @click="state.showTour2 = true">
       <template #link>
         <div class="tour-demo-img">
           <img
@@ -58,8 +58,8 @@
 
     <nut-tour
       class="nut-custom-tour nut-customword-tour"
-      v-model="showTour2"
-      :steps="steps2"
+      v-model="state.showTour2"
+      :steps="state.steps2"
       type="tile"
       bgColor="#f00"
       theme="dark"
@@ -71,14 +71,14 @@
 
     <nut-cell title="点击试试">
       <template #link>
-        <nut-switch id="target8" v-model="switchValue" @click="showTour4 = true" />
+        <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
       </template>
     </nut-cell>
 
     <nut-tour
       class="nut-custom-tour nut-customword-tour"
-      v-model="showTour4"
-      :steps="steps4"
+      v-model="state.showTour4"
+      :steps="state.steps4"
       type="tile"
       theme="dark"
       location="bottom-end"
@@ -87,13 +87,13 @@
       <view class="tour-demo-custom-content">
         <view>nutui 4.x 即将发布，敬请期待</view>
         <nut-divider direction="vertical" />
-        <view @click="showTour4 = false">知道了</view>
+        <view @click="state.showTour4 = false">知道了</view>
       </view>
     </nut-tour>
 
     <h2>步骤引导</h2>
 
-    <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
+    <nut-cell title="点击试试" @click="state.showTour = true"></nut-cell>
 
     <nut-tabbar>
       <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
@@ -104,8 +104,8 @@
 
     <nut-tour
       class="nut-customword-tour"
-      v-model="showTour"
-      :steps="steps"
+      v-model="state.showTour"
+      :steps="state.steps"
       location="top-start"
       :offset="[0, 0]"
       maskWidth="60"
@@ -113,92 +113,74 @@
     ></nut-tour>
   </div>
 </template>
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
+const env = Taro.getEnv();
+const state = reactive({
+  switchValue: false,
+  showTour: false,
+  showTour1: false,
+  showTour2: false,
+  showTour3: false,
+  showTour4: false,
+  offset: [-3, -8],
+  steps: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target1'
+    },
+    {
+      content: '支持一套代码同时开发多端小程序',
+      target: 'target2'
+    },
+    {
+      content: '基于京东APP 10.0 视觉规范',
+      target: 'target3',
+      location: 'top-end'
+    },
+    {
+      content: '支持定制主题，内置 700+ 个主题变量',
+      target: 'target4',
+      location: 'top-end'
+    }
+  ],
 
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const state = reactive({
-      switchValue: false,
-      showTour: false,
-      showTour1: false,
-      showTour2: false,
-      showTour3: false,
-      showTour4: false,
-      offset: [-3, -8],
-      steps: [
-        {
-          content: '70+ 高质量组件，覆盖移动端主流场景',
-          target: 'target1'
-        },
-        {
-          content: '支持一套代码同时开发多端小程序',
-          target: 'target2'
-        },
-        {
-          content: '基于京东APP 10.0 视觉规范',
-          target: 'target3',
-          location: 'top-end'
-        },
-        {
-          content: '支持定制主题，内置 700+ 个主题变量',
-          target: 'target4',
-          location: 'top-end'
-        }
-      ],
-
-      steps1: [
-        {
-          content: '70+ 高质量组件，覆盖移动端主流场景',
-          target: 'target5'
-        }
-      ],
-
-      steps2: [
-        {
-          content: '支持一套代码同时开发多端小程序+H5',
-          target: 'target6',
-          popoverOffset: [40, 12],
-          arrowOffset: -36
-        }
-      ],
-
-      steps3: [
-        {
-          content: '70+ 高质量组件，覆盖移动端主流场景',
-          target: 'target7'
-        }
-      ],
-
-      steps4: [
-        {
-          target: 'target8'
-        }
-      ],
+  steps1: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target5'
+    }
+  ],
+
+  steps2: [
+    {
+      content: '支持一套代码同时开发多端小程序+H5',
+      target: 'target6',
+      popoverOffset: [40, 12],
+      arrowOffset: -36
+    }
+  ],
 
-      type: 'normal'
-    });
+  steps3: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target7'
+    }
+  ],
 
-    // setTimeout(() => {
-    //   state.showTour = true;
-    // }, 1000);
+  steps4: [
+    {
+      target: 'target8'
+    }
+  ],
 
-    const showTourHandle = () => {
-      state.showTour1 = true;
-    };
+  type: 'normal'
+});
 
-    return {
-      ...toRefs(state),
-      showTourHandle,
-      env
-    };
-  }
+const showTourHandle = () => {
+  state.showTour1 = true;
 };
 </script>
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/trendarrow/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/trendarrow/index.vue
index c5ae9625bb..ec5a1087cd 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/trendarrow/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/trendarrow/index.vue
@@ -54,19 +54,11 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import { Success, Failure } from '@nutui/icons-vue-taro';
-export default defineComponent({
-  components: { Success, Failure, Header },
-  props: {},
-  setup() {
-    const env = Taro.getEnv();
-    return { env };
-  }
-});
+const env = Taro.getEnv();
 </script>
 <style lang="scss">
 .trendarrow-demo {
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
index 7198564437..7fb4bf0546 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
@@ -22,28 +22,22 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default defineComponent({
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-    const imgSrc = ref(
-      'http://img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
-    );
-    const flag = ref(false);
-    const showTextMark = () => {
-      flag.value = false;
-    };
-    const showImageMark = () => {
-      flag.value = true;
-    };
-    return { src, imgSrc, showTextMark, showImageMark, flag, env };
-  }
-});
+const env = Taro.getEnv();
+const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
+const imgSrc = ref(
+  'http://img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
+);
+const flag = ref(false);
+const showTextMark = () => {
+  flag.value = false;
+};
+const showImageMark = () => {
+  flag.value = true;
+};
 </script>
 <style lang="scss">
 .watermark-demo {
diff --git a/src/packages/__VUE/badge/demo.vue b/src/packages/__VUE/badge/demo.vue
index b51696b793..5e20765c7f 100644
--- a/src/packages/__VUE/badge/demo.vue
+++ b/src/packages/__VUE/badge/demo.vue
@@ -91,12 +91,11 @@
   </view>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('badge');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Check, Link, Download } from '@nutui/icons-vue';
+import { Check, Download } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -116,15 +115,7 @@ const initTranslate = () =>
       title5: 'Standalone'
     }
   });
-export default defineComponent({
-  components: { Check, Download, IconLink: Link },
-  setup() {
-    initTranslate();
-    return {
-      translate
-    };
-  }
-});
+initTranslate();
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/badge/doc.en-US.md b/src/packages/__VUE/badge/doc.en-US.md
index 66cf061f8d..f0791d61cc 100644
--- a/src/packages/__VUE/badge/doc.en-US.md
+++ b/src/packages/__VUE/badge/doc.en-US.md
@@ -6,7 +6,7 @@ A red dot, number or text appearing in the upper right corner of the icon or tex
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Badge } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8">
@@ -37,12 +37,12 @@ app.use(Badge);
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -52,7 +52,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="200" :max="9">
@@ -68,12 +68,12 @@ app.use(Badge);
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -83,7 +83,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
@@ -102,12 +102,12 @@ app.use(Badge);
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -117,7 +117,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge>
@@ -146,14 +146,13 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 </script>
 
 <style>
-.demo{
+.demo {
   padding: 30px 17px 0 17px;
 }
 .nut-badge {
   margin-right: 40px;
 }
 </style>
-
 ```
 
 :::
@@ -162,7 +161,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8" top="5" right="5">
@@ -178,12 +177,12 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -193,7 +192,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8"> </nut-badge>
@@ -203,12 +202,12 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -218,24 +217,24 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 ### Props
 
-| Attribute         | Description                                                   | Type    | Default   |
-| ----------------- | ------------------------------------------------------------- | ------- | --------- |
-| value             | content                                                       | string  | `-`       |
-| max               | When value is a numeric value, the maximum value              | number  | `10000`   |
-| z-index           | badge z-index                                                 | number  | `10`      |
-| dot               | whether to dot                                                | boolean | `false`   |
-| bubble(`>v4.0.0`) | whether to bubble                                             | Boolean | `false`   |
-| hidden            | whether to hide                                               | boolean | `false`   |
-| top               | Up and down offset, support unit setting, for example: 5px    | number  | `0`       |
-| right             | Left and right offset, support unit setting, for example: 5px | number  | `0`       |
-| color             | badge background color                                        | string  | `#fa2c19` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| value | content | string | `-` |
+| max | When value is a numeric value, the maximum value | number | `10000` |
+| z-index | badge z-index | number | `10` |
+| dot | whether to dot | boolean | `false` |
+| bubble(`>v4.0.0`) | whether to bubble | Boolean | `false` |
+| hidden | whether to hide | boolean | `false` |
+| top | Up and down offset, support unit setting, for example: 5px | number | `0` |
+| right | Left and right offset, support unit setting, for example: 5px | number | `0` |
+| color | badge background color | string | `#fa2c19` |
 
 ### Slots
 
-| Name    | Description  |
-| ------- | ------------ |
+| Name | Description |
+| --- | --- |
 | default | Default slot |
-| icon    | Icon slot    |
+| icon | Icon slot |
 
 ## Theming
 
@@ -243,17 +242,17 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                          | Default Value                                                                             |
-| ----------------------------- | ----------------------------------------------------------------------------------------- |
-| --nut-badge-background-color  | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
-| --nut-badge-color             | _#fff_                                                                                    |
-| --nut-badge-font-size         | _var(--nut-font-size-1)_                                                                  |
-| --nut-badge-border-radius     | _14px_                                                                                    |
-| --nut-badge-icon-padding      | _4px_                                                                                     |
-| --nut-badge-padding           | _0 5px_                                                                                   |
-| --nut-badge-content-transform | _translate(50%, -50%)_                                                                    |
-| --nut-badge-z-index           | _1_                                                                                       |
-| --nut-badge-dot-width         | _7px_                                                                                     |
-| --nut-badge-dot-height        | _7px_                                                                                     |
-| --nut-badge-dot-border-radius | _7px_                                                                                     |
-| --nut-badge-dot-padding       | _0px_                                                                                     |
+| Name | Default Value |
+| --- | --- |
+| --nut-badge-background-color | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
+| --nut-badge-color | _#fff_ |
+| --nut-badge-font-size | _var(--nut-font-size-1)_ |
+| --nut-badge-border-radius | _14px_ |
+| --nut-badge-icon-padding | _4px_ |
+| --nut-badge-padding | _0 5px_ |
+| --nut-badge-content-transform | _translate(50%, -50%)_ |
+| --nut-badge-z-index | _1_ |
+| --nut-badge-dot-width | _7px_ |
+| --nut-badge-dot-height | _7px_ |
+| --nut-badge-dot-border-radius | _7px_ |
+| --nut-badge-dot-padding | _0px_ |
diff --git a/src/packages/__VUE/badge/doc.md b/src/packages/__VUE/badge/doc.md
index e65a8ad483..c06ecb4dee 100644
--- a/src/packages/__VUE/badge/doc.md
+++ b/src/packages/__VUE/badge/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Badge } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8">
@@ -37,12 +37,12 @@ app.use(Badge);
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -52,7 +52,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="200" :max="9">
@@ -68,12 +68,12 @@ app.use(Badge);
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -83,7 +83,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
@@ -102,12 +102,12 @@ app.use(Badge);
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -117,7 +117,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge>
@@ -134,7 +134,7 @@ app.use(Badge);
     </nut-badge>
     <nut-badge>
       <template #icon>
-       <Download color="#ffffff" width="12px" height="12px"></Download>
+        <Download color="#ffffff" width="12px" height="12px"></Download>
       </template>
       <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
@@ -146,14 +146,13 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 </script>
 
 <style>
-.demo{
+.demo {
   padding: 30px 17px 0 17px;
 }
 .nut-badge {
   margin-right: 40px;
 }
 </style>
-
 ```
 
 :::
@@ -162,7 +161,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8" top="5" right="5">
@@ -178,12 +177,12 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -193,7 +192,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8"> </nut-badge>
@@ -203,12 +202,12 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -218,24 +217,24 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 ### Props
 
-| 参数              | 说明                                         | 类型    | 默认值    |
-| ----------------- | -------------------------------------------- | ------- | --------- |
-| value             | 显示的内容                                   | string  | `-`       |
-| max               | `value` 为数值时，最大值                     | number  | `10000`   |
-| z-index           | 徽标的 `z-index` 值                          | number  | `10`      |
-| dot               | 是否为小点                                   | boolean | `false`   |
-| bubble(`>v4.0.0`) | 是否为气泡形状                               | Boolean | `false`   |
-| hidden            | 是否隐藏                                     | boolean | `false`   |
-| top               | 上下偏移量，支持单位设置，可设置为：`5px` 等 | number  | `0`       |
-| right             | 左右偏移量，支持单位设置，可设置为：`5px` 等 | number  | `0`       |
-| color             | 徽标背景颜色                                 | string  | `#fa2c19` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 显示的内容 | string | `-` |
+| max | `value` 为数值时，最大值 | number | `10000` |
+| z-index | 徽标的 `z-index` 值 | number | `10` |
+| dot | 是否为小点 | boolean | `false` |
+| bubble(`>v4.0.0`) | 是否为气泡形状 | Boolean | `false` |
+| hidden | 是否隐藏 | boolean | `false` |
+| top | 上下偏移量，支持单位设置，可设置为：`5px` 等 | number | `0` |
+| right | 左右偏移量，支持单位设置，可设置为：`5px` 等 | number | `0` |
+| color | 徽标背景颜色 | string | `#fa2c19` |
 
 ### Slots
 
-| 名称    | 说明             |
-| ------- | ---------------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 徽标包裹的子元素 |
-| icon    | 徽标自定义       |
+| icon | 徽标自定义 |
 
 ## 主题定制
 
@@ -243,17 +242,17 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                          | 默认值                                                                                    |
-| ----------------------------- | ----------------------------------------------------------------------------------------- |
-| --nut-badge-background-color  | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
-| --nut-badge-color             | _#fff_                                                                                    |
-| --nut-badge-font-size         | _var(--nut-font-size-1)_                                                                  |
-| --nut-badge-border-radius     | _14px_                                                                                    |
-| --nut-badge-icon-padding      | _4px_                                                                                     |
-| --nut-badge-padding           | _0 5px_                                                                                   |
-| --nut-badge-content-transform | _translate(50%, -50%)_                                                                    |
-| --nut-badge-z-index           | _1_                                                                                       |
-| --nut-badge-dot-width         | _7px_                                                                                     |
-| --nut-badge-dot-height        | _7px_                                                                                     |
-| --nut-badge-dot-border-radius | _7px_                                                                                     |
-| --nut-badge-dot-padding       | _0px_                                                                                     |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-badge-background-color | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
+| --nut-badge-color | _#fff_ |
+| --nut-badge-font-size | _var(--nut-font-size-1)_ |
+| --nut-badge-border-radius | _14px_ |
+| --nut-badge-icon-padding | _4px_ |
+| --nut-badge-padding | _0 5px_ |
+| --nut-badge-content-transform | _translate(50%, -50%)_ |
+| --nut-badge-z-index | _1_ |
+| --nut-badge-dot-width | _7px_ |
+| --nut-badge-dot-height | _7px_ |
+| --nut-badge-dot-border-radius | _7px_ |
+| --nut-badge-dot-padding | _0px_ |
diff --git a/src/packages/__VUE/badge/doc.taro.md b/src/packages/__VUE/badge/doc.taro.md
index cb22fe36be..6e874bec5d 100644
--- a/src/packages/__VUE/badge/doc.taro.md
+++ b/src/packages/__VUE/badge/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Badge } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8">
@@ -37,12 +37,12 @@ app.use(Badge);
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -52,7 +52,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="200" :max="9">
@@ -68,12 +68,12 @@ app.use(Badge);
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -83,7 +83,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
@@ -102,12 +102,12 @@ app.use(Badge);
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -117,7 +117,7 @@ app.use(Badge);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge>
@@ -134,7 +134,7 @@ app.use(Badge);
     </nut-badge>
     <nut-badge>
       <template #icon>
-       <Download color="#ffffff" size="12px"></Download>
+        <Download color="#ffffff" size="12px"></Download>
       </template>
       <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
@@ -146,14 +146,13 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 </script>
 
 <style>
-.demo{
+.demo {
   padding: 30px 17px 0 17px;
 }
 .nut-badge {
   margin-right: 40px;
 }
 </style>
-
 ```
 
 :::
@@ -162,7 +161,7 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8" top="5" right="5">
@@ -178,12 +177,12 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -193,7 +192,7 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <nut-badge :value="8"> </nut-badge>
@@ -203,12 +202,12 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 </template>
 
 <style>
-  .demo {
-    padding: 30px 17px 0 17px;
-  }
-  .nut-badge {
-    margin-right: 40px;
-  }
+.demo {
+  padding: 30px 17px 0 17px;
+}
+.nut-badge {
+  margin-right: 40px;
+}
 </style>
 ```
 
@@ -218,24 +217,24 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 
 ### Props
 
-| 参数              | 说明                                         | 类型    | 默认值    |
-| ----------------- | -------------------------------------------- | ------- | --------- |
-| value             | 显示的内容                                   | string  | `-`       |
-| max               | `value` 为数值时，最大值                     | number  | `10000`   |
-| z-index           | 徽标的 `z-index` 值                          | number  | `10`      |
-| dot               | 是否为小点                                   | boolean | `false`   |
-| bubble(`>v4.0.0`) | 是否为气泡形状                               | Boolean | `false`   |
-| hidden            | 是否隐藏                                     | boolean | `false`   |
-| top               | 上下偏移量，支持单位设置，可设置为：`5px` 等 | number  | `0`       |
-| right             | 左右偏移量，支持单位设置，可设置为：`5px` 等 | number  | `0`       |
-| color             | 徽标背景颜色                                 | string  | `#fa2c19` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 显示的内容 | string | `-` |
+| max | `value` 为数值时，最大值 | number | `10000` |
+| z-index | 徽标的 `z-index` 值 | number | `10` |
+| dot | 是否为小点 | boolean | `false` |
+| bubble(`>v4.0.0`) | 是否为气泡形状 | Boolean | `false` |
+| hidden | 是否隐藏 | boolean | `false` |
+| top | 上下偏移量，支持单位设置，可设置为：`5px` 等 | number | `0` |
+| right | 左右偏移量，支持单位设置，可设置为：`5px` 等 | number | `0` |
+| color | 徽标背景颜色 | string | `#fa2c19` |
 
 ### Slots
 
-| 名称    | 说明             |
-| ------- | ---------------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 徽标包裹的子元素 |
-| icon    | 徽标自定义       |
+| icon | 徽标自定义 |
 
 ## 主题定制
 
@@ -243,17 +242,17 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                          | 默认值                                                                                    |
-| ----------------------------- | ----------------------------------------------------------------------------------------- |
-| --nut-badge-background-color  | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
-| --nut-badge-color             | _#fff_                                                                                    |
-| --nut-badge-font-size         | _var(--nut-font-size-1)_                                                                  |
-| --nut-badge-border-radius     | _14px_                                                                                    |
-| --nut-badge-icon-padding      | _4px_                                                                                     |
-| --nut-badge-padding           | _0 5px_                                                                                   |
-| --nut-badge-content-transform | _translate(50%, -50%)_                                                                    |
-| --nut-badge-z-index           | _1_                                                                                       |
-| --nut-badge-dot-width         | _7px_                                                                                     |
-| --nut-badge-dot-height        | _7px_                                                                                     |
-| --nut-badge-dot-border-radius | _7px_                                                                                     |
-| --nut-badge-dot-padding       | _0px_                                                                                     |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-badge-background-color | _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ |
+| --nut-badge-color | _#fff_ |
+| --nut-badge-font-size | _var(--nut-font-size-1)_ |
+| --nut-badge-border-radius | _14px_ |
+| --nut-badge-icon-padding | _4px_ |
+| --nut-badge-padding | _0 5px_ |
+| --nut-badge-content-transform | _translate(50%, -50%)_ |
+| --nut-badge-z-index | _1_ |
+| --nut-badge-dot-width | _7px_ |
+| --nut-badge-dot-height | _7px_ |
+| --nut-badge-dot-border-radius | _7px_ |
+| --nut-badge-dot-padding | _0px_ |
diff --git a/src/packages/__VUE/collapse/demo.vue b/src/packages/__VUE/collapse/demo.vue
index 1774bcd363..60ef998da1 100644
--- a/src/packages/__VUE/collapse/demo.vue
+++ b/src/packages/__VUE/collapse/demo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo full">
     <h2>{{ translate('basic1') }}</h2>
-    <nut-collapse v-model="active1" @change="change">
+    <nut-collapse v-model="data.active1" @change="change">
       <nut-collapse-item :name="1">
         <template #title>
           {{ translate('title1') }}
@@ -21,7 +21,7 @@
       <nut-collapse-item :title="translate('title2')" :name="2"> {{ translate('desc4') }} </nut-collapse-item>
     </nut-collapse> -->
     <h2>{{ translate('basic3') }}</h2>
-    <nut-collapse v-model="active2" accordion @change="change">
+    <nut-collapse v-model="data.active2" accordion @change="change">
       <nut-collapse-item :title="translate('title1')" :name="1"> {{ translate('desc5') }} </nut-collapse-item>
       <nut-collapse-item :title="translate('title2')" :name="2" :value="translate('subtitle')">
         {{ translate('desc6') }}
@@ -31,7 +31,7 @@
       </nut-collapse-item>
     </nut-collapse>
     <h2>{{ translate('basic4') }}</h2>
-    <nut-collapse v-model="active3" :accordion="true">
+    <nut-collapse v-model="data.active3" :accordion="true">
       <nut-collapse-item :title="translate('title1')" :name="1" :icon="Notice">
         <template #value> {{ translate('title4') }} </template>
         {{ translate('desc8') }}
@@ -50,7 +50,7 @@
       </nut-collapse-item>
     </nut-collapse> -->
     <h2>{{ translate('basic6') }}</h2>
-    <nut-collapse v-model="active6" :accordion="true">
+    <nut-collapse v-model="data.active6" :accordion="true">
       <nut-collapse-item :title="translate('title1')" :name="1">
         <template #extra>{{ translate('title5') }}</template>
         {{ translate('desc1') }}
@@ -61,8 +61,8 @@
     </nut-collapse>
   </div>
 </template>
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { Notice, Follow } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('collapse');
@@ -123,33 +123,22 @@ const initTranslate = () =>
       subtitle: 'subtitle'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const data = reactive({
-      active1: [1, 2],
-      active2: 1,
-      active3: 1,
-      active4: 1,
-      active5: 1,
-      active6: 1,
-      title1: '标题1',
-      title2: '标题2',
-      title3: '标题3',
-      subTitle: '副标题'
-    });
-    const change = (current: any, name: string | number, status: boolean) => {
-      console.log(current, name, status);
-    };
-    return {
-      Notice,
-      Follow,
-      translate,
-      change,
-      ...toRefs(data)
-    };
-  }
+initTranslate();
+const data = reactive({
+  active1: [1, 2],
+  active2: 1,
+  active3: 1,
+  active4: 1,
+  active5: 1,
+  active6: 1,
+  title1: '标题1',
+  title2: '标题2',
+  title3: '标题3',
+  subTitle: '副标题'
 });
+const change = (current: any, name: string | number, status: boolean) => {
+  console.log(current, name, status);
+};
 </script>
 <style lang="scss">
 .nut-collapse-item .collapse-extraWrapper .collapse-extraRender {
diff --git a/src/packages/__VUE/collapse/doc.en-US.md b/src/packages/__VUE/collapse/doc.en-US.md
index 0738349131..9ca035a72c 100644
--- a/src/packages/__VUE/collapse/doc.en-US.md
+++ b/src/packages/__VUE/collapse/doc.en-US.md
@@ -6,7 +6,7 @@ Place the content in multiple folded panels, and click the panel title to expand
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Collapse, CollapseItem } from '@nutui/nutui';
 
@@ -21,41 +21,32 @@ Control the expanded panel list through 'V-model', and 'activenames' is in array
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeNames" @change="onChange">
     <nut-collapse-item :name="1">
-      <template #title> {{title1}} </template>
+      <template #title> {{ title.title1 }} </template>
       Nutui is a lightweight Vue component library with JD style
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
+    <nut-collapse-item :title="title.title2" :name="2">
       The product has been comprehensively upgraded in terms of function, experience, ease of use and flexibility!
     </nut-collapse-item>
-    <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
+    <nut-collapse-item :title="title.title3" :name="3" disabled> </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  export default {
-    setup() {
-      const activeNames = ref([1, 2]);
-      const title = reactive({
-        title1: 'title1',
-        title2: 'title2',
-        title3: 'title3'
-      });
-      const onChange = (modelValue, currName, status) => {
-        // currName: collapse-item name
-        // status: true open, false close
-        console.log(modelValue, currName, status);
-      };
-      return {
-        onChange,
-        activeNames,
-        ...toRefs(title)
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const activeNames = ref([1, 2]);
+const title = reactive({
+  title1: 'title1',
+  title2: 'title2',
+  title3: 'title3'
+});
+const onChange = (modelValue, currName, status) => {
+  // currName: collapse-item name
+  // status: true open, false close
+  console.log(modelValue, currName, status);
+};
 </script>
 ```
 
@@ -67,39 +58,30 @@ You can set accordion mode through 'accordion', and expand up to one panel. At t
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1" :value="subTitle">
+    <nut-collapse-item :title="title.title1" :name="1" :value="subTitle">
       Build scenes based on JD design language system
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
+    <nut-collapse-item :title="title.title2" :name="2">
       Improve the modularity and generality of the boundary
     </nut-collapse-item>
-    <nut-collapse-item :title="title3" :name="3">
+    <nut-collapse-item :title="title.title3" :name="3">
       It adopts combinatorial API composition syntax to reconstruct, with clear structure and modular function
     </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-import { reactive, ref, toRefs } from 'vue';
-export default {
-  setup() {
-    const activeName = ref(1);
-    const subTitle = 'subtitle';
-    const title = reactive({
-      title1: 'title1',
-      title2: 'title2',
-      title3: 'title3',
-    })
-    return {
-      activeName,
-      subTitle,
-      ...toRefs(title)
-    };
-  }
-}
-</>
+<script setup>
+import { reactive, ref } from 'vue';
+const activeName = ref(1);
+const subTitle = 'subtitle';
+const title = reactive({
+  title1: 'title1',
+  title2: 'title2',
+  title3: 'title3'
+});
+</script>
 ```
 
 :::
@@ -110,36 +92,26 @@ Set custom icons through icon and rotate to set the rotation angle of icons
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1" :icon="Notice">
+    <nut-collapse-item :title="title.title1" :name="1" :icon="Notice">
       <template #value> text test </template>
       NUTUI3. 0 rethink its internal consistency and composability
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" :icon="Follow">
+    <nut-collapse-item :title="title.title2" :name="2" :icon="Follow">
       Improve the efficiency of production research output docking and reduce the output workload
     </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  import { Notice, Follow } from '@nutui/icons-vue';
-  export default {
-    setup() {
-      const activeName = ref(1);
-      const title = reactive({
-        title1: 'title1',
-        title2: 'title2'
-      });
-      return {
-        activeName,
-        ...toRefs(title),
-        Notice,
-        Follow
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+import { Notice, Follow } from '@nutui/icons-vue';
+const activeName = ref(1);
+const title = reactive({
+  title1: 'title1',
+  title2: 'title2'
+});
 </script>
 ```
 
@@ -151,33 +123,25 @@ Set content through slot: extra
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1">
+    <nut-collapse-item :title="title.title1" :name="1">
       <template #extra>fixed content</template>
       Nutui is a lightweight Vue component library with JD style
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
+    <nut-collapse-item :title="title.title2" :name="2">
       The product has been comprehensively upgraded in terms of function, experience, ease of use and flexibility!
     </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  export default {
-    setup() {
-      const activeName = ref(1);
-      const title = reactive({
-        title1: 'title1',
-        title2: 'title2'
-      });
-      return {
-        activeName,
-        ...toRefs(title)
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const activeName = ref(1);
+const title = reactive({
+  title1: 'title1',
+  title2: 'title2'
+});
 </script>
 ```
 
@@ -187,37 +151,37 @@ Set content through slot: extra
 
 ### Collapse Props
 
-| Attribute | Description                            | Type                                                                         | Default |
-| --------- | -------------------------------------- | ---------------------------------------------------------------------------- | ------- |
-| v-model   | `name` of the currently expanded panel | accordion-mode: string \| number<br>non-accordion-mode: (string \| number)[] | `-`     |
-| accordion | Whether to enable accordion mode       | boolean                                                                      | `false` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | `name` of the currently expanded panel | accordion-mode: string \| number<br>non-accordion-mode: (string \| number)[] | `-` |
+| accordion | Whether to enable accordion mode | boolean | `false` |
 
 ### CollapseItem Props
 
-| Attribute | Description                                                                                              | Type             | Default |
-| --------- | -------------------------------------------------------------------------------------------------------- | ---------------- | ------- |
-| name      | unique identifier, required                                                                              | string \| number | `-1`    |
-| title     | The content on the left side of the title bar, supports slot input (`props` input has a higher priority) | string           | `-`     |
-| value     | The content on the right side of the title bar, support slot input (`props` input has a higher priority) | string           | `-`     |
-| icon      | The icon component on the left side of the title bar, equivalent to the `nutui-icon` component           | -                | `-`     |
-| label     | title bar description                                                                                    | number \| string | `-`     |
-| rotate    | Click the rotation angle of folding and unfolding, effective in the custom icon mode                     | string \| number | `180`   |
-| disabled  | whether the title bar is disabled                                                                        | boolean          | `false` |
-| border    | Whether to display borders                                                                               | boolean          | `true`  |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| name | unique identifier, required | string \| number | `-1` |
+| title | The content on the left side of the title bar, supports slot input (`props` input has a higher priority) | string | `-` |
+| value | The content on the right side of the title bar, support slot input (`props` input has a higher priority) | string | `-` |
+| icon | The icon component on the left side of the title bar, equivalent to the `nutui-icon` component | - | `-` |
+| label | title bar description | number \| string | `-` |
+| rotate | Click the rotation angle of folding and unfolding, effective in the custom icon mode | string \| number | `180` |
+| disabled | whether the title bar is disabled | boolean | `false` |
+| border | Whether to display borders | boolean | `true` |
 
 ### CollapseItem Slots
 
-| Name        | Description                                    |
-| ----------- | ---------------------------------------------- |
-| title       | Content slot on the left side of the title bar |
-| alue        | Right content slot of the title bar            |
-| extra       | Set fixed content under the title (no folding) |
-| icon`4.2.0` | Set a custom icon                              |
+| Name | Description |
+| --- | --- |
+| title | Content slot on the left side of the title bar |
+| alue | Right content slot of the title bar |
+| extra | Set fixed content under the title (no folding) |
+| icon`4.2.0` | Set a custom icon |
 
 ### Events
 
-| Event  | Description                     | Callback parameter               |
-| ------ | ------------------------------- | -------------------------------- |
+| Event | Description | Callback parameter |
+| --- | --- | --- |
 | change | Triggered when switching panels | `(modelValue, currName, status)` |
 
 ## 主题定制
@@ -226,18 +190,18 @@ Set content through slot: extra
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                            | 默认值                   |
-| ----------------------------------------------- | ------------------------ |
-| --nut-collapse-item-padding                     | _13px 36px 13px 26px_    |
-| --nut-collapse-item-color                       | _#666666_                |
-| --nut-collapse-item-disabled-color              | _#c8c9cc_                |
-| --nut-collapse-item-icon-color                  | _#666666_                |
-| --nut-collapse-item-font-size                   | _var(--nut-font-size-2)_ |
-| --nut-collapse-item-line-height                 | _24px_                   |
-| --nut-collapse-item-sub-title-color             | _#666666_                |
-| --nut-collapse-wrapper-content-padding          | _12px 26px_              |
-| --nut-collapse-wrapper-empty-content-padding    | _0 26px_                 |
-| --nut-collapse-wrapper-content-color            | _#666666_                |
-| --nut-collapse-wrapper-content-font-size        | _var(--nut-font-size-2)_ |
-| --nut-collapse-wrapper-content-line-height      | _1.5_                    |
-| --nut-collapse-wrapper-content-background-color | _var(--nut-white)_       |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-collapse-item-padding | _13px 36px 13px 26px_ |
+| --nut-collapse-item-color | _#666666_ |
+| --nut-collapse-item-disabled-color | _#c8c9cc_ |
+| --nut-collapse-item-icon-color | _#666666_ |
+| --nut-collapse-item-font-size | _var(--nut-font-size-2)_ |
+| --nut-collapse-item-line-height | _24px_ |
+| --nut-collapse-item-sub-title-color | _#666666_ |
+| --nut-collapse-wrapper-content-padding | _12px 26px_ |
+| --nut-collapse-wrapper-empty-content-padding | _0 26px_ |
+| --nut-collapse-wrapper-content-color | _#666666_ |
+| --nut-collapse-wrapper-content-font-size | _var(--nut-font-size-2)_ |
+| --nut-collapse-wrapper-content-line-height | _1.5_ |
+| --nut-collapse-wrapper-content-background-color | _var(--nut-white)_ |
diff --git a/src/packages/__VUE/collapse/doc.md b/src/packages/__VUE/collapse/doc.md
index 996ad7874a..1279c8070c 100644
--- a/src/packages/__VUE/collapse/doc.md
+++ b/src/packages/__VUE/collapse/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Collapse, CollapseItem } from '@nutui/nutui';
 
@@ -20,41 +20,32 @@ app.use(CollapseItem);
 通过`v-model`控制展开的面板列表，`activeNames`为数组格式
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeNames" @change="onChange">
     <nut-collapse-item :name="1">
-      <template #title> {{title1}} </template>
+      <template #title> {{ title.title1 }} </template>
       NutUI是一套拥有京东风格的轻量级的 Vue 组件库
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
+    <nut-collapse-item :title="title.title2" :name="2">
       在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
     </nut-collapse-item>
-    <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
+    <nut-collapse-item :title="title.title3" :name="3" disabled> </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  export default {
-    setup() {
-      const activeNames = ref([1, 2]);
-      const title = reactive({
-        title1: '标题1',
-        title2: '标题2',
-        title3: '标题3'
-      });
-      const onChange = (modelValue, currName, status) => {
-        // currName: 当前操作的 collapse-item 的 name
-        // status: true 打开 false 关闭
-        console.log(modelValue, currName, status);
-      };
-      return {
-        onChange,
-        activeNames,
-        ...toRefs(title)
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const activeNames = ref([1, 2]);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2',
+  title3: '标题3'
+});
+const onChange = (modelValue, currName, status) => {
+  // currName: 当前操作的 collapse-item 的 name
+  // status: true 打开 false 关闭
+  console.log(modelValue, currName, status);
+};
 </script>
 ```
 
@@ -66,34 +57,27 @@ app.use(CollapseItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1" :value="subTitle"> 基于京东设计语言体系，构建场景 </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2"> 提高界⾯的模块化通用程度 </nut-collapse-item>
-    <nut-collapse-item :title="title3" :name="3">
+    <nut-collapse-item :title="title.title1" :name="1" :value="subTitle">
+      基于京东设计语言体系，构建场景
+    </nut-collapse-item>
+    <nut-collapse-item :title="title.title2" :name="2"> 提高界⾯的模块化通用程度 </nut-collapse-item>
+    <nut-collapse-item :title="title.title3" :name="3">
       采用组合式 API Composition 语法重构，结构清晰，功能模块化
     </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  export default {
-    setup() {
-      const activeName = ref(1);
-      const subTitle = '副标题';
-      const title = reactive({
-        title1: '标题1',
-        title2: '标题2',
-        title3: '标题3'
-      });
-      return {
-        activeName,
-        subTitle,
-        ...toRefs(title)
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const activeName = ref(1);
+const subTitle = '副标题';
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2',
+  title3: '标题3'
+});
 </script>
 ```
 
@@ -105,36 +89,26 @@ app.use(CollapseItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1" :icon="Notice">
+    <nut-collapse-item :title="title.title1" :name="1" :icon="Notice">
       <template #value> 文本测试 </template>
       NUTUI3.0重新思考其内在的一致性和可组合性
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" :icon="Follow">
+    <nut-collapse-item :title="title.title2" :name="2" :icon="Follow">
       提⾼产研输出对接的效率，降低输出工作量
     </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  import { Notice, Follow } from '@nutui/icons-vue';
-  export default {
-    setup() {
-      const activeName = ref(1);
-      const title = reactive({
-        title1: '标题1',
-        title2: '标题2'
-      });
-      return {
-        activeName,
-        ...toRefs(title),
-        Notice,
-        Follow
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+import { Notice, Follow } from '@nutui/icons-vue';
+const activeName = ref(1);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2'
+});
 </script>
 ```
 
@@ -145,33 +119,25 @@ app.use(CollapseItem);
 通过 slot:extra 设置内容
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1">
+    <nut-collapse-item :title="title.title1" :name="1">
       <template #extra>固定内容</template>
       NutUI是一套拥有京东风格的轻量级的 Vue 组件库
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
+    <nut-collapse-item :title="title.title2" :name="2">
       在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
     </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  export default {
-    setup() {
-      const activeName = ref(1);
-      const title = reactive({
-        title1: '标题1',
-        title2: '标题2'
-      });
-      return {
-        activeName,
-        ...toRefs(title)
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const activeName = ref(1);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2'
+});
 </script>
 ```
 
@@ -181,37 +147,37 @@ app.use(CollapseItem);
 
 ### Collapse Props
 
-| 参数      | 说明                  | 类型                                                               | 默认值  |
-| --------- | --------------------- | ------------------------------------------------------------------ | ------- |
-| v-model   | 当前展开面板的 `name` | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | `-`     |
-| accordion | 是否开启手风琴模式    | boolean                                                            | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前展开面板的 `name` | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | `-` |
+| accordion | 是否开启手风琴模式 | boolean | `false` |
 
 ### CollapseItem Props
 
-| 参数     | 说明                                                     | 类型             | 默认值  |
-| -------- | -------------------------------------------------------- | ---------------- | ------- |
-| name     | 唯一标识符，必填                                         | string \| number | `-1`    |
-| title    | 标题栏左侧内容，支持插槽传入（`props` 传入的优先级更高） | string           | `-`     |
-| value    | 标题栏右侧内容，支持插槽传入（`props` 传入的优先级更高） | string           | `-`     |
-| icon     | 标题栏左侧图标组件，等同于 `nutui-icon` 组件             | -                | `-`     |
-| label    | 标题栏描述信息                                           | number \| string | `-`     |
-| rotate   | 点击折叠和展开的旋转角度,在自定义图标模式下生效          | string \| number | `180`   |
-| disabled | 标题栏是否禁用                                           | boolean          | `false` |
-| border   | 是否显示边框                                             | boolean          | `true`  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 唯一标识符，必填 | string \| number | `-1` |
+| title | 标题栏左侧内容，支持插槽传入（`props` 传入的优先级更高） | string | `-` |
+| value | 标题栏右侧内容，支持插槽传入（`props` 传入的优先级更高） | string | `-` |
+| icon | 标题栏左侧图标组件，等同于 `nutui-icon` 组件 | - | `-` |
+| label | 标题栏描述信息 | number \| string | `-` |
+| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \| number | `180` |
+| disabled | 标题栏是否禁用 | boolean | `false` |
+| border | 是否显示边框 | boolean | `true` |
 
 ### CollapseItem Slots
 
-| 名称        | 说明                         |
-| ----------- | ---------------------------- |
-| title       | 标题栏左侧内容插槽           |
-| value       | 标题栏右侧内容插槽           |
-| extra       | 设置标题下固定内容（不折叠） |
-| icon`4.2.0` | 设置自定义图标               |
+| 名称 | 说明 |
+| --- | --- |
+| title | 标题栏左侧内容插槽 |
+| value | 标题栏右侧内容插槽 |
+| extra | 设置标题下固定内容（不折叠） |
+| icon`4.2.0` | 设置自定义图标 |
 
 ### Events
 
-| 事件名 | 说明           | 回调参数                         |
-| ------ | -------------- | -------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 切换面板时触发 | `(modelValue, currName, status)` |
 
 ## 主题定制
@@ -220,18 +186,18 @@ app.use(CollapseItem);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                            | 默认值                   |
-| ----------------------------------------------- | ------------------------ |
-| --nut-collapse-item-padding                     | _13px 36px 13px 26px_    |
-| --nut-collapse-item-color                       | _#666666_                |
-| --nut-collapse-item-disabled-color              | _#c8c9cc_                |
-| --nut-collapse-item-icon-color                  | _#666666_                |
-| --nut-collapse-item-font-size                   | _var(--nut-font-size-2)_ |
-| --nut-collapse-item-line-height                 | _24px_                   |
-| --nut-collapse-item-sub-title-color             | _#666666_                |
-| --nut-collapse-wrapper-content-padding          | _12px 26px_              |
-| --nut-collapse-wrapper-empty-content-padding    | _0 26px_                 |
-| --nut-collapse-wrapper-content-color            | _#666666_                |
-| --nut-collapse-wrapper-content-font-size        | _var(--nut-font-size-2)_ |
-| --nut-collapse-wrapper-content-line-height      | _1.5_                    |
-| --nut-collapse-wrapper-content-background-color | _var(--nut-white)_       |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-collapse-item-padding | _13px 36px 13px 26px_ |
+| --nut-collapse-item-color | _#666666_ |
+| --nut-collapse-item-disabled-color | _#c8c9cc_ |
+| --nut-collapse-item-icon-color | _#666666_ |
+| --nut-collapse-item-font-size | _var(--nut-font-size-2)_ |
+| --nut-collapse-item-line-height | _24px_ |
+| --nut-collapse-item-sub-title-color | _#666666_ |
+| --nut-collapse-wrapper-content-padding | _12px 26px_ |
+| --nut-collapse-wrapper-empty-content-padding | _0 26px_ |
+| --nut-collapse-wrapper-content-color | _#666666_ |
+| --nut-collapse-wrapper-content-font-size | _var(--nut-font-size-2)_ |
+| --nut-collapse-wrapper-content-line-height | _1.5_ |
+| --nut-collapse-wrapper-content-background-color | _var(--nut-white)_ |
diff --git a/src/packages/__VUE/collapse/doc.taro.md b/src/packages/__VUE/collapse/doc.taro.md
index 9fbb3343d0..6ec5ca1e6a 100644
--- a/src/packages/__VUE/collapse/doc.taro.md
+++ b/src/packages/__VUE/collapse/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Collapse, CollapseItem } from '@nutui/nutui-taro';
 
@@ -20,41 +20,32 @@ app.use(CollapseItem);
 通过`v-model`控制展开的面板列表，`activeNames`为数组格式
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeNames" @change="onChange">
     <nut-collapse-item :name="1">
-      <template #title> {{title1}} </template>
+      <template #title> {{ title.title1 }} </template>
       NutUI是一套拥有京东风格的轻量级的 Vue 组件库
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
+    <nut-collapse-item :title="title.title2" :name="2">
       在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
     </nut-collapse-item>
-    <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
+    <nut-collapse-item :title="title.title3" :name="3" disabled> </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  export default {
-    setup() {
-      const activeNames = ref([1, 2]);
-      const title = reactive({
-        title1: '标题1',
-        title2: '标题2',
-        title3: '标题3'
-      });
-      const onChange = (modelValue, currName, status) => {
-        // currName: 当前操作的 collapse-item 的 name
-        // status: true 打开 false 关闭
-        console.log(modelValue, currName, status);
-      };
-      return {
-        onChange,
-        activeNames,
-        ...toRefs(title)
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const activeNames = ref([1, 2]);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2',
+  title3: '标题3'
+});
+const onChange = (modelValue, currName, status) => {
+  // currName: 当前操作的 collapse-item 的 name
+  // status: true 打开 false 关闭
+  console.log(modelValue, currName, status);
+};
 </script>
 ```
 
@@ -66,34 +57,27 @@ app.use(CollapseItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1" :value="subTitle"> 基于京东设计语言体系，构建场景 </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2"> 提高界⾯的模块化通用程度 </nut-collapse-item>
-    <nut-collapse-item :title="title3" :name="3">
+    <nut-collapse-item :title="title.title1" :name="1" :value="subTitle">
+      基于京东设计语言体系，构建场景
+    </nut-collapse-item>
+    <nut-collapse-item :title="title.title2" :name="2"> 提高界⾯的模块化通用程度 </nut-collapse-item>
+    <nut-collapse-item :title="title.title3" :name="3">
       采用组合式 API Composition 语法重构，结构清晰，功能模块化
     </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  export default {
-    setup() {
-      const activeName = ref(1);
-      const subTitle = '副标题';
-      const title = reactive({
-        title1: '标题1',
-        title2: '标题2',
-        title3: '标题3'
-      });
-      return {
-        activeName,
-        subTitle,
-        ...toRefs(title)
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const activeName = ref(1);
+const subTitle = '副标题';
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2',
+  title3: '标题3'
+});
 </script>
 ```
 
@@ -105,36 +89,26 @@ app.use(CollapseItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1" :icon="Notice">
+    <nut-collapse-item :title="title.title1" :name="1" :icon="Notice">
       <template #value> 文本测试 </template>
       NUTUI3.0重新思考其内在的一致性和可组合性
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" :icon="Follow">
+    <nut-collapse-item :title="title.title2" :name="2" :icon="Follow">
       提⾼产研输出对接的效率，降低输出工作量
     </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  import { Notice, Follow } from '@nutui/icons-vue-taro';
-  export default {
-    setup() {
-      const activeName = ref(1);
-      const title = reactive({
-        title1: '标题1',
-        title2: '标题2'
-      });
-      return {
-        activeName,
-        ...toRefs(title),
-        Notice,
-        Follow
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+import { Notice, Follow } from '@nutui/icons-vue';
+const activeName = ref(1);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2'
+});
 </script>
 ```
 
@@ -145,33 +119,25 @@ app.use(CollapseItem);
 通过 slot:extra 设置内容
 :::demo
 
-```html
+```vue
 <template>
   <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1">
+    <nut-collapse-item :title="title.title1" :name="1">
       <template #extra>固定内容</template>
       NutUI是一套拥有京东风格的轻量级的 Vue 组件库
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
+    <nut-collapse-item :title="title.title2" :name="2">
       在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
     </nut-collapse-item>
   </nut-collapse>
 </template>
-<script>
-  import { reactive, ref, toRefs } from 'vue';
-  export default {
-    setup() {
-      const activeName = ref(1);
-      const title = reactive({
-        title1: '标题1',
-        title2: '标题2'
-      });
-      return {
-        activeName,
-        ...toRefs(title)
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const activeName = ref(1);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2'
+});
 </script>
 ```
 
@@ -181,57 +147,57 @@ app.use(CollapseItem);
 
 ### Collapse Props
 
-| 参数      | 说明                  | 类型                                                               | 默认值  |
-| --------- | --------------------- | ------------------------------------------------------------------ | ------- |
-| v-model   | 当前展开面板的 `name` | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | `-`     |
-| accordion | 是否开启手风琴模式    | boolean                                                            | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前展开面板的 `name` | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | `-` |
+| accordion | 是否开启手风琴模式 | boolean | `false` |
 
 ### CollapseItem Props
 
-| 参数     | 说明                                                     | 类型             | 默认值  |
-| -------- | -------------------------------------------------------- | ---------------- | ------- |
-| name     | 唯一标识符，必填                                         | string \| number | `-1`    |
-| title    | 标题栏左侧内容，支持插槽传入（`props` 传入的优先级更高） | string           | `-`     |
-| value    | 标题栏右侧内容，支持插槽传入（`props` 传入的优先级更高） | string           | `-`     |
-| icon     | 标题栏左侧图标组件，等同于 `nutui-icon` 组件             | -                | `-`     |
-| label    | 标题栏描述信息                                           | number \| string | `-`     |
-| rotate   | 点击折叠和展开的旋转角度,在自定义图标模式下生效          | string \| number | `180`   |
-| disabled | 标题栏是否禁用                                           | boolean          | `false` |
-| border   | 是否显示边框                                             | boolean          | `true`  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 唯一标识符，必填 | string \| number | `-1` |
+| title | 标题栏左侧内容，支持插槽传入（`props` 传入的优先级更高） | string | `-` |
+| value | 标题栏右侧内容，支持插槽传入（`props` 传入的优先级更高） | string | `-` |
+| icon | 标题栏左侧图标组件，等同于 `nutui-icon` 组件 | - | `-` |
+| label | 标题栏描述信息 | number \| string | `-` |
+| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \| number | `180` |
+| disabled | 标题栏是否禁用 | boolean | `false` |
+| border | 是否显示边框 | boolean | `true` |
 
 ### CollapseItem Slots
 
-| 名称        | 说明                         |
-| ----------- | ---------------------------- |
-| title       | 标题栏左侧内容插槽           |
-| value       | 标题栏右侧内容插槽           |
-| extra       | 设置标题下固定内容（不折叠） |
-| icon`4.2.0` | 设置自定义图标               |
+| 名称 | 说明 |
+| --- | --- |
+| title | 标题栏左侧内容插槽 |
+| value | 标题栏右侧内容插槽 |
+| extra | 设置标题下固定内容（不折叠） |
+| icon`4.2.0` | 设置自定义图标 |
 
 ### Events
 
-| 事件名 | 说明           | 回调参数                         |
-| ------ | -------------- | -------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 切换面板时触发 | `(modelValue, currName, status)` |
 
-## Theming
+## 主题定制
 
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| Name                                            | Default Value            |
-| ----------------------------------------------- | ------------------------ |
-| --nut-collapse-item-padding                     | _13px 36px 13px 26px_    |
-| --nut-collapse-item-color                       | _#666666_                |
-| --nut-collapse-item-disabled-color              | _#c8c9cc_                |
-| --nut-collapse-item-icon-color                  | _#666666_                |
-| --nut-collapse-item-font-size                   | _var(--nut-font-size-2)_ |
-| --nut-collapse-item-line-height                 | _24px_                   |
-| --nut-collapse-item-sub-title-color             | _#666666_                |
-| --nut-collapse-wrapper-content-padding          | _12px 26px_              |
-| --nut-collapse-wrapper-empty-content-padding    | _0 26px_                 |
-| --nut-collapse-wrapper-content-color            | _#666666_                |
-| --nut-collapse-wrapper-content-font-size        | _var(--nut-font-size-2)_ |
-| --nut-collapse-wrapper-content-line-height      | _1.5_                    |
-| --nut-collapse-wrapper-content-background-color | _var(--nut-white)_       |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-collapse-item-padding | _13px 36px 13px 26px_ |
+| --nut-collapse-item-color | _#666666_ |
+| --nut-collapse-item-disabled-color | _#c8c9cc_ |
+| --nut-collapse-item-icon-color | _#666666_ |
+| --nut-collapse-item-font-size | _var(--nut-font-size-2)_ |
+| --nut-collapse-item-line-height | _24px_ |
+| --nut-collapse-item-sub-title-color | _#666666_ |
+| --nut-collapse-wrapper-content-padding | _12px 26px_ |
+| --nut-collapse-wrapper-empty-content-padding | _0 26px_ |
+| --nut-collapse-wrapper-content-color | _#666666_ |
+| --nut-collapse-wrapper-content-font-size | _var(--nut-font-size-2)_ |
+| --nut-collapse-wrapper-content-line-height | _1.5_ |
+| --nut-collapse-wrapper-content-background-color | _var(--nut-white)_ |
diff --git a/src/packages/__VUE/countdown/demo.vue b/src/packages/__VUE/countdown/demo.vue
index 63306b1e23..7ada116499 100644
--- a/src/packages/__VUE/countdown/demo.vue
+++ b/src/packages/__VUE/countdown/demo.vue
@@ -2,12 +2,12 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-countdown :end-time="end" @end="onend"></nut-countdown>
+      <nut-countdown :end-time="state.end" @end="onend"></nut-countdown>
     </nut-cell>
     <h2>{{ translate('format') }}</h2>
     <nut-cell>
       <nut-countdown
-        :end-time="end"
+        :end-time="state.end"
         :format="`DD ${translate('day')} HH ${translate('hour')} mm ${translate('minute')} ss ${translate('second')}`"
       />
     </nut-cell>
@@ -15,27 +15,27 @@
     <h2>{{ translate('millisecond') }}</h2>
 
     <nut-cell>
-      <nut-countdown :end-time="end" millisecond format="HH:mm:ss:SS" />
+      <nut-countdown :end-time="state.end" millisecond format="HH:mm:ss:SS" />
     </nut-cell>
 
     <h2>{{ translate('serverTime') }}</h2>
 
     <nut-cell>
-      <nut-countdown :start-time="serverTime" :end-time="end" />
+      <nut-countdown :start-time="state.serverTime" :end-time="state.end" />
     </nut-cell>
 
     <h2>{{ translate('async') }}</h2>
 
     <nut-cell>
-      <nut-countdown :end-time="asyncEnd" />
+      <nut-countdown :end-time="state.asyncEnd" />
     </nut-cell>
 
     <h2>{{ translate('controlTime') }}</h2>
 
     <nut-cell>
-      <nut-countdown :end-time="end" :paused="paused" @paused="onpaused" @restart="onrestart" />
+      <nut-countdown :end-time="state.end" :paused="state.paused" @paused="onpaused" @restart="onrestart" />
       <div style="position: absolute; right: 10px; top: 9px">
-        <nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
+        <nut-button type="primary" size="small" @click="toggle">{{ state.paused ? 'start' : 'stop' }}</nut-button>
       </div>
     </nut-cell>
 
@@ -43,14 +43,14 @@
 
     <nut-cell>
       <span>
-        <nut-countdown v-model="resetTime" :end-time="end">
+        <nut-countdown v-model="state.resetTime" :end-time="state.end">
           <div class="countdown-part-box">
-            <div class="part-item-symbol">{{ resetTime.d }}{{ translate('day') }}</div>
-            <div class="part-item h">{{ resetTime.h }}</div>
+            <div class="part-item-symbol">{{ state.resetTime.d }}{{ translate('day') }}</div>
+            <div class="part-item h">{{ state.resetTime.h }}</div>
             <span class="part-item-symbol">:</span>
-            <div class="part-item m">{{ resetTime.m }}</div>
+            <div class="part-item m">{{ state.resetTime.m }}</div>
             <span class="part-item-symbol">:</span>
-            <div class="part-item s">{{ resetTime.s }}</div>
+            <div class="part-item s">{{ state.resetTime.s }}</div>
           </div>
         </nut-countdown>
       </span>
@@ -75,8 +75,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { toRefs, onMounted, ref, reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('countdown');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -117,70 +117,52 @@ const initTranslate = () =>
       second: ''
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const Countdown = ref(null);
-    const state = reactive({
-      serverTime: Date.now() - 20 * 1000,
-      end: Date.now() + 60 * 1000,
-      starttime: Date.now(),
-      asyncEnd: 0,
-      paused: false,
-      resetTime: {
-        d: '1',
-        h: '00',
-        m: '00',
-        s: '00'
-      }
-    });
-
-    const toggle = () => {
-      state.paused = !state.paused;
-    };
-    const onend = () => {
-      console.log('countdown: ended.');
-    };
-    const onpaused = (v) => {
-      console.log('paused: ', v);
-    };
-    const onrestart = (v) => {
-      console.log('restart: ', v);
-    };
-    const start = () => {
-      Countdown.value.start();
-    };
-
-    const pause = () => {
-      Countdown.value.pause();
-    };
-
-    const reset = () => {
-      Countdown.value.reset();
-    };
-    onMounted(() => {
-      console.log(Countdown.value);
-    });
-
-    setTimeout(() => {
-      state.asyncEnd = Date.now() + 30 * 1000;
-    }, 3000);
-
-    return {
-      ...toRefs(state),
-      toggle,
-      onend,
-      onpaused,
-      onrestart,
-      Countdown,
-      start,
-      pause,
-      reset,
-      translate
-    };
+initTranslate();
+const Countdown = ref<any>(null);
+const state = reactive({
+  serverTime: Date.now() - 20 * 1000,
+  end: Date.now() + 60 * 1000,
+  starttime: Date.now(),
+  asyncEnd: 0,
+  paused: false,
+  resetTime: {
+    d: '1',
+    h: '00',
+    m: '00',
+    s: '00'
   }
 });
+
+const toggle = () => {
+  state.paused = !state.paused;
+};
+const onend = () => {
+  console.log('countdown: ended.');
+};
+const onpaused = (v: any) => {
+  console.log('paused: ', v);
+};
+const onrestart = (v: any) => {
+  console.log('restart: ', v);
+};
+const start = () => {
+  Countdown.value.start();
+};
+
+const pause = () => {
+  Countdown.value.pause();
+};
+
+const reset = () => {
+  Countdown.value.reset();
+};
+onMounted(() => {
+  console.log(Countdown.value);
+});
+
+setTimeout(() => {
+  state.asyncEnd = Date.now() + 30 * 1000;
+}, 3000);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/countup/demo.vue b/src/packages/__VUE/countup/demo.vue
index 732e2e9cc7..d10e8d8704 100644
--- a/src/packages/__VUE/countup/demo.vue
+++ b/src/packages/__VUE/countup/demo.vue
@@ -13,8 +13,8 @@
     <h2>{{ translate('title1') }}</h2>
     <div class="show-demo">
       <nut-countup
-        :custom-change-num="customNumber"
-        :custom-bg-img="bgImage"
+        :custom-change-num="data.customNumber"
+        :custom-bg-img="data.bgImage"
         :custom-spac-num="11"
         :num-width="33"
         :num-height="47"
@@ -27,11 +27,11 @@
       <nut-countup
         ref="countupMachine"
         type="machine"
-        :machine-num="machineNum"
+        :machine-num="data.machineNum"
         :machine-prize-num="5"
-        :machine-prize-level="prizeLevel"
+        :machine-prize-level="data.prizeLevel"
         :machine-turn-more="5"
-        :custom-bg-img="bgImage2"
+        :custom-bg-img="data.bgImage2"
         :num-width="100"
         :num-height="100"
         :during="3000"
@@ -39,15 +39,15 @@
       >
       </nut-countup>
       <div class="btnBtn">
-        <nut-button type="danger" :disabled="startFlag" @click="startRole">{{ translate('btn1') }}</nut-button>
-        <nut-button type="danger" :disabled="startFlag" @click="startRole2">{{ translate('btn2') }}</nut-button>
+        <nut-button type="danger" :disabled="data.startFlag" @click="startRole">{{ translate('btn1') }}</nut-button>
+        <nut-button type="danger" :disabled="data.startFlag" @click="startRole2">{{ translate('btn2') }}</nut-button>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { ref, reactive, toRefs, onMounted, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('countup');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -70,62 +70,47 @@ const initTranslate = () =>
       btn2: 'Not winning'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const data = reactive({
-      customNumber: 618,
-      bgImage:
-        'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png',
-      startFlag: false,
-      startFlag2: false,
-      machineNum: 3,
-      bgImage2:
-        'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png',
-      prizeLevel: 0
-    });
-    const scrollAniEnd = (val: boolean) => {
-      console.log(val ? '恭喜中奖！！！' : '很遗憾！没有中奖');
-      setTimeout(() => {
-        data.startFlag = false;
-      }, 300);
-    };
-    const run = () => {
-      setInterval(() => {
-        data.customNumber = Math.floor(Math.random() * (700 - 100 + 1) + 100);
-      }, 5000);
-    };
-    const startRole = () => {
-      data.prizeLevel = Math.floor(Math.random() * 5 + 1);
-      console.log(data.prizeLevel, '中奖');
-      data.startFlag = true;
-      // 实际运行情况下，开始滚动函数，需要放在奖品回调函数之后，如果异步操作会影响转动结果
-      setTimeout(() => {
-        (countupMachine.value as any).machineLuck();
-      }, 500);
-    };
-    const countupMachine = ref(null);
-    const startRole2 = () => {
-      data.prizeLevel = -1;
-      console.log(data.prizeLevel, '不中奖');
-      data.startFlag = true;
-      setTimeout(() => {
-        (countupMachine.value as any).machineLuck();
-      }, 500);
-    };
-    onMounted(() => {
-      run();
-    });
-    return {
-      ...toRefs(data),
-      scrollAniEnd,
-      startRole,
-      startRole2,
-      countupMachine,
-      translate
-    };
-  }
+initTranslate();
+const data = reactive({
+  customNumber: 618,
+  bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png',
+  startFlag: false,
+  startFlag2: false,
+  machineNum: 3,
+  bgImage2: 'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png',
+  prizeLevel: 0
+});
+const scrollAniEnd = (val: boolean) => {
+  console.log(val ? '恭喜中奖！！！' : '很遗憾！没有中奖');
+  setTimeout(() => {
+    data.startFlag = false;
+  }, 300);
+};
+const run = () => {
+  setInterval(() => {
+    data.customNumber = Math.floor(Math.random() * (700 - 100 + 1) + 100);
+  }, 5000);
+};
+const startRole = () => {
+  data.prizeLevel = Math.floor(Math.random() * 5 + 1);
+  console.log(data.prizeLevel, '中奖');
+  data.startFlag = true;
+  // 实际运行情况下，开始滚动函数，需要放在奖品回调函数之后，如果异步操作会影响转动结果
+  setTimeout(() => {
+    (countupMachine.value as any).machineLuck();
+  }, 500);
+};
+const countupMachine = ref(null);
+const startRole2 = () => {
+  data.prizeLevel = -1;
+  console.log(data.prizeLevel, '不中奖');
+  data.startFlag = true;
+  setTimeout(() => {
+    (countupMachine.value as any).machineLuck();
+  }, 500);
+};
+onMounted(() => {
+  run();
 });
 </script>
 
diff --git a/src/packages/__VUE/countup/doc.en-US.md b/src/packages/__VUE/countup/doc.en-US.md
index c98d22a788..2e00092e86 100644
--- a/src/packages/__VUE/countup/doc.en-US.md
+++ b/src/packages/__VUE/countup/doc.en-US.md
@@ -6,7 +6,7 @@ Digital scrolling component, which is used to display the dynamic effect of digi
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Countup } from '@nutui/nutui';
 
@@ -18,11 +18,11 @@ app.use(Countup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-countup :init-num="0" :end-num="200"></nut-countup>
-  <nut-countup :init-num="150.00" :end-num="0.00" :speed="2.62" :to-fixed="2"></nut-countup>
-  <nut-countup :init-num="1000.00" :end-num="0.00" :speed="50" :to-fixed="2"></nut-countup>
+  <nut-countup :init-num="150.0" :end-num="0.0" :speed="2.62" :to-fixed="2"></nut-countup>
+  <nut-countup :init-num="1000.0" :end-num="0.0" :speed="50" :to-fixed="2"></nut-countup>
 </template>
 ```
 
@@ -30,7 +30,7 @@ app.use(Countup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-countup
     :custom-change-num="customNumber"
@@ -42,30 +42,17 @@ app.use(Countup);
   >
   </nut-countup>
 </template>
-<script>
-  import { ref, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const customNumber = ref(618);
-      const bgImage = ref(
-        'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
-      );
-      const run = () => {
-        let timer = null;
-        timer = setInterval(() => {
-          customNumber.value = Math.floor(Math.random() * (700 - 100 + 1) + 100);
-        }, 5000);
-      };
-      onMounted(() => {
-        run();
-      });
-      return {
-        customNumber,
-        bgImage
-      };
-    }
-  };
+<script setup>
+import { ref, onMounted } from 'vue';
+const customNumber = ref(618);
+const bgImage = ref(
+  'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
+);
+onMounted(() => {
+  setInterval(() => {
+    customNumber.value = Math.floor(Math.random() * (700 - 100 + 1) + 100);
+  }, 5000);
+});
 </script>
 ```
 
@@ -75,7 +62,7 @@ app.use(Countup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-countup
     ref="countupMachineDom"
@@ -95,58 +82,43 @@ app.use(Countup);
     <nut-button type="danger" @click="startRole2" :disabled="startFlag"> 不中奖 </nut-button>
   </div>
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const countupMachineDom = ref(null);
-      const startFlag = ref(false);
-      const machineNum = ref(3);
-      const bgImage = ref(
-        'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png'
-      );
-      const prizeLevel = ref(0);
-      const startRole = () => {
-        prizeLevel.value = Math.floor(Math.random() * 5 + 1);
-        startFlag.value = true;
-        countupMachineDom.value.machineLuck();
-      };
-      const startRole2 = () => {
-        prizeLevel.value = -1;
-        startFlag.value = true;
-        setTimeout(() => {
-          countupMachineDom.value.machineLuck();
-        }, 500);
-      };
-
-      const scrollAniEnd = () => {
-        console.log('恭喜中奖！！！');
-        setTimeout(() => {
-          startFlag.value = false;
-        }, 300);
-      };
-
-      return {
-        countupMachineDom,
-        startFlag,
-        machineNum,
-        bgImage,
-        prizeLevel,
-        startRole,
-        startRole2,
-        scrollAniEnd
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const countupMachineDom = ref(null);
+const startFlag = ref(false);
+const machineNum = ref(3);
+const bgImage = ref(
+  'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png'
+);
+const prizeLevel = ref(0);
+const startRole = () => {
+  prizeLevel.value = Math.floor(Math.random() * 5 + 1);
+  startFlag.value = true;
+  countupMachineDom.value.machineLuck();
+};
+const startRole2 = () => {
+  prizeLevel.value = -1;
+  startFlag.value = true;
+  setTimeout(() => {
+    countupMachineDom.value.machineLuck();
+  }, 500);
+};
+
+const scrollAniEnd = () => {
+  console.log('恭喜中奖！！！');
+  setTimeout(() => {
+    startFlag.value = false;
+  }, 300);
+};
 </script>
 
 <style>
-  .btnBtn {
-    text-align: center;
-  }
-  .nut-button {
-    margin-right: 20px;
-  }
+.btnBtn {
+  text-align: center;
+}
+.nut-button {
+  margin-right: 20px;
+}
 </style>
 ```
 
@@ -156,29 +128,29 @@ app.use(Countup);
 
 ### Props
 
-| Attribute           | Description                                                                                                     | Type    | Default |
-| ------------------- | --------------------------------------------------------------------------------------------------------------- | ------- | ------- |
-| init-num            | initial number                                                                                                  | number  | `0`     |
-| end-num             | end number                                                                                                      | number  | `0`     |
-| speed               | interval number, currently only supports basic usage                                                            | number  | `1`     |
-| to-fixed            | retain the number of decimal places                                                                             | number  | `0`     |
-| start-flag          | flag to trigger number scrolling                                                                                | boolean | `true`  |
-| during              | rolling time to run                                                                                             | number  | `1000`  |
-| num-width           | Number width, often used to customize seamless scrolling                                                        | number  | `20`    |
-| num-height          | Number height, often used to customize seamless scrolling (required for lottery function)                       | number  | `20`    |
-| custom-change-num   | The number to change (for custom pictures, initNum and endNum are invalid here)                                 | number  | `1`     |
-| custom-bg-img       | Custom image (it is recommended to use Sprite image, and Sprite image must be used to use the lottery function) | string  | -       |
-| custom-spac-num     | There may be space between numbers in the image                                                                 | number  | `0`     |
-| type                | lottery function pass machine, the optional value is `machine` `' '`                                            | string  | `''`    |
-| machine-prize-num   | Number of prizes, how many prizes in total, must be passed                                                      | number  | `0`     |
-| machine-num         | lottery position, that is, how many times to roll, must pass                                                    | number  | `3`     |
-| machine-prize-level | The winning icon, the position of the icon in the sprite image                                                  | number  | `0`     |
-| machine-turn-more   | number of turns                                                                                                 | number  | `0`     |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| init-num | initial number | number | `0` |
+| end-num | end number | number | `0` |
+| speed | interval number, currently only supports basic usage | number | `1` |
+| to-fixed | retain the number of decimal places | number | `0` |
+| start-flag | flag to trigger number scrolling | boolean | `true` |
+| during | rolling time to run | number | `1000` |
+| num-width | Number width, often used to customize seamless scrolling | number | `20` |
+| num-height | Number height, often used to customize seamless scrolling (required for lottery function) | number | `20` |
+| custom-change-num | The number to change (for custom pictures, initNum and endNum are invalid here) | number | `1` |
+| custom-bg-img | Custom image (it is recommended to use Sprite image, and Sprite image must be used to use the lottery function) | string | - |
+| custom-spac-num | There may be space between numbers in the image | number | `0` |
+| type | lottery function pass machine, the optional value is `machine` `' '` | string | `''` |
+| machine-prize-num | Number of prizes, how many prizes in total, must be passed | number | `0` |
+| machine-num | lottery position, that is, how many times to roll, must pass | number | `3` |
+| machine-prize-level | The winning icon, the position of the icon in the sprite image | number | `0` |
+| machine-turn-more | number of turns | number | `0` |
 
 > Note: The lottery function needs to be calculated in conjunction with the position of the icon, so the height num-height of a single icon in the sprite image needs to be passed in; the winning prize is positioned according to the number of prizes in the sprite image, from 1 to N;
 
 ### Events
 
-| Event      | description                            | callback parameter |
-| ---------- | -------------------------------------- | ------------------ |
-| scroll-end | callback function after scrolling ends | -                  |
+| Event | description | callback parameter |
+| --- | --- | --- |
+| scroll-end | callback function after scrolling ends | - |
diff --git a/src/packages/__VUE/countup/doc.md b/src/packages/__VUE/countup/doc.md
index a3480bf36e..ae44973fde 100644
--- a/src/packages/__VUE/countup/doc.md
+++ b/src/packages/__VUE/countup/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Countup } from '@nutui/nutui';
 
@@ -18,11 +18,11 @@ app.use(Countup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-countup :init-num="0" :end-num="200"></nut-countup>
-  <nut-countup :init-num="150.00" :end-num="0.00" :speed="2.62" :to-fixed="2"></nut-countup>
-  <nut-countup :init-num="1000.00" :end-num="0.00" :speed="50" :to-fixed="2"></nut-countup>
+  <nut-countup :init-num="150.0" :end-num="0.0" :speed="2.62" :to-fixed="2"></nut-countup>
+  <nut-countup :init-num="1000.0" :end-num="0.0" :speed="50" :to-fixed="2"></nut-countup>
 </template>
 ```
 
@@ -32,7 +32,7 @@ app.use(Countup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-countup
     :custom-change-num="customNumber"
@@ -44,30 +44,17 @@ app.use(Countup);
   >
   </nut-countup>
 </template>
-<script>
-  import { ref, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const customNumber = ref(618);
-      const bgImage = ref(
-        'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
-      );
-      const run = () => {
-        let timer = null;
-        timer = setInterval(() => {
-          customNumber.value = Math.floor(Math.random() * (700 - 100 + 1) + 100);
-        }, 5000);
-      };
-      onMounted(() => {
-        run();
-      });
-      return {
-        customNumber,
-        bgImage
-      };
-    }
-  };
+<script setup>
+import { ref, onMounted } from 'vue';
+const customNumber = ref(618);
+const bgImage = ref(
+  'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
+);
+onMounted(() => {
+  setInterval(() => {
+    customNumber.value = Math.floor(Math.random() * (700 - 100 + 1) + 100);
+  }, 5000);
+});
 </script>
 ```
 
@@ -77,7 +64,7 @@ app.use(Countup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-countup
     ref="countupMachineDom"
@@ -97,58 +84,43 @@ app.use(Countup);
     <nut-button type="danger" @click="startRole2" :disabled="startFlag"> 不中奖 </nut-button>
   </div>
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const countupMachineDom = ref(null);
-      const startFlag = ref(false);
-      const machineNum = ref(3);
-      const bgImage = ref(
-        'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png'
-      );
-      const prizeLevel = ref(0);
-      const startRole = () => {
-        prizeLevel.value = Math.floor(Math.random() * 5 + 1);
-        startFlag.value = true;
-        countupMachineDom.value.machineLuck();
-      };
-      const startRole2 = () => {
-        prizeLevel.value = -1;
-        startFlag.value = true;
-        setTimeout(() => {
-          countupMachineDom.value.machineLuck();
-        }, 500);
-      };
-
-      const scrollAniEnd = () => {
-        console.log('恭喜中奖！！！');
-        setTimeout(() => {
-          startFlag.value = false;
-        }, 300);
-      };
-
-      return {
-        countupMachineDom,
-        startFlag,
-        machineNum,
-        bgImage,
-        prizeLevel,
-        startRole,
-        startRole2,
-        scrollAniEnd
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const countupMachineDom = ref(null);
+const startFlag = ref(false);
+const machineNum = ref(3);
+const bgImage = ref(
+  'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png'
+);
+const prizeLevel = ref(0);
+const startRole = () => {
+  prizeLevel.value = Math.floor(Math.random() * 5 + 1);
+  startFlag.value = true;
+  countupMachineDom.value.machineLuck();
+};
+const startRole2 = () => {
+  prizeLevel.value = -1;
+  startFlag.value = true;
+  setTimeout(() => {
+    countupMachineDom.value.machineLuck();
+  }, 500);
+};
+
+const scrollAniEnd = () => {
+  console.log('恭喜中奖！！！');
+  setTimeout(() => {
+    startFlag.value = false;
+  }, 300);
+};
 </script>
 
 <style>
-  .btnBtn {
-    text-align: center;
-  }
-  .nut-button {
-    margin-right: 20px;
-  }
+.btnBtn {
+  text-align: center;
+}
+.nut-button {
+  margin-right: 20px;
+}
 </style>
 ```
 
@@ -158,30 +130,30 @@ app.use(Countup);
 
 ### Props
 
-| 参数                | 说明                                                         | 类型    | 默认值  |
-| ------------------- | ------------------------------------------------------------ | ------- | ------- |
-| init-num            | 初始数字                                                     | number  | `0`     |
-| end-num             | 结束数字                                                     | number  | `0`     |
-| speed               | 间隔数字，目前仅支持基础用法                                 | number  | `1`     |
-| to-fixed            | 保留小数点后几位                                             | number  | `0`     |
-| start-flag          | 触发数字滚动的标识                                           | boolean | `true`  |
-| during              | 滚动一次运行时间                                             | number  | `1000`  |
-| num-width           | 数字宽度，常用于自定义无缝滚动                               | number  | `20`    |
-| num-height          | 数字高度，常用于自定义无缝滚动（抽奖功能必传）               | number  | `20`    |
-| scrolling           | 数字滚动模式（仅支持 H5）                                    | boolean | `false` |
-| custom-change-num   | 要变化的数字（用于自定义图片，`initNum`、`endNum` 在此无效） | number  | `1`     |
-| custom-bg-img       | 自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图） | string  | -       |
-| custom-spac-num     | 图片中数字之间可能会存在间距                                 | number  | `0`     |
-| type                | 抽奖功能传 machine，可选值为 `machine` `' '`                 | string  | `''`    |
-| machine-prize-num   | 奖品个数，一共多少个奖品，必传                               | number  | `0`     |
-| machine-num         | 抽奖位，即滚动几个，必传                                     | number  | `3`     |
-| machine-prize-level | 中奖图标，图标在雪碧图中的位置                               | number  | `0`     |
-| machine-turn-more   | 滚动圈数                                                     | number  | `0`     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| init-num | 初始数字 | number | `0` |
+| end-num | 结束数字 | number | `0` |
+| speed | 间隔数字，目前仅支持基础用法 | number | `1` |
+| to-fixed | 保留小数点后几位 | number | `0` |
+| start-flag | 触发数字滚动的标识 | boolean | `true` |
+| during | 滚动一次运行时间 | number | `1000` |
+| num-width | 数字宽度，常用于自定义无缝滚动 | number | `20` |
+| num-height | 数字高度，常用于自定义无缝滚动（抽奖功能必传） | number | `20` |
+| scrolling | 数字滚动模式（仅支持 H5） | boolean | `false` |
+| custom-change-num | 要变化的数字（用于自定义图片，`initNum`、`endNum` 在此无效） | number | `1` |
+| custom-bg-img | 自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图） | string | - |
+| custom-spac-num | 图片中数字之间可能会存在间距 | number | `0` |
+| type | 抽奖功能传 machine，可选值为 `machine` `' '` | string | `''` |
+| machine-prize-num | 奖品个数，一共多少个奖品，必传 | number | `0` |
+| machine-num | 抽奖位，即滚动几个，必传 | number | `3` |
+| machine-prize-level | 中奖图标，图标在雪碧图中的位置 | number | `0` |
+| machine-turn-more | 滚动圈数 | number | `0` |
 
 > 说明：抽奖功能需要结合图标位置计算，故需传入雪碧图中单个图标的高度 num-height；中奖奖品根据雪碧图中的奖品位数来定位，从 1 到 N；
 
 ### Events
 
-| 事件名     | 说明               | 回调参数 |
-| ---------- | ------------------ | -------- |
-| scroll-end | 滚动结束后回调函数 | -        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| scroll-end | 滚动结束后回调函数 | - |
diff --git a/src/packages/__VUE/countup/doc.taro.md b/src/packages/__VUE/countup/doc.taro.md
index ea95c752de..4bd60794e7 100644
--- a/src/packages/__VUE/countup/doc.taro.md
+++ b/src/packages/__VUE/countup/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Countup } from '@nutui/nutui-taro';
 
@@ -18,11 +18,11 @@ app.use(Countup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-countup :init-num="0" :end-num="200"></nut-countup>
-  <nut-countup :init-num="150.00" :end-num="0.00" :speed="2.62" :to-fixed="2"></nut-countup>
-  <nut-countup :init-num="1000.00" :end-num="0.00" :speed="50" :to-fixed="2"></nut-countup>
+  <nut-countup :init-num="150.0" :end-num="0.0" :speed="2.62" :to-fixed="2"></nut-countup>
+  <nut-countup :init-num="1000.0" :end-num="0.0" :speed="50" :to-fixed="2"></nut-countup>
 </template>
 ```
 
@@ -32,7 +32,7 @@ app.use(Countup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-countup
     :custom-change-num="customNumber"
@@ -44,30 +44,17 @@ app.use(Countup);
   >
   </nut-countup>
 </template>
-<script>
-  import { ref, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const customNumber = ref(618);
-      const bgImage = ref(
-        'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
-      );
-      const run = () => {
-        let timer = null;
-        timer = setInterval(() => {
-          customNumber.value = Math.floor(Math.random() * (700 - 100 + 1) + 100);
-        }, 5000);
-      };
-      onMounted(() => {
-        run();
-      });
-      return {
-        customNumber,
-        bgImage
-      };
-    }
-  };
+<script setup>
+import { ref, onMounted } from 'vue';
+const customNumber = ref(618);
+const bgImage = ref(
+  'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
+);
+onMounted(() => {
+  setInterval(() => {
+    customNumber.value = Math.floor(Math.random() * (700 - 100 + 1) + 100);
+  }, 5000);
+});
 </script>
 ```
 
@@ -77,7 +64,7 @@ app.use(Countup);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-countup
     ref="countupMachineDom"
@@ -97,58 +84,43 @@ app.use(Countup);
     <nut-button type="danger" @click="startRole2" :disabled="startFlag"> 不中奖 </nut-button>
   </div>
 </template>
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const countupMachineDom = ref(null);
-      const startFlag = ref(false);
-      const machineNum = ref(3);
-      const bgImage = ref(
-        'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png'
-      );
-      const prizeLevel = ref(0);
-      const startRole = () => {
-        prizeLevel.value = Math.floor(Math.random() * 5 + 1);
-        startFlag.value = true;
-        countupMachineDom.value.machineLuck();
-      };
-      const startRole2 = () => {
-        prizeLevel.value = -1;
-        startFlag.value = true;
-        setTimeout(() => {
-          countupMachineDom.value.machineLuck();
-        }, 500);
-      };
-
-      const scrollAniEnd = () => {
-        console.log('恭喜中奖！！！');
-        setTimeout(() => {
-          startFlag.value = false;
-        }, 300);
-      };
-
-      return {
-        countupMachineDom,
-        startFlag,
-        machineNum,
-        bgImage,
-        prizeLevel,
-        startRole,
-        startRole2,
-        scrollAniEnd
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const countupMachineDom = ref(null);
+const startFlag = ref(false);
+const machineNum = ref(3);
+const bgImage = ref(
+  'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png'
+);
+const prizeLevel = ref(0);
+const startRole = () => {
+  prizeLevel.value = Math.floor(Math.random() * 5 + 1);
+  startFlag.value = true;
+  countupMachineDom.value.machineLuck();
+};
+const startRole2 = () => {
+  prizeLevel.value = -1;
+  startFlag.value = true;
+  setTimeout(() => {
+    countupMachineDom.value.machineLuck();
+  }, 500);
+};
+
+const scrollAniEnd = () => {
+  console.log('恭喜中奖！！！');
+  setTimeout(() => {
+    startFlag.value = false;
+  }, 300);
+};
 </script>
 
 <style>
-  .btnBtn {
-    text-align: center;
-  }
-  .nut-button {
-    margin-right: 20px;
-  }
+.btnBtn {
+  text-align: center;
+}
+.nut-button {
+  margin-right: 20px;
+}
 </style>
 ```
 
@@ -158,29 +130,29 @@ app.use(Countup);
 
 ### Props
 
-| 参数                | 说明                                                         | 类型    | 默认值 |
-| ------------------- | ------------------------------------------------------------ | ------- | ------ |
-| init-num            | 初始数字                                                     | number  | `0`    |
-| end-num             | 结束数字                                                     | number  | `0`    |
-| speed               | 间隔数字，目前仅支持基础用法                                 | number  | `1`    |
-| to-fixed            | 保留小数点后几位                                             | number  | `0`    |
-| start-flag          | 触发数字滚动的标识                                           | boolean | `true` |
-| during              | 滚动一次运行时间                                             | number  | `1000` |
-| num-width           | 数字宽度，常用于自定义无缝滚动                               | number  | `20`   |
-| num-height          | 数字高度，常用于自定义无缝滚动（抽奖功能必传）               | number  | `20`   |
-| custom-change-num   | 要变化的数字（用于自定义图片，`initNum`、`endNum` 在此无效） | number  | `1`    |
-| custom-bg-img       | 自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图） | string  | -      |
-| custom-spac-num     | 图片中数字之间可能会存在间距                                 | number  | `0`    |
-| type                | 抽奖功能传 machine，可选值为 `machine` `' '`                 | string  | `''`   |
-| machine-prize-num   | 奖品个数，一共多少个奖品，必传                               | number  | `0`    |
-| machine-num         | 抽奖位，即滚动几个，必传                                     | number  | `3`    |
-| machine-prize-level | 中奖图标，图标在雪碧图中的位置                               | number  | `0`    |
-| machine-turn-more   | 滚动圈数                                                     | number  | `0`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| init-num | 初始数字 | number | `0` |
+| end-num | 结束数字 | number | `0` |
+| speed | 间隔数字，目前仅支持基础用法 | number | `1` |
+| to-fixed | 保留小数点后几位 | number | `0` |
+| start-flag | 触发数字滚动的标识 | boolean | `true` |
+| during | 滚动一次运行时间 | number | `1000` |
+| num-width | 数字宽度，常用于自定义无缝滚动 | number | `20` |
+| num-height | 数字高度，常用于自定义无缝滚动（抽奖功能必传） | number | `20` |
+| custom-change-num | 要变化的数字（用于自定义图片，`initNum`、`endNum` 在此无效） | number | `1` |
+| custom-bg-img | 自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图） | string | - |
+| custom-spac-num | 图片中数字之间可能会存在间距 | number | `0` |
+| type | 抽奖功能传 machine，可选值为 `machine` `' '` | string | `''` |
+| machine-prize-num | 奖品个数，一共多少个奖品，必传 | number | `0` |
+| machine-num | 抽奖位，即滚动几个，必传 | number | `3` |
+| machine-prize-level | 中奖图标，图标在雪碧图中的位置 | number | `0` |
+| machine-turn-more | 滚动圈数 | number | `0` |
 
 > 说明：抽奖功能需要结合图标位置计算，故需传入雪碧图中单个图标的高度 num-height；中奖奖品根据雪碧图中的奖品位数来定位，从 1 到 N；
 
 ### Events
 
-| 事件名     | 说明               | 回调参数 |
-| ---------- | ------------------ | -------- |
-| scroll-end | 滚动结束后回调函数 | -        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| scroll-end | 滚动结束后回调函数 | - |
diff --git a/src/packages/__VUE/ellipsis/demo.vue b/src/packages/__VUE/ellipsis/demo.vue
index 1b3ba98ee6..318bbd1b21 100644
--- a/src/packages/__VUE/ellipsis/demo.vue
+++ b/src/packages/__VUE/ellipsis/demo.vue
@@ -32,8 +32,8 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('ellipsis');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -55,18 +55,8 @@ const initTranslate = () =>
       expand: 'Expand & Collapse'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const content = ref(
-      'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
-    );
-    return { content, translate };
-  }
-});
+initTranslate();
+const content = ref(
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+);
 </script>
-<style lang="scss" scoped>
-.demo {
-}
-</style>
diff --git a/src/packages/__VUE/ellipsis/doc.en-US.md b/src/packages/__VUE/ellipsis/doc.en-US.md
index aa1d147bc0..cd415a200f 100644
--- a/src/packages/__VUE/ellipsis/doc.en-US.md
+++ b/src/packages/__VUE/ellipsis/doc.en-US.md
@@ -6,7 +6,7 @@ Display space is insufficient, hidden part of the content and "..." Alternative.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Ellipsis } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -33,7 +33,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -48,7 +48,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -63,7 +63,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -79,7 +79,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     direction="start"
@@ -96,21 +96,21 @@ app.use(Ellipsis);
 
 ### Props
 
-| Attribute     | Description                             | Type             | Default |
-| ------------- | --------------------------------------- | ---------------- | ------- |
-| content       | Content                                 | string           | -       |
-| direction     | Direction, `start` \| `end` \| `middle` | string           | `end`   |
-| rows          | Rows                                    | number           | `1`     |
-| expand-text   | Expand text                             | string           | `''`    |
-| collapse-text | Collapse text                           | string           | `''`    |
-| symbol        | Symbol                                  | string           | `...`   |
-| line-height   | the row height of the container         | string \| number | `20`    |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| content | Content | string | - |
+| direction | Direction, `start` \| `end` \| `middle` | string | `end` |
+| rows | Rows | number | `1` |
+| expand-text | Expand text | string | `''` |
+| collapse-text | Collapse text | string | `''` |
+| symbol | Symbol | string | `...` |
+| line-height | the row height of the container | string \| number | `20` |
 
 ### Events
 
-| Event  | Description                                | Arguments              |
-| ------ | ------------------------------------------ | ---------------------- |
-| click  | Emitted when the content is clicked        | -                      |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| click | Emitted when the content is clicked | - |
 | change | Emitted when expand or collapse is clicked | `expand` or `collapse` |
 
 ## Theming
@@ -119,6 +119,6 @@ app.use(Ellipsis);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                 | Default Value |
-| ------------------------------------ | ------------- |
-| --nut-ellipsis-expand-collapse-color | _#3460fa_     |
+| Name | Default Value |
+| --- | --- |
+| --nut-ellipsis-expand-collapse-color | _#3460fa_ |
diff --git a/src/packages/__VUE/ellipsis/doc.md b/src/packages/__VUE/ellipsis/doc.md
index 00266aaac4..2b1a4071a0 100644
--- a/src/packages/__VUE/ellipsis/doc.md
+++ b/src/packages/__VUE/ellipsis/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Ellipsis } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -33,7 +33,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -48,7 +48,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -63,7 +63,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -79,7 +79,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     direction="start"
@@ -96,21 +96,21 @@ app.use(Ellipsis);
 
 ### Props
 
-| 参数          | 说明                                          | 类型             | 默认值 |
-| ------------- | --------------------------------------------- | ---------------- | ------ |
-| content       | 文本内容                                      | string           | -      |
-| direction     | 省略位置，可选值 `start` \| `end` \| `middle` | string           | `end`  |
-| rows          | 展示几行                                      | number           | `1`    |
-| expand-text   | 展开操作的文案                                | string           | `''`   |
-| collapse-text | 收起操作的文案                                | string           | `''`   |
-| symbol        | 省略的符号                                    | string           | `...`  |
-| line-height   | 容器的行高                                    | string \| number | `20`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| content | 文本内容 | string | - |
+| direction | 省略位置，可选值 `start` \| `end` \| `middle` | string | `end` |
+| rows | 展示几行 | number | `1` |
+| expand-text | 展开操作的文案 | string | `''` |
+| collapse-text | 收起操作的文案 | string | `''` |
+| symbol | 省略的符号 | string | `...` |
+| line-height | 容器的行高 | string \| number | `20` |
 
 ### Events
 
-| 事件名 | 说明               | 回调参数               |
-| ------ | ------------------ | ---------------------- |
-| click  | 文本点击时触发     | -                      |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | 文本点击时触发 | - |
 | change | 点击展开收起时触发 | `expand` 或 `collapse` |
 
 ## 主题定制
@@ -119,6 +119,6 @@ app.use(Ellipsis);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值    |
-| ------------------------------------ | --------- |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-ellipsis-expand-collapse-color | _#3460fa_ |
diff --git a/src/packages/__VUE/ellipsis/doc.taro.md b/src/packages/__VUE/ellipsis/doc.taro.md
index 67aadcedc4..cb6ff49a12 100644
--- a/src/packages/__VUE/ellipsis/doc.taro.md
+++ b/src/packages/__VUE/ellipsis/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Ellipsis } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -33,7 +33,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -48,7 +48,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -63,7 +63,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。"
@@ -79,7 +79,7 @@ app.use(Ellipsis);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-ellipsis
     direction="start"
@@ -96,21 +96,21 @@ app.use(Ellipsis);
 
 ### Props
 
-| 参数          | 说明                                          | 类型             | 默认值 |
-| ------------- | --------------------------------------------- | ---------------- | ------ |
-| content       | 文本内容                                      | string           | -      |
-| direction     | 省略位置，可选值 `start` \| `end` \| `middle` | string           | `end`  |
-| rows          | 展示几行                                      | number           | `1`    |
-| expand-text   | 展开操作的文案                                | string           | `''`   |
-| collapse-text | 收起操作的文案                                | string           | `''`   |
-| symbol        | 省略的符号                                    | string           | `...`  |
-| line-height   | 容器的行高                                    | string \| number | `20`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| content | 文本内容 | string | - |
+| direction | 省略位置，可选值 `start` \| `end` \| `middle` | string | `end` |
+| rows | 展示几行 | number | `1` |
+| expand-text | 展开操作的文案 | string | `''` |
+| collapse-text | 收起操作的文案 | string | `''` |
+| symbol | 省略的符号 | string | `...` |
+| line-height | 容器的行高 | string \| number | `20` |
 
 ### Events
 
-| 事件名 | 说明               | 回调参数               |
-| ------ | ------------------ | ---------------------- |
-| click  | 文本点击时触发     | -                      |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | 文本点击时触发 | - |
 | change | 点击展开收起时触发 | `expand` 或 `collapse` |
 
 ## 主题定制
@@ -119,6 +119,6 @@ app.use(Ellipsis);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值    |
-| ------------------------------------ | --------- |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-ellipsis-expand-collapse-color | _#3460fa_ |
diff --git a/src/packages/__VUE/imagepreview/demo.vue b/src/packages/__VUE/imagepreview/demo.vue
index 65a0a3b00f..4f4bb3397c 100644
--- a/src/packages/__VUE/imagepreview/demo.vue
+++ b/src/packages/__VUE/imagepreview/demo.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
-    <nut-image-preview :show="showPreview1" :images="imgData" @close="hideFn(1)" />
+    <nut-image-preview :show="resData.showPreview1" :images="resData.imgData" @close="hideFn(1)" />
     <nut-cell is-link :title="translate('showPreview')" :show-icon="true" @click="showFn(1)"></nut-cell>
 
     <h2>{{ translate('withInitNo') }}</h2>
-    <nut-image-preview :show="showPreview2" :images="imgData" :init-no="3" @close="hideFn(2)" />
+    <nut-image-preview :show="resData.showPreview2" :images="resData.imgData" :init-no="3" @close="hideFn(2)" />
     <nut-cell is-link :title="translate('withInitNo')" :show-icon="true" @click="showFn(2)"></nut-cell>
 
     <h2>{{ translate('withPagination') }}</h2>
     <nut-image-preview
-      :show="showPreview3"
-      :images="imgData"
+      :show="resData.showPreview3"
+      :images="resData.imgData"
       :pagination-visible="true"
       pagination-color="red"
       @close="hideFn(3)"
@@ -19,7 +19,12 @@
     <nut-cell is-link :title="translate('withPagination')" :show-icon="true" @click="showFn(3)"></nut-cell>
 
     <h2>{{ translate('withVideos') }}</h2>
-    <nut-image-preview :show="showPreview4" :videos="videoData" :images="imgData" @close="hideFn(4)" />
+    <nut-image-preview
+      :show="resData.showPreview4"
+      :videos="resData.videoData"
+      :images="resData.imgData"
+      @close="hideFn(4)"
+    />
     <nut-cell is-link :title="translate('withVideos')" :show-icon="true" @click="showFn(4)"></nut-cell>
 
     <h2>{{ translate('functionalCall') }}</h2>
@@ -27,8 +32,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('image-preview');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -52,90 +57,72 @@ const initTranslate = () =>
       functionalCall: 'Functional Call'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const resData = reactive({
-      showPreview1: false,
-      showPreview2: false,
-      showPreview3: false,
-      showPreview4: false,
-      imgData: [
-        {
-          src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg'
-        },
-        {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-        },
-        {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-        },
-        {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-        },
-        {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-        },
-        {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-        }
-      ],
-      videoData: [
-        {
-          source: {
-            src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-            type: 'video/mp4'
-          },
-          options: {
-            muted: true,
-            controls: true
-          }
-        },
-        {
-          source: {
-            src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-            type: 'video/mp4'
-          },
-          options: {
-            muted: true,
-            controls: true
-          }
-        }
-      ]
-    });
-    const onClose = () => {
-      console.log('imagepreview closed');
-    };
-
-    const showFn = (i: number) => {
-      (resData as any)['showPreview' + i] = true;
-    };
+initTranslate();
+const resData = reactive({
+  showPreview1: false,
+  showPreview2: false,
+  showPreview3: false,
+  showPreview4: false,
+  imgData: [
+    {
+      src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+    }
+  ],
+  videoData: [
+    {
+      source: {
+        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+        type: 'video/mp4'
+      },
+      options: {
+        muted: true,
+        controls: true
+      }
+    },
+    {
+      source: {
+        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+        type: 'video/mp4'
+      },
+      options: {
+        muted: true,
+        controls: true
+      }
+    }
+  ]
+});
+const onClose = () => {
+  console.log('imagepreview closed');
+};
 
-    const fnShow = () => {
-      showImagePreview({
-        show: true,
-        images: resData.imgData,
-        onClose: () => onClose()
-      });
-    };
+const showFn = (i: number) => {
+  (resData as any)['showPreview' + i] = true;
+};
 
-    const hideFn = (i: number) => {
-      (resData as any)['showPreview' + i] = false;
-    };
+const fnShow = () => {
+  showImagePreview({
+    show: true,
+    images: resData.imgData,
+    onClose: () => onClose()
+  });
+};
 
-    return {
-      ...toRefs(resData),
-      showFn,
-      hideFn,
-      fnShow,
-      translate
-    };
-  }
-});
+const hideFn = (i: number) => {
+  (resData as any)['showPreview' + i] = false;
+};
 </script>
-
-<style lang="scss" scoped>
-.demo {
-}
-</style>
diff --git a/src/packages/__VUE/imagepreview/doc.en-US.md b/src/packages/__VUE/imagepreview/doc.en-US.md
index 46cca963fa..f6691d467d 100644
--- a/src/packages/__VUE/imagepreview/doc.en-US.md
+++ b/src/packages/__VUE/imagepreview/doc.en-US.md
@@ -6,7 +6,7 @@ Support full screen preview videos and images, support functional call.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { ImagePreview } from '@nutui/nutui';
 
@@ -18,49 +18,39 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn" />
+  <nut-image-preview :show="state.showPreview" :images="state.imgData" @close="hideFn" />
   <nut-cell isLink title="Show preview" :showIcon="true" @click="showFn"></nut-cell>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
-
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
-
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
     }
-  };
+  ]
+});
+
+const showFn = () => {
+  state.showPreview = true;
+};
+
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -70,48 +60,38 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-image-preview :show="showPreview" :images="imgData" :init-no="3" @close="hideFn" />
+  <nut-image-preview :show="state.showPreview" :images="state.imgData" :init-no="3" @close="hideFn" />
   <nut-cell isLink title="With init no" :showIcon="true" @click="showFn"></nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
-
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
-
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
     }
-  };
+  ]
+});
+
+const showFn = () => {
+  state.showPreview = true;
+};
+
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -121,54 +101,44 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-image-preview
-    :show="showPreview"
-    :images="imgData"
+    :show="state.showPreview"
+    :images="state.imgData"
     :pagination-visible="true"
     pagination-color="red"
     @close="hideFn"
   />
   <nut-cell isLink title="With pagination" :showIcon="true" @click="showFn"></nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
-
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
-
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
     }
-  };
+  ]
+});
+
+const showFn = () => {
+  state.showPreview = true;
+};
+
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -176,74 +146,62 @@ app.use(ImagePreview);
 
 ### With Videos
 
-#### Preview videos not support in taro.
-
 :::demo
 
-```html
+```vue
 <template>
-  <nut-image-preview :show="showPreview" :images="imgData" :videos="videoData" @close="hideFn" />
+  <nut-image-preview :show="state.showPreview" :images="state.imgData" :videos="state.videoData" @close="hideFn" />
   <nut-cell isLink title="With videos" :showIcon="true" @click="showFn"></nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ],
-        videoData: [
-          {
-            source: {
-              src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-              type: 'video/mp4'
-            },
-            options: {
-              muted: true,
-              controls: true
-            }
-          },
-          {
-            source: {
-              src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-              type: 'video/mp4'
-            },
-            options: {
-              muted: true,
-              controls: true
-            }
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
-
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
-
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+    }
+  ],
+  videoData: [
+    {
+      source: {
+        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+        type: 'video/mp4'
+      },
+      options: {
+        muted: true,
+        controls: true
+      }
+    },
+    {
+      source: {
+        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+        type: 'video/mp4'
+      },
+      options: {
+        muted: true,
+        controls: true
+      }
     }
-  };
+  ]
+});
+
+const showFn = () => {
+  state.showPreview = true;
+};
+
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -255,99 +213,92 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell isLink title="Functional call" :showIcon="true" @click="fnShow"></nut-cell>
 </template>
 
-<script lang="ts">
-  import { showImagePreview } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/imagepreview/style';
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const onClose = () => {
-        console.log('imagepreview closed');
-      };
-
-      const fnShow = () => {
-        showImagePreview({
-          show: true,
-          images: resData.imgData,
-          onClose
-        });
-      };
-
-      return {
-        ...toRefs(resData),
-        fnShow
-      };
+<script setup>
+import { showImagePreview } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/imagepreview/style';
+import { reactive } from 'vue';
+const state = reactive({
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
     }
-  };
+  ]
+});
+
+const onClose = () => {
+  console.log('imagepreview closed');
+};
+
+const fnShow = () => {
+  showImagePreview({
+    show: true,
+    images: state.imgData,
+    onClose
+  });
+};
 </script>
 ```
 
 :::
 
+## API
+
 ### Props
 
-| Attribute           | Description                                                 | Type                                              | Default     |
-| ------------------- | ----------------------------------------------------------- | ------------------------------------------------- | ----------- |
-| show                | Whether to show preview                                     | boolean                                           | `false`     |
-| videos              | Videos Array(Videos are before images, not support in taro) | VideoArray[]                                      | `[]`        |
-| images              | Images array                                                | ImageArray[]                                      | `[]`        |
-| autoplay            | Autoplay time, zero means not autoplay                      | number \| string                                  | `3000`      |
-| init-no             | Init no                                                     | number                                            | `0`         |
-| pagination-visible  | Whether to show pagination                                  | boolean                                           | `false`     |
-| pagination-color    | Pagination color                                            | string                                            | `#fff`      |
-| content-close       | Click image to exit preview                                 | boolean                                           | `true`      |
-| show-index          | Whether to show index                                       | boolean                                           | `true`      |
-| closeable           | Whether to show close icon                                  | boolean                                           | `false`     |
-| close-icon-position | Close icon position,can be set to `top-left`                | string                                            | `top-right` |
-| before-close        | Callback function before close                              | (active: number) => boolean \| Promise<`boolean`> | -           |
-| max-zoom            | Max zoom`Taro isn't supported`                              | number                                            | `3`         |
-| min-zoom            | Min zoom`Taro isn't supported`                              | number                                            | `1/3`       |
-| is-Loop             | Whether to loop                                             | boolean                                           | `true`      |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| show | Whether to show preview | boolean | `false` |
+| videos | Videos Array(Videos are before images, not support in taro) | VideoArray[] | `[]` |
+| images | Images array | ImageArray[] | `[]` |
+| autoplay | Autoplay time, zero means not autoplay | number \| string | `3000` |
+| init-no | Init no | number | `0` |
+| pagination-visible | Whether to show pagination | boolean | `false` |
+| pagination-color | Pagination color | string | `#fff` |
+| content-close | Click image to exit preview | boolean | `true` |
+| show-index | Whether to show index | boolean | `true` |
+| closeable | Whether to show close icon | boolean | `false` |
+| close-icon-position | Close icon position,can be set to `top-left` | string | `top-right` |
+| before-close | Callback function before close | (active: number) => boolean \| Promise<`boolean`> | - |
+| max-zoom | Max zoom`Taro isn't supported` | number | `3` |
+| min-zoom | Min zoom`Taro isn't supported` | number | `1/3` |
+| is-Loop | Whether to loop | boolean | `true` |
 
 ### Data Structure of ImageArray
 
-| Key | Description | Type   |
-| --- | ----------- | ------ |
-| src | img url     | string |
+| Key | Description | Type |
+| --- | --- | --- |
+| src | img url | string |
 
 ### Data Structure of VideoArray
 
-| Key     | Description                       | Type   |
-| ------- | --------------------------------- | ------ |
-| source  | Video url and type settings       | object |
+| Key | Description | Type |
+| --- | --- | --- |
+| source | Video url and type settings | object |
 | options | Control video playback properties | object |
 
 ### Events
 
-| Event  | Description                        | Arguments |
-| ------ | ---------------------------------- | --------- |
-| close  | Emitted when closing ImagePreview  | -         |
-| change | Emitted when current image changed | index     |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| close | Emitted when closing ImagePreview | - |
+| change | Emitted when current image changed | index |
 
 ### Slots
 
-| Name      | Description       |
-| --------- | ----------------- |
+| Name | Description |
+| --- | --- |
 | closeIcon | Custom close icon |
diff --git a/src/packages/__VUE/imagepreview/doc.md b/src/packages/__VUE/imagepreview/doc.md
index 6afedbc614..531bbb405b 100644
--- a/src/packages/__VUE/imagepreview/doc.md
+++ b/src/packages/__VUE/imagepreview/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { ImagePreview } from '@nutui/nutui';
 
@@ -18,49 +18,39 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn" />
+  <nut-image-preview :show="state.showPreview" :images="state.imgData" @close="hideFn" />
   <nut-cell isLink title="展示图片预览" :showIcon="true" @click="showFn"></nut-cell>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
-
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
-
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
     }
-  };
+  ]
+});
+
+const showFn = () => {
+  state.showPreview = true;
+};
+
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -70,48 +60,38 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-image-preview :show="showPreview" :images="imgData" :init-no="3" @close="hideFn" />
+  <nut-image-preview :show="state.showPreview" :images="state.imgData" :init-no="3" @close="hideFn" />
   <nut-cell isLink title="设置初始页码" :showIcon="true" @click="showFn"></nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
-
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
-
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
     }
-  };
+  ]
+});
+
+const showFn = () => {
+  state.showPreview = true;
+};
+
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -121,54 +101,44 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-image-preview
-    :show="showPreview"
-    :images="imgData"
+    :show="state.showPreview"
+    :images="state.imgData"
     :pagination-visible="true"
     pagination-color="red"
     @close="hideFn"
   />
   <nut-cell isLink title="设置轮播指示器及颜色" :showIcon="true" @click="showFn"></nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
-
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
-
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
     }
-  };
+  ]
+});
+
+const showFn = () => {
+  state.showPreview = true;
+};
+
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -178,70 +148,60 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-image-preview :show="showPreview" :images="imgData" :videos="videoData" @close="hideFn" />
+  <nut-image-preview :show="state.showPreview" :images="state.imgData" :videos="state.videoData" @close="hideFn" />
   <nut-cell isLink title="视频、图片预览" :showIcon="true" @click="showFn"></nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ],
-        videoData: [
-          {
-            source: {
-              src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-              type: 'video/mp4'
-            },
-            options: {
-              muted: true,
-              controls: true
-            }
-          },
-          {
-            source: {
-              src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-              type: 'video/mp4'
-            },
-            options: {
-              muted: true,
-              controls: true
-            }
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
-
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
-
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+    }
+  ],
+  videoData: [
+    {
+      source: {
+        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+        type: 'video/mp4'
+      },
+      options: {
+        muted: true,
+        controls: true
+      }
+    },
+    {
+      source: {
+        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+        type: 'video/mp4'
+      },
+      options: {
+        muted: true,
+        controls: true
+      }
     }
-  };
+  ]
+});
+
+const showFn = () => {
+  state.showPreview = true;
+};
+
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -251,52 +211,43 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell isLink title="函数式调用的图片预览" :showIcon="true" @click="fnShow"></nut-cell>
 </template>
 
-<script lang="ts">
-  import { showImagePreview } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/imagepreview/style';
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const onClose = () => {
-        console.log('imagepreview closed');
-      };
-
-      const fnShow = () => {
-        showImagePreview({
-          show: true,
-          images: resData.imgData,
-          onClose
-        });
-      };
-
-      return {
-        ...toRefs(resData),
-        fnShow
-      };
+<script setup>
+import { showImagePreview } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/imagepreview/style';
+import { reactive } from 'vue';
+const state = reactive({
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
     }
-  };
+  ]
+});
+
+const onClose = () => {
+  console.log('imagepreview closed');
+};
+
+const fnShow = () => {
+  showImagePreview({
+    show: true,
+    images: state.imgData,
+    onClose
+  });
+};
 </script>
 ```
 
@@ -306,46 +257,46 @@ app.use(ImagePreview);
 
 ### Props
 
-| 参数                | 说明                                                          | 类型                                              | 默认值      |
-| ------------------- | ------------------------------------------------------------- | ------------------------------------------------- | ----------- |
-| show                | 是否展示预览图片                                              | boolean                                           | `false`     |
-| videos              | 预览的视频数组（视频自动放到图片之前）                        | VideoArray[]                                      | `[]`        |
-| images              | 预览图片数组                                                  | ImageArray[]                                      | `[]`        |
-| autoplay            | 自动轮播时长，0 表示不会自动轮播                              | number \| string                                  | `3000`      |
-| init-no             | 初始页码                                                      | number                                            | `0`         |
-| pagination-visible  | 分页指示器是否展示                                            | boolean                                           | `false`     |
-| pagination-color    | 分页指示器选中的颜色                                          | string                                            | `#fff`      |
-| content-close       | 点击图片可以退出预览                                          | boolean                                           | `true`      |
-| show-index          | 是否显示页码                                                  | boolean                                           | `true`      |
-| closeable           | 是否显示关闭图标                                              | boolean                                           | `false`     |
-| close-icon-position | 关闭图标位置，可选值：`top-left`                              | string                                            | `top-right` |
-| before-close        | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | (active: number) => boolean \| Promise<`boolean`> | -           |
-| max-zoom            | 手势缩放时，最大缩放比例                                      | number                                            | `3`         |
-| min-zoom            | 手势缩放时，最小缩放比例                                      | number                                            | `1/3`       |
-| is-loop             | 是否循环播放                                                  | boolean                                           | `true`      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| show | 是否展示预览图片 | boolean | `false` |
+| videos | 预览的视频数组（视频自动放到图片之前） | VideoArray[] | `[]` |
+| images | 预览图片数组 | ImageArray[] | `[]` |
+| autoplay | 自动轮播时长，0 表示不会自动轮播 | number \| string | `3000` |
+| init-no | 初始页码 | number | `0` |
+| pagination-visible | 分页指示器是否展示 | boolean | `false` |
+| pagination-color | 分页指示器选中的颜色 | string | `#fff` |
+| content-close | 点击图片可以退出预览 | boolean | `true` |
+| show-index | 是否显示页码 | boolean | `true` |
+| closeable | 是否显示关闭图标 | boolean | `false` |
+| close-icon-position | 关闭图标位置，可选值：`top-left` | string | `top-right` |
+| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | (active: number) => boolean \| Promise<`boolean`> | - |
+| max-zoom | 手势缩放时，最大缩放比例 | number | `3` |
+| min-zoom | 手势缩放时，最小缩放比例 | number | `1/3` |
+| is-loop | 是否循环播放 | boolean | `true` |
 
 ### ImageArray 数据结构
 
-| 键名 | 说明         | 类型   |
-| ---- | ------------ | ------ |
-| src  | 预览图片链接 | string |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| src | 预览图片链接 | string |
 
 ### VideoArray 数据结构
 
-| 键名    | 说明                                                                 | 类型   |
-| ------- | -------------------------------------------------------------------- | ------ |
-| source  | 视频地址和类型设置，等同于 Video 组件的 [source 属性](#/zh-CN/video) | object |
-| options | 控制视频播放属性，等同于 Video 组件的 [options 属性](#/zh-CN/video)  | object |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| source | 视频地址和类型设置，等同于 Video 组件的 [source 属性](#/zh-CN/video) | object |
+| options | 控制视频播放属性，等同于 Video 组件的 [options 属性](#/zh-CN/video) | object |
 
 ### Events
 
-| 事件名 | 说明                       | 回调参数           |
-| ------ | -------------------------- | ------------------ |
-| close  | 点击遮罩关闭图片预览时触发 | 无                 |
-| change | 切换图片时触发             | index:当前图片索引 |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| close | 点击遮罩关闭图片预览时触发 | 无 |
+| change | 切换图片时触发 | index:当前图片索引 |
 
 ### Slots
 
-| 名称      | 说明           |
-| --------- | -------------- |
+| 名称 | 说明 |
+| --- | --- |
 | closeIcon | 自定义关闭图片 |
diff --git a/src/packages/__VUE/imagepreview/doc.taro.md b/src/packages/__VUE/imagepreview/doc.taro.md
index 02d2a657c2..dd34aaffc0 100644
--- a/src/packages/__VUE/imagepreview/doc.taro.md
+++ b/src/packages/__VUE/imagepreview/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { ImagePreview } from '@nutui/nutui';
 
@@ -18,49 +18,39 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn" />
+  <nut-image-preview :show="state.showPreview" :images="state.imgData" @close="hideFn" />
   <nut-cell isLink title="展示图片预览" :showIcon="true" @click="showFn"></nut-cell>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+    }
+  ]
+});
 
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
+const showFn = () => {
+  state.showPreview = true;
+};
 
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
-    }
-  };
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -70,48 +60,38 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-image-preview :show="showPreview" :images="imgData" :init-no="3" @close="hideFn" />
+  <nut-image-preview :show="state.showPreview" :images="state.imgData" :init-no="3" @close="hideFn" />
   <nut-cell isLink title="设置初始页码" :showIcon="true" @click="showFn"></nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+    }
+  ]
+});
 
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
+const showFn = () => {
+  state.showPreview = true;
+};
 
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
-    }
-  };
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -121,54 +101,44 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-image-preview
-    :show="showPreview"
-    :images="imgData"
+    :show="state.showPreview"
+    :images="state.imgData"
     :pagination-visible="true"
     pagination-color="red"
     @close="hideFn"
   />
   <nut-cell isLink title="设置轮播指示器及颜色" :showIcon="true" @click="showFn"></nut-cell>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const resData = reactive({
-        showPreview: false,
-        imgData: [
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-          },
-          {
-            src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-          }
-        ]
-      });
-
-      const showFn = () => {
-        resData.showPreview = true;
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+    }
+  ]
+});
 
-      const hideFn = () => {
-        resData.showPreview = false;
-      };
+const showFn = () => {
+  state.showPreview = true;
+};
 
-      return {
-        ...toRefs(resData),
-        showFn,
-        hideFn
-      };
-    }
-  };
+const hideFn = () => {
+  state.showPreview = false;
+};
 </script>
 ```
 
@@ -180,58 +150,56 @@ app.use(ImagePreview);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn" @long-press="longPress" />
-  <nut-cell isLink title="长按图片事件，保存到相册" :showIcon="true" @click="showFn"></nut-cell>
+  <nut-image-preview :show="state.showPreview" :images="state.imgData" @close="hideFn" @long-press="longPress" />
+  <nut-cell is-link title="长按图片事件，保存到相册" :show-icon="true" @click="showFn"></nut-cell>
 </template>
 
-<script lang="ts" setup>
-  import { reactive, toRefs } from 'vue';
-  import Taro from '@tarojs/taro';
-  const resData = reactive({
-    showPreview: false,
-    imgData: [
-      {
-        src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
-      },
-      {
-        src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
-      },
-      {
-        src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
-      },
-      {
-        src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
-      }
-    ]
+<script setup>
+import { reactive } from 'vue';
+import Taro from '@tarojs/taro';
+const state = reactive({
+  showPreview: false,
+  imgData: [
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+    },
+    {
+      src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+    }
+  ]
+});
+
+const showFn = () => {
+  state.showPreview = true;
+};
+
+const hideFn = () => {
+  state.showPreview = false;
+};
+
+const longPress = (image) => {
+  Taro.getImageInfo({
+    src: image.src,
+    success: (res) => {
+      Taro.saveImageToPhotosAlbum({
+        filePath: res.path,
+        success: () => {
+          Taro.showToast({
+            title: '保存成功'
+          });
+        }
+      });
+    }
   });
-
-  const { showPreview, imgData } = toRefs(resData);
-
-  const showFn = () => {
-    resData.showPreview = true;
-  };
-
-  const hideFn = () => {
-    resData.showPreview = false;
-  };
-
-  const longPress = (image: { src: string }) => {
-    Taro.getImageInfo({
-      src: image.src,
-      success: (res) => {
-        Taro.saveImageToPhotosAlbum({
-          filePath: res.path,
-          success: () => {
-            Taro.showToast({
-              title: '保存成功'
-            });
-          }
-        });
-      }
-    });
-  };
+};
 </script>
 ```
 
@@ -241,44 +209,44 @@ app.use(ImagePreview);
 
 ### Props
 
-| 参数                | 说明                                                          | 类型                                              | 默认值      |
-| ------------------- | ------------------------------------------------------------- | ------------------------------------------------- | ----------- |
-| show                | 是否展示预览图片                                              | boolean                                           | `false`     |
-| images              | 预览图片数组                                                  | ImageArray[]                                      | `[]`        |
-| autoplay            | 自动轮播时长，0 表示不会自动轮播                              | number \| string                                  | `3000`      |
-| init-no             | 初始页码                                                      | number                                            | `0`         |
-| pagination-visible  | 分页指示器是否展示                                            | boolean                                           | `false`     |
-| pagination-color    | 分页指示器选中的颜色                                          | string                                            | `#fff`      |
-| content-close       | 点击图片可以退出预览                                          | boolean                                           | `true`      |
-| show-index          | 是否显示页码                                                  | boolean                                           | `true`      |
-| closeable           | 是否显示关闭图标                                              | boolean                                           | `false`     |
-| close-icon-position | 关闭图标位置，可选值：`top-left`                              | string                                            | `top-right` |
-| before-close        | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | (active: number) => boolean \| Promise<`boolean`> | -           |
-| is-Loop             | 是否循环播放                                                  | boolean                                           | `true`      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| show | 是否展示预览图片 | boolean | `false` |
+| images | 预览图片数组 | ImageArray[] | `[]` |
+| autoplay | 自动轮播时长，0 表示不会自动轮播 | number \| string | `3000` |
+| init-no | 初始页码 | number | `0` |
+| pagination-visible | 分页指示器是否展示 | boolean | `false` |
+| pagination-color | 分页指示器选中的颜色 | string | `#fff` |
+| content-close | 点击图片可以退出预览 | boolean | `true` |
+| show-index | 是否显示页码 | boolean | `true` |
+| closeable | 是否显示关闭图标 | boolean | `false` |
+| close-icon-position | 关闭图标位置，可选值：`top-left` | string | `top-right` |
+| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 `Promise` | (active: number) => boolean \| Promise<`boolean`> | - |
+| is-Loop | 是否循环播放 | boolean | `true` |
 
 ### ImageArray 数据结构
 
-| 键名 | 说明         | 类型   |
-| ---- | ------------ | ------ |
-| src  | 预览图片链接 | string |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| src | 预览图片链接 | string |
 
 ### VideoArray 数据结构
 
-| 键名    | 说明                                                                 | 类型   |
-| ------- | -------------------------------------------------------------------- | ------ |
-| source  | 视频地址和类型设置，等同于 Video 组件的 [source 属性](#/zh-CN/video) | object |
-| options | 控制视频播放属性，等同于 Video 组件的 [options 属性](#/zh-CN/video)  | object |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| source | 视频地址和类型设置，等同于 Video 组件的 [source 属性](#/zh-CN/video) | object |
+| options | 控制视频播放属性，等同于 Video 组件的 [options 属性](#/zh-CN/video) | object |
 
 ### Events
 
-| 事件名     | 说明                       | 回调参数                         |
-| ---------- | -------------------------- | -------------------------------- |
-| close      | 点击遮罩关闭图片预览时触发 | 无                               |
-| change     | 切换图片时触发             | index:当前图片索引               |
-| long-press | 小程序长按图片触发的事件   | (image: { src: string }) => void |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| close | 点击遮罩关闭图片预览时触发 | 无 |
+| change | 切换图片时触发 | index:当前图片索引 |
+| long-press`4.2.1` | 小程序长按图片触发的事件 | (image: { src: string }) => void |
 
 ### Slots
 
-| 名称      | 说明           |
-| --------- | -------------- |
+| 名称 | 说明 |
+| --- | --- |
 | closeIcon | 自定义关闭图片 |
diff --git a/src/packages/__VUE/list/demo.vue b/src/packages/__VUE/list/demo.vue
index db3393a706..9221830106 100644
--- a/src/packages/__VUE/list/demo.vue
+++ b/src/packages/__VUE/list/demo.vue
@@ -2,7 +2,7 @@
   <div class="demo demo-list">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-list :list-data="count" @scroll-bottom="handleScroll">
+      <nut-list :list-data="state.count" @scroll-bottom="handleScroll">
         <template #default="{ index }">
           <div class="list-item">
             {{ index }}
@@ -12,8 +12,8 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { onMounted, reactive, toRefs, defineComponent } from 'vue';
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('list');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -26,26 +26,19 @@ const initTranslate = () =>
       basic: 'Basic Usage'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const state = reactive({
-      count: new Array(100).fill(0)
-    });
-
-    const handleScroll = () => {
-      let arr = new Array(100).fill(0);
-      const len = state.count.length;
-      state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
-    };
+initTranslate();
+const state = reactive({
+  count: new Array(100).fill(0)
+});
 
-    onMounted(() => {
-      state.count = state.count.map((item: number, index: number) => index + 1);
-    });
+const handleScroll = () => {
+  let arr = new Array(100).fill(0);
+  const len = state.count.length;
+  state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
+};
 
-    return { ...toRefs(state), handleScroll, translate };
-  }
+onMounted(() => {
+  state.count = state.count.map((item: number, index: number) => index + 1);
 });
 </script>
 <style lang="scss">
diff --git a/src/packages/__VUE/list/doc.en-US.md b/src/packages/__VUE/list/doc.en-US.md
index 68aae8870c..2c24695972 100644
--- a/src/packages/__VUE/list/doc.en-US.md
+++ b/src/packages/__VUE/list/doc.en-US.md
@@ -10,7 +10,7 @@ In most scenarios, you don't need to use this component. It may have problems su
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { List } from '@nutui/nutui';
 
@@ -22,12 +22,12 @@ app.use();
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <h2>Basic Usage</h2>
     <nut-cell>
-      <nut-list :listData="count" @scroll-bottom="handleScroll">
+      <nut-list :listData="state.count" @scroll-bottom="handleScroll">
         <template v-slot="{ item. index }">
           <div class="list-item"> {{ index }} </div>
         </template>
@@ -35,51 +35,44 @@ app.use();
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-  import { onMounted, reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        count: new Array(100).fill(0)
-      });
-
-      const handleScroll = () => {
-        let arr = new Array(100).fill(0);
-        const len = state.count.length;
-        state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
-      };
-
-      onMounted(() => {
-        state.count = state.count.map((item: number, index: number) => index + 1);
-      });
-
-      return { ...toRefs(state), handleScroll };
-    }
-  };
+<script setup>
+import { onMounted, reactive } from 'vue';
+const state = reactive({
+  count: new Array(100).fill(0)
+});
+
+const handleScroll = () => {
+  let arr = new Array(100).fill(0);
+  const len = state.count.length;
+  state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
+};
+
+onMounted(() => {
+  state.count = state.count.map((item: number, index: number) => index + 1);
+});
 </script>
 <style>
-  body {
-    width: 100%;
-    height: 100vh;
-  }
-  #app {
-    width: 100%;
-    height: 100%;
-  }
-  .nut-cell {
-    height: 100%;
-  }
-  .nut-list-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    margin-bottom: 10px;
-    height: 50px;
-    background-color: #f4a8b6;
-    border-radius: 10px;
-  }
+body {
+  width: 100%;
+  height: 100vh;
+}
+#app {
+  width: 100%;
+  height: 100%;
+}
+.nut-cell {
+  height: 100%;
+}
+.nut-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 10px;
+  height: 50px;
+  background-color: #f4a8b6;
+  border-radius: 10px;
+}
 </style>
 ```
 
@@ -89,25 +82,25 @@ app.use();
 
 ### Props
 
-| Attribute        | Description                                                           | Type   | Default              |
-| ---------------- | --------------------------------------------------------------------- | ------ | -------------------- |
-| height           | The height/estimated height of the list item, supports unfixed height | Number | `80`                 |
-| list-data        | List data                                                             | any[]  | `[]`                 |
-| container-height | Container height(The maximum value cannot exceed the viewable area)   | Number | `Visual area height` |
-| buffer-size      | data buffer length                                                    | Number | `5`                  |
-| margin           | The gap between the lists is consistent with the custom style         | Number | `10`                 |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| height | The height/estimated height of the list item, supports unfixed height | Number | `80` |
+| list-data | List data | any[] | `[]` |
+| container-height | Container height(The maximum value cannot exceed the viewable area) | Number | `Visual area height` |
+| buffer-size | data buffer length | Number | `5` |
+| margin | The gap between the lists is consistent with the custom style | Number | `10` |
 
 ### Slots
 
-| Attribute | Description    | Type   |
-| --------- | -------------- | ------ |
-| item      | List item data | Object |
-| index     | Indexes        | Number |
+| Attribute | Description | Type |
+| --- | --- | --- |
+| item | List item data | Object |
+| index | Indexes | Number |
 
 ### Events
 
-| Event         | Description                            | Arguments |
-| ------------- | -------------------------------------- | --------- |
-| scroll-bottom | Triggered when scrolling to the bottom | -         |
-| scroll-up     | scroll up                              | -         |
-| scroll-down   | scroll down                            | -         |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| scroll-bottom | Triggered when scrolling to the bottom | - |
+| scroll-up | scroll up | - |
+| scroll-down | scroll down | - |
diff --git a/src/packages/__VUE/list/doc.md b/src/packages/__VUE/list/doc.md
index c6252edfcf..c4b87f5a86 100644
--- a/src/packages/__VUE/list/doc.md
+++ b/src/packages/__VUE/list/doc.md
@@ -10,7 +10,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { List } from '@nutui/nutui';
 
@@ -22,12 +22,12 @@ app.use();
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
+      <nut-list :height="50" :listData="state.count" @scroll-bottom="handleScroll">
         <template v-slot="{ item, index }">
           <div class="list-item"> {{ index }} </div>
         </template>
@@ -35,51 +35,44 @@ app.use();
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-  import { onMounted, reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        count: new Array(100).fill(0)
-      });
-
-      const handleScroll = () => {
-        let arr = new Array(100).fill(0);
-        const len = state.count.length;
-        state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
-      };
-
-      onMounted(() => {
-        state.count = state.count.map((item: number, index: number) => index + 1);
-      });
-
-      return { ...toRefs(state), handleScroll };
-    }
-  };
+<script setup>
+import { onMounted, reactive } from 'vue';
+const state = reactive({
+  count: new Array(100).fill(0)
+});
+
+const handleScroll = () => {
+  let arr = new Array(100).fill(0);
+  const len = state.count.length;
+  state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
+};
+
+onMounted(() => {
+  state.count = state.count.map((item: number, index: number) => index + 1);
+});
 </script>
 <style>
-  body {
-    width: 100%;
-    height: 100vh;
-  }
-  #app {
-    width: 100%;
-    height: 100%;
-  }
-  .nut-cell {
-    height: 100%;
-  }
-  .nut-list-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 50px;
-    margin-bottom: 10px;
-    background-color: #f4a8b6;
-    border-radius: 10px;
-  }
+body {
+  width: 100%;
+  height: 100vh;
+}
+#app {
+  width: 100%;
+  height: 100%;
+}
+.nut-cell {
+  height: 100%;
+}
+.nut-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 50px;
+  margin-bottom: 10px;
+  background-color: #f4a8b6;
+  border-radius: 10px;
+}
 </style>
 ```
 
@@ -89,25 +82,25 @@ app.use();
 
 ### Props
 
-| 参数             | 说明                                  | 类型   | 默认值       |
-| ---------------- | ------------------------------------- | ------ | ------------ |
-| height           | 列表项的高度/预估高度，支持不固定高度 | Number | `80`         |
-| list-data        | 列表数据                              | any[]  | `[]`         |
-| container-height | 容器高度(最大值不能超过可视区)        | Number | `可视区高度` |
-| buffer-size      | 数据缓冲区长度                        | Number | `5`          |
-| margin           | 列表之间的间隙，和自定义样式保持一致  | Number | `10`         |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| height | 列表项的高度/预估高度，支持不固定高度 | Number | `80` |
+| list-data | 列表数据 | any[] | `[]` |
+| container-height | 容器高度(最大值不能超过可视区) | Number | `可视区高度` |
+| buffer-size | 数据缓冲区长度 | Number | `5` |
+| margin | 列表之间的间隙，和自定义样式保持一致 | Number | `10` |
 
 ### Slots
 
-| 参数  | 说明       | 类型   |
-| ----- | ---------- | ------ |
-| item  | 列表项数据 | Object |
-| index | 列表索引   | Number |
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| item | 列表项数据 | Object |
+| index | 列表索引 | Number |
 
 ### Events
 
-| 事件名        | 说明             | 回调参数 |
-| ------------- | ---------------- | -------- |
-| scroll-bottom | 滚动到底部时触发 | -        |
-| scroll-up     | 向上滚动         | -        |
-| scroll-down   | 向下滚动         | -        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| scroll-bottom | 滚动到底部时触发 | - |
+| scroll-up | 向上滚动 | - |
+| scroll-down | 向下滚动 | - |
diff --git a/src/packages/__VUE/list/doc.taro.md b/src/packages/__VUE/list/doc.taro.md
index a8beacd2aa..7ebd43063b 100644
--- a/src/packages/__VUE/list/doc.taro.md
+++ b/src/packages/__VUE/list/doc.taro.md
@@ -10,7 +10,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { List } from '@nutui/nutui-taro';
 
@@ -22,12 +22,12 @@ app.use();
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
+      <nut-list :height="50" :listData="state.count" @scroll-bottom="handleScroll">
         <template v-slot="{ item, index }">
           <div class="list-item"> {{ index }} </div>
         </template>
@@ -35,51 +35,44 @@ app.use();
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-  import { onMounted, reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        count: new Array(100).fill(0)
-      });
-
-      const handleScroll = () => {
-        let arr = new Array(100).fill(0);
-        const len = state.count.length;
-        state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
-      };
-
-      onMounted(() => {
-        state.count = state.count.map((item: number, index: number) => index + 1);
-      });
-
-      return { ...toRefs(state), handleScroll };
-    }
-  };
+<script setup>
+import { onMounted, reactive } from 'vue';
+const state = reactive({
+  count: new Array(100).fill(0)
+});
+
+const handleScroll = () => {
+  let arr = new Array(100).fill(0);
+  const len = state.count.length;
+  state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
+};
+
+onMounted(() => {
+  state.count = state.count.map((item: number, index: number) => index + 1);
+});
 </script>
 <style>
-  body {
-    width: 100%;
-    height: 100vh;
-  }
-  #app {
-    width: 100%;
-    height: 100%;
-  }
-  .nut-cell {
-    height: 100%;
-  }
-  .nut-list-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 50px;
-    margin-bottom: 10px;
-    background-color: #f4a8b6;
-    border-radius: 10px;
-  }
+body {
+  width: 100%;
+  height: 100vh;
+}
+#app {
+  width: 100%;
+  height: 100%;
+}
+.nut-cell {
+  height: 100%;
+}
+.nut-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 50px;
+  margin-bottom: 10px;
+  background-color: #f4a8b6;
+  border-radius: 10px;
+}
 </style>
 ```
 
@@ -89,25 +82,25 @@ app.use();
 
 ### Props
 
-| 参数             | 说明                                  | 类型   | 默认值       |
-| ---------------- | ------------------------------------- | ------ | ------------ |
-| height           | 列表项的高度/预估高度，支持不固定高度 | Number | `80`         |
-| list-data        | 列表数据                              | any[]  | `[]`         |
-| container-height | 容器高度(最大值不能超过可视区)        | Number | `可视区高度` |
-| buffer-size      | 数据缓冲区长度                        | Number | `5`          |
-| margin           | 列表之间的间隙，和自定义样式保持一致  | Number | `10`         |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| height | 列表项的高度/预估高度，支持不固定高度 | Number | `80` |
+| list-data | 列表数据 | any[] | `[]` |
+| container-height | 容器高度(最大值不能超过可视区) | Number | `可视区高度` |
+| buffer-size | 数据缓冲区长度 | Number | `5` |
+| margin | 列表之间的间隙，和自定义样式保持一致 | Number | `10` |
 
 ### Slots
 
-| 参数  | 说明       | 类型   |
-| ----- | ---------- | ------ |
-| item  | 列表项数据 | Object |
-| index | 列表索引   | Number |
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| item | 列表项数据 | Object |
+| index | 列表索引 | Number |
 
 ### Events
 
-| 事件名        | 说明             | 回调参数 |
-| ------------- | ---------------- | -------- |
-| scroll-bottom | 滚动到底部时触发 | -        |
-| scroll-up     | 向上滚动         | -        |
-| scroll-down   | 向下滚动         | -        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| scroll-bottom | 滚动到底部时触发 | - |
+| scroll-up | 向上滚动 | - |
+| scroll-down | 向下滚动 | - |
diff --git a/src/packages/__VUE/noticebar/demo.vue b/src/packages/__VUE/noticebar/demo.vue
index 300c9dcc1e..e958ce46d2 100644
--- a/src/packages/__VUE/noticebar/demo.vue
+++ b/src/packages/__VUE/noticebar/demo.vue
@@ -31,7 +31,7 @@
     <div class="interstroll-list">
       <nut-noticebar
         direction="vertical"
-        :list="horseLamp1"
+        :list="state.horseLamp1"
         :speed="10"
         :stand-time="1000"
         :close-mode="true"
@@ -65,7 +65,7 @@
 
     <h2>{{ translate('customRightIcon') }}</h2>
     <div class="interstroll-list">
-      <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :stand-time="1000">
+      <nut-noticebar direction="vertical" :list="state.horseLamp1" :speed="10" :stand-time="1000">
         <template #right-icon>
           <Fabulous />
         </template>
@@ -75,15 +75,15 @@
     <h2>{{ translate('scrollEvent') }}</h2>
     <div class="interstroll-list">
       <nut-noticebar
-        :text="`${translate('text')} - ${translate('scrollCount')}：[${acrossCount}]`"
+        :text="`${translate('text')} - ${translate('scrollCount')}：[${state.acrossCount}]`"
         @across-end="onAcrossEnd"
       />
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
 import { Fabulous } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('noticebar');
@@ -124,54 +124,37 @@ const initTranslate = () =>
       scrollEvent: 'across - scrolling end event'
     }
   });
-
-export default defineComponent({
-  components: { Fabulous },
-  props: {},
-  setup() {
-    initTranslate();
-    const state = reactive({
-      horseLamp1: translate('horseLamp'),
-      horseLamp2: translate('horseLamp'),
-      horseLamp3: translate('horseLamp'),
-      text: translate('text'),
-      acrossCount: 0
-    });
-
-    const data1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-
-    const closeFun = () => {
-      console.log('hello world');
-    };
-    const go = (item: any) => {
-      console.log(item);
-    };
-
-    setTimeout(() => {
-      data1.value = [
-        'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
-        '级联选择 Cascader',
-        '日期选择器 DatePicker',
-        '复选按钮 CheckBox'
-      ];
-    }, 2000);
-
-    const onAcrossEnd = () => {
-      state.acrossCount++;
-      console.log('动画结束');
-    };
-
-    return {
-      ...toRefs(state),
-      closeFun,
-      go,
-      Fabulous,
-      data1,
-      onAcrossEnd,
-      translate
-    };
-  }
+initTranslate();
+const state = reactive({
+  horseLamp1: translate('horseLamp'),
+  horseLamp2: translate('horseLamp'),
+  horseLamp3: translate('horseLamp'),
+  text: translate('text'),
+  acrossCount: 0
 });
+
+const data1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+
+const closeFun = () => {
+  console.log('hello world');
+};
+const go = (item: any) => {
+  console.log(item);
+};
+
+setTimeout(() => {
+  data1.value = [
+    'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+    '级联选择 Cascader',
+    '日期选择器 DatePicker',
+    '复选按钮 CheckBox'
+  ];
+}, 2000);
+
+const onAcrossEnd = () => {
+  state.acrossCount++;
+  console.log('动画结束');
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/noticebar/doc.en-US.md b/src/packages/__VUE/noticebar/doc.en-US.md
index 0ddba512ed..7063503229 100644
--- a/src/packages/__VUE/noticebar/doc.en-US.md
+++ b/src/packages/__VUE/noticebar/doc.en-US.md
@@ -6,7 +6,7 @@ Used to display a group of message notifications in a continuons loop.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Noticebar } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     text="Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience."
@@ -36,7 +36,7 @@ Scrolling is automatically enabled when the content length of the notification b
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar text="Nutui is a mobile terminal component library." :scrollable="true"></nut-noticebar>
 
@@ -55,7 +55,7 @@ Scrolling is automatically enabled when the content length of the notification b
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar :close-mode="true">
     Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be
@@ -87,7 +87,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     text="Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience."
@@ -102,23 +102,18 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000" @click="go" :close-mode="true">
   </nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp1 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
-      const go = (item) => {
-        console.log(item);
-      };
-      return { horseLamp1, go };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const horseLamp1 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
+const go = (item) => {
+  console.log(item);
+};
 </script>
 ```
 
@@ -128,7 +123,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     direction="vertical"
@@ -139,14 +134,9 @@ When text is long, you can enable multi-line display by setting the wrapable pro
   ></nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp2 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
-      return { horseLamp2 };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const horseLamp2 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
 </script>
 ```
 
@@ -156,21 +146,16 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar direction="vertical" :height="50" :speed="10" :standTime="1000" :list="[]">
-    <div class="custom-item" :data-index="index" v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
+    <div class="custom-item" :data-index="index" v-for="(item, index) in horseLamp3" :key="index">{{ item }}</div>
   </nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp3 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
-      return { horseLamp3 };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const horseLamp3 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
 </script>
 ```
 
@@ -180,7 +165,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000">
     <template #right-icon>
@@ -189,16 +174,10 @@ When text is long, you can enable multi-line display by setting the wrapable pro
   </nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  import { Fabulous } from '@nutui/icons-vue';
-  export default {
-    components: { Fabulous },
-    setup(props) {
-      const horseLamp1 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
-      return { horseLamp1 };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Fabulous } from '@nutui/icons-vue';
+const horseLamp1 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
 </script>
 ```
 
@@ -208,44 +187,44 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 ### Props
 
-| Attribute  | Description                                          | Type                                            | Default  |
-| ---------- | ---------------------------------------------------- | ----------------------------------------------- | -------- |
-| direction  | Rolling direction                                    | string                                          | `across` |
-| text       | Notice text content                                  | string                                          | -        |
-| close-mode | Whether to enable the off mode                       | boolean                                         | `false`  |
-| left-icon  | Show left Icon                                       | boolean, Scroll direction 'across' takes effect | `true`   |
-| color      | Text Color                                           | string                                          | -        |
-| background | Background                                           | string                                          | -        |
-| delay      | Delay time                                           | string \| number                                | `1`      |
-| scrollable | Whether to scroll content                            | boolean                                         | `true`   |
-| speed      | Scrolling speed (px/s)                               | number                                          | `50`     |
-| wrapable   | Whether to enable text wrap,`scrollable` set `false` | boolean                                         | `false`  |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| direction | Rolling direction | string | `across` |
+| text | Notice text content | string | - |
+| close-mode | Whether to enable the off mode | boolean | `false` |
+| left-icon | Show left Icon | boolean, Scroll direction 'across' takes effect | `true` |
+| color | Text Color | string | - |
+| background | Background | string | - |
+| delay | Delay time | string \| number | `1` |
+| scrollable | Whether to scroll content | boolean | `true` |
+| speed | Scrolling speed (px/s) | number | `50` |
+| wrapable | Whether to enable text wrap,`scrollable` set `false` | boolean | `false` |
 
 ### Props（direction=vertical）
 
-| Attribute  | Description                    | Type    | Default |
-| ---------- | ------------------------------ | ------- | ------- |
-| list       | List                           | array   | `[]`    |
-| speed      | Scrolling speed                | number  | `50`    |
-| stand-time | Show time(millisecond)         | number  | `1000`  |
-| complex-am | Complex animation              | boolean | `false` |
-| height     | height                         | number  | `40`    |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| list | List | array | `[]` |
+| speed | Scrolling speed | number | `50` |
+| stand-time | Show time(millisecond) | number | `1000` |
+| complex-am | Complex animation | boolean | `false` |
+| height | height | number | `40` |
 | close-mode | Whether to enable the off mode | boolean | `false` |
 
 ### Slots
 
-| Name       | Description                                              |
-| ---------- | -------------------------------------------------------- |
-| default    | Notice text content                                      |
-| right-icon | Custom right icon                                        |
-| left-icon  | Custom left icon, Scroll direction 'across' takes effect |
+| Name | Description |
+| --- | --- |
+| default | Notice text content |
+| right-icon | Custom right icon |
+| left-icon | Custom left icon, Scroll direction 'across' takes effect |
 
 ### Events
 
-| Attribute  | Description                        | Arguments    |
-| ---------- | ---------------------------------- | ------------ |
-| click      | Emitted when Noticebar is clicked  | event: Event |
-| close      | Emitted when Noticebar is closed   | event: Event |
+| Attribute | Description | Arguments |
+| --- | --- | --- |
+| click | Emitted when Noticebar is clicked | event: Event |
+| close | Emitted when Noticebar is closed | event: Event |
 | across-end | Emitted when across scrolling ends | event: Event |
 
 ## Theming
@@ -254,14 +233,14 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                               | Default Value            |
-| ---------------------------------- | ------------------------ |
-| --nut-noticebar-background         | _rgba(251, 248, 220, 1)_ |
-| --nut-noticebar-color              | _#d9500b_                |
-| --nut-noticebar-font-size          | _14px_                   |
-| --nut-noticebar-across-height      | _40px_                   |
-| --nut-noticebar-across-line-height | _24px_                   |
-| --nut-noticebar-box-padding        | _0 16px_                 |
-| --nut-noticebar-wrapable-padding   | _16px_                   |
-| --nut-noticebar-lefticon-margin    | _0px 10px_               |
-| --nut-noticebar-righticon-margin   | _0px 10px_               |
+| Name | Default Value |
+| --- | --- |
+| --nut-noticebar-background | _rgba(251, 248, 220, 1)_ |
+| --nut-noticebar-color | _#d9500b_ |
+| --nut-noticebar-font-size | _14px_ |
+| --nut-noticebar-across-height | _40px_ |
+| --nut-noticebar-across-line-height | _24px_ |
+| --nut-noticebar-box-padding | _0 16px_ |
+| --nut-noticebar-wrapable-padding | _16px_ |
+| --nut-noticebar-lefticon-margin | _0px 10px_ |
+| --nut-noticebar-righticon-margin | _0px 10px_ |
diff --git a/src/packages/__VUE/noticebar/doc.md b/src/packages/__VUE/noticebar/doc.md
index e7116fedcc..b45addeae1 100644
--- a/src/packages/__VUE/noticebar/doc.md
+++ b/src/packages/__VUE/noticebar/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Noticebar } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
@@ -36,7 +36,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar text="华为畅享9新品即将上市" :scrollable="true"></nut-noticebar>
 
@@ -53,7 +53,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar :close-mode="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
     NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在
@@ -73,7 +73,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar :scrollable="false">
     <template #left-icon>
@@ -95,7 +95,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
@@ -110,23 +110,18 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000" @click="go" :close-mode="true">
   </nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      const go = (item) => {
-        console.log(item);
-      };
-      return { horseLamp1, go };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+const go = (item) => {
+  console.log(item);
+};
 </script>
 ```
 
@@ -136,7 +131,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     direction="vertical"
@@ -147,14 +142,9 @@ app.use(Noticebar);
   ></nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp2 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      return { horseLamp2 };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const horseLamp2 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
 </script>
 ```
 
@@ -164,21 +154,16 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar direction="vertical" :height="50" :speed="10" :standTime="1000" :list="[]">
-    <div class="custom-item" :data-index="index" v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
+    <div class="custom-item" :data-index="index" v-for="(item, index) in horseLamp3" :key="index">{{ item }}</div>
   </nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp3 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      return { horseLamp3 };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const horseLamp3 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
 </script>
 ```
 
@@ -188,7 +173,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000">
     <template #right-icon>
@@ -197,16 +182,10 @@ app.use(Noticebar);
   </nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  import { Fabulous } from '@nutui/icons-vue';
-  export default {
-    components: { Fabulous },
-    setup(props) {
-      const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      return { horseLamp1 };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Fabulous } from '@nutui/icons-vue';
+const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
 </script>
 ```
 
@@ -216,44 +195,44 @@ app.use(Noticebar);
 
 ### Props
 
-| 参数       | 说明                                            | 类型             | 默认值   |
-| ---------- | ----------------------------------------------- | ---------------- | -------- |
-| direction  | 滚动的方向，可选 `across`、`vertical`           | string           | `across` |
-| text       | 提示的信息                                      | string           | -        |
-| close-mode | 是否启用关闭模式                                | boolean          | `false`  |
-| left-icon  | 是否展示左侧图标, 滚动方向为 `across` 生效      | boolean          | `true`   |
-| color      | 导航栏的文字颜色                                | string           | -        |
-| background | 导航栏的背景颜色                                | string           | -        |
-| delay      | 延时多少秒                                      | string \| number | `1`      |
-| scrollable | 是否可以滚动                                    | boolean          | `true`   |
-| speed      | 滚动速率 (px/s)                                 | number           | `50`     |
-| wrapable   | 是否开启文本换行，`scrollable` 会设置为 `false` | boolean          | `false`  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| direction | 滚动的方向，可选 `across`、`vertical` | string | `across` |
+| text | 提示的信息 | string | - |
+| close-mode | 是否启用关闭模式 | boolean | `false` |
+| left-icon | 是否展示左侧图标, 滚动方向为 `across` 生效 | boolean | `true` |
+| color | 导航栏的文字颜色 | string | - |
+| background | 导航栏的背景颜色 | string | - |
+| delay | 延时多少秒 | string \| number | `1` |
+| scrollable | 是否可以滚动 | boolean | `true` |
+| speed | 滚动速率 (px/s) | number | `50` |
+| wrapable | 是否开启文本换行，`scrollable` 会设置为 `false` | boolean | `false` |
 
 ### Props（direction=vertical）
 
-| 参数       | 说明                                                                                 | 类型    | 默认值  |
-| ---------- | ------------------------------------------------------------------------------------ | ------- | ------- |
-| list       | 纵向滚动数据列表                                                                     | Array   | `[]`    |
-| speed      | 滚动的速度                                                                           | number  | `50`    |
-| stand-time | 停留时间(毫秒)                                                                       | number  | `1000`  |
-| complex-am | 稍复杂的动画，耗能会高                                                               | boolean | `false` |
-| height     | 每一个滚动列的高度(px)，注意：在使用 `slot` 插槽定义滚动单元时，按照实际高度修改此值 | number  | `40`    |
-| close-mode | 是否启用右侧关闭图标，可以通过 `slot[name=right-icon]` 自定义图标                    | boolean | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| list | 纵向滚动数据列表 | Array | `[]` |
+| speed | 滚动的速度 | number | `50` |
+| stand-time | 停留时间(毫秒) | number | `1000` |
+| complex-am | 稍复杂的动画，耗能会高 | boolean | `false` |
+| height | 每一个滚动列的高度(px)，注意：在使用 `slot` 插槽定义滚动单元时，按照实际高度修改此值 | number | `40` |
+| close-mode | 是否启用右侧关闭图标，可以通过 `slot[name=right-icon]` 自定义图标 | boolean | `false` |
 
 ### Slots
 
-| 名称       | 说明                                     |
-| ---------- | ---------------------------------------- |
-| default    | 通知文本的内容                           |
-| right-icon | 自定义右侧图标                           |
-| left-icon  | 自定义左侧图标, 滚动方向为 `across` 生效 |
+| 名称 | 说明 |
+| --- | --- |
+| default | 通知文本的内容 |
+| right-icon | 自定义右侧图标 |
+| left-icon | 自定义左侧图标, 滚动方向为 `across` 生效 |
 
 ### Events
 
-| 事件名     | 说明               | 回调参数     |
-| ---------- | ------------------ | ------------ |
-| click      | 外层点击事件回调   | event: Event |
-| close      | 关闭通知栏时触发   | event: Event |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | 外层点击事件回调 | event: Event |
+| close | 关闭通知栏时触发 | event: Event |
 | across-end | 横向滚动结束时触发 | event: Event |
 
 ## 主题定制
@@ -262,14 +241,14 @@ app.use(Noticebar);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                               | 默认值                   |
-| ---------------------------------- | ------------------------ |
-| --nut-noticebar-background         | _rgba(251, 248, 220, 1)_ |
-| --nut-noticebar-color              | _#d9500b_                |
-| --nut-noticebar-font-size          | _14px_                   |
-| --nut-noticebar-across-height      | _40px_                   |
-| --nut-noticebar-across-line-height | _24px_                   |
-| --nut-noticebar-box-padding        | _0 16px_                 |
-| --nut-noticebar-wrapable-padding   | _16px_                   |
-| --nut-noticebar-lefticon-margin    | _0px 10px_               |
-| --nut-noticebar-righticon-margin   | _0px 10px_               |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-noticebar-background | _rgba(251, 248, 220, 1)_ |
+| --nut-noticebar-color | _#d9500b_ |
+| --nut-noticebar-font-size | _14px_ |
+| --nut-noticebar-across-height | _40px_ |
+| --nut-noticebar-across-line-height | _24px_ |
+| --nut-noticebar-box-padding | _0 16px_ |
+| --nut-noticebar-wrapable-padding | _16px_ |
+| --nut-noticebar-lefticon-margin | _0px 10px_ |
+| --nut-noticebar-righticon-margin | _0px 10px_ |
diff --git a/src/packages/__VUE/noticebar/doc.taro.md b/src/packages/__VUE/noticebar/doc.taro.md
index 79971e2b40..dbb4a19e95 100644
--- a/src/packages/__VUE/noticebar/doc.taro.md
+++ b/src/packages/__VUE/noticebar/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Noticebar } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
@@ -36,7 +36,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     text="华为畅享9新品即将上市"
@@ -58,7 +58,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar :closeMode="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
     NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在
@@ -78,7 +78,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar :scrollable="false">
     <template #left-icon>
@@ -100,7 +100,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
@@ -115,23 +115,18 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000" @click="go" :closeMode="true">
+  <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000" @click="go" :close-mode="true">
   </nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      const go = (item) => {
-        console.log(item);
-      };
-      return { horseLamp1, go };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+const go = (item) => {
+  console.log(item);
+};
 </script>
 ```
 
@@ -141,7 +136,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar
     direction="vertical"
@@ -152,14 +147,9 @@ app.use(Noticebar);
   ></nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp2 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      return { horseLamp2 };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const horseLamp2 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
 </script>
 ```
 
@@ -169,21 +159,16 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar direction="vertical" :height="50" :speed="10" :standTime="1000" :list="[]">
-    <div class="custom-item" :data-index="index" v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
+    <div class="custom-item" :data-index="index" v-for="(item, index) in horseLamp3" :key="index">{{ item }}</div>
   </nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp3 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      return { horseLamp3 };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const horseLamp3 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
 </script>
 ```
 
@@ -193,7 +178,7 @@ app.use(Noticebar);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000">
     <template #right-icon>
@@ -202,16 +187,10 @@ app.use(Noticebar);
   </nut-noticebar>
 </template>
 
-<script>
-  import { ref } from 'vue';
-  import { Fabulous } from '@nutui/icons-vue-taro';
-  export default {
-    components: { Fabulous },
-    setup(props) {
-      const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      return { horseLamp1 };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { Fabulous } from '@nutui/icons-vue-taro';
+const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
 </script>
 ```
 
@@ -221,44 +200,44 @@ app.use(Noticebar);
 
 ### Props
 
-| 字段       | 说明                                           | 类型             | 默认值   |
-| ---------- | ---------------------------------------------- | ---------------- | -------- |
-| direction  | 滚动的方向，可选 `across`、`vertical `         | string           | `across` |
-| text       | 提示的信息                                     | string           | -        |
-| close-mode | 是否启用关闭模式                               | boolean          | `false`  |
-| left-icon  | 是否展示左侧图标, 滚动方向为 `across` 生效     | boolean          | `true`   |
-| color      | 导航栏的文字颜色                               | string           | -        |
-| background | 导航栏的背景颜色                               | string           | -        |
-| delay      | 延时多少秒                                     | string \| number | `1`      |
-| scrollable | 是否可以滚动                                   | boolean          | `true`   |
-| speed      | 滚动速率 (px/s)                                | number           | `50`     |
-| wrapable   | 是否开启文本换行,`scrollable` 会设置为 `false` | boolean          | `false`  |
+| 字段 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| direction | 滚动的方向，可选 `across`、`vertical ` | string | `across` |
+| text | 提示的信息 | string | - |
+| close-mode | 是否启用关闭模式 | boolean | `false` |
+| left-icon | 是否展示左侧图标, 滚动方向为 `across` 生效 | boolean | `true` |
+| color | 导航栏的文字颜色 | string | - |
+| background | 导航栏的背景颜色 | string | - |
+| delay | 延时多少秒 | string \| number | `1` |
+| scrollable | 是否可以滚动 | boolean | `true` |
+| speed | 滚动速率 (px/s) | number | `50` |
+| wrapable | 是否开启文本换行,`scrollable` 会设置为 `false` | boolean | `false` |
 
 ### Props（direction=vertical）
 
-| 参数       | 说明                                                                               | 类型    | 默认值  |
-| ---------- | ---------------------------------------------------------------------------------- | ------- | ------- |
-| list       | 纵向滚动数据列表                                                                   | array   | `[]`    |
-| speed      | 滚动的速度                                                                         | number  | `50`    |
-| stand-time | 停留时间(毫秒)                                                                     | number  | `1000`  |
-| complex-am | 稍复杂的动画，耗能会高                                                             | boolean | `false` |
-| height     | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值 | number  | `40`    |
-| close-mode | 是否启用右侧关闭图标，可以通过 `slot[name=right-icon]`自定义图标                   | boolean | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| list | 纵向滚动数据列表 | array | `[]` |
+| speed | 滚动的速度 | number | `50` |
+| stand-time | 停留时间(毫秒) | number | `1000` |
+| complex-am | 稍复杂的动画，耗能会高 | boolean | `false` |
+| height | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值 | number | `40` |
+| close-mode | 是否启用右侧关闭图标，可以通过 `slot[name=right-icon]`自定义图标 | boolean | `false` |
 
 ### Slots
 
-| 名称       | 说明                                     |
-| ---------- | ---------------------------------------- |
-| default    | 通知文本的内容                           |
-| right-icon | 自定义右侧图标                           |
-| left-icon  | 自定义左侧图标, 滚动方向为 `across` 生效 |
+| 名称 | 说明 |
+| --- | --- |
+| default | 通知文本的内容 |
+| right-icon | 自定义右侧图标 |
+| left-icon | 自定义左侧图标, 滚动方向为 `across` 生效 |
 
 ### Events
 
-| 事件名 | 说明             | 回调参数     |
-| ------ | ---------------- | ------------ |
-| click  | 外层点击事件回调 | event: Event |
-| close  | 关闭通知栏时触发 | event: Event |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | 外层点击事件回调 | event: Event |
+| close | 关闭通知栏时触发 | event: Event |
 
 ## 主题定制
 
@@ -266,14 +245,14 @@ app.use(Noticebar);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                               | 默认值                   |
-| ---------------------------------- | ------------------------ |
-| --nut-noticebar-background         | _rgba(251, 248, 220, 1)_ |
-| --nut-noticebar-color              | _#d9500b_                |
-| --nut-noticebar-font-size          | _14px_                   |
-| --nut-noticebar-across-height      | _40px_                   |
-| --nut-noticebar-across-line-height | _24px_                   |
-| --nut-noticebar-box-padding        | _0 16px_                 |
-| --nut-noticebar-wrapable-padding   | _16px_                   |
-| --nut-noticebar-lefticon-margin    | _0px 10px_               |
-| --nut-noticebar-righticon-margin   | _0px 10px_               |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-noticebar-background | _rgba(251, 248, 220, 1)_ |
+| --nut-noticebar-color | _#d9500b_ |
+| --nut-noticebar-font-size | _14px_ |
+| --nut-noticebar-across-height | _40px_ |
+| --nut-noticebar-across-line-height | _24px_ |
+| --nut-noticebar-box-padding | _0 16px_ |
+| --nut-noticebar-wrapable-padding | _16px_ |
+| --nut-noticebar-lefticon-margin | _0px 10px_ |
+| --nut-noticebar-righticon-margin | _0px 10px_ |
diff --git a/src/packages/__VUE/popover/demo.vue b/src/packages/__VUE/popover/demo.vue
index f2c55d29ab..b561a9f999 100644
--- a/src/packages/__VUE/popover/demo.vue
+++ b/src/packages/__VUE/popover/demo.vue
@@ -4,14 +4,19 @@
 
     <nut-row type="flex">
       <nut-col :span="8">
-        <nut-popover v-model:visible="lightTheme" :list="iconItemList" location="bottom-start" @choose="chooseItem">
+        <nut-popover
+          v-model:visible="state.lightTheme"
+          :list="iconItemList"
+          location="bottom-start"
+          @choose="chooseItem"
+        >
           <template #reference>
             <nut-button type="primary" shape="square">{{ translate('light') }}</nut-button>
           </template>
         </nut-popover>
       </nut-col>
       <nut-col :span="8">
-        <nut-popover v-model:visible="darkTheme" theme="dark" location="bottom-start" :list="iconItemList">
+        <nut-popover v-model:visible="state.darkTheme" theme="dark" location="bottom-start" :list="iconItemList">
           <template #reference>
             <nut-button type="primary" shape="square">{{ translate('dark') }}</nut-button>
           </template>
@@ -23,14 +28,14 @@
 
     <nut-row type="flex">
       <nut-col :span="8">
-        <nut-popover v-model:visible="showIcon" theme="dark" :list="itemList">
+        <nut-popover v-model:visible="state.showIcon" theme="dark" :list="itemList">
           <template #reference>
             <nut-button type="primary" shape="square">{{ translate('showIcon') }}</nut-button>
           </template>
         </nut-popover>
       </nut-col>
       <nut-col :span="8">
-        <nut-popover v-model:visible="disableAction" :list="itemListDisabled" location="right">
+        <nut-popover v-model:visible="state.disableAction" :list="itemListDisabled" location="right">
           <template #reference>
             <nut-button type="primary" shape="square">{{ translate('disableAction') }}</nut-button>
           </template>
@@ -39,7 +44,7 @@
     </nut-row>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-popover v-model:visible="Customized" location="top-start" custom-class="customClass">
+    <nut-popover v-model:visible="state.Customized" location="top-start" custom-class="customClass">
       <template #reference>
         <nut-button type="primary" shape="square">{{ translate('content') }}</nut-button>
       </template>
@@ -57,7 +62,7 @@
     <h2>{{ translate('title3') }}</h2>
 
     <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
-    <nut-popup v-model:visible="showPicker" position="bottom">
+    <nut-popup v-model:visible="state.showPicker" position="bottom">
       <nut-picker
         :columns="columns"
         title=""
@@ -75,7 +80,7 @@
     </nut-popup>
 
     <nut-popover
-      v-model:visible="customPositon"
+      v-model:visible="state.customPositon"
       target-id="pickerTarget"
       :location="curPostion"
       theme="dark"
@@ -88,7 +93,7 @@
       {{ translate('contentTarget') }}
     </nut-button>
     <nut-popover
-      v-model:visible="customTarget"
+      v-model:visible="state.customTarget"
       target-id="popid"
       :list="iconItemList"
       location="top-start"
@@ -96,16 +101,22 @@
 
     <h2>{{ translate('contentColor') }}</h2>
 
-    <nut-popover v-model:visible="customColor" :list="iconItemList" location="right-start" bg-color="#f00" theme="dark">
+    <nut-popover
+      v-model:visible="state.customColor"
+      :list="iconItemList"
+      location="right-start"
+      bg-color="#f00"
+      theme="dark"
+    >
       <template #reference>
         <nut-button type="primary" shape="square">{{ translate('contentColor') }}</nut-button>
       </template>
     </nut-popover>
   </div>
 </template>
-<script lang="ts">
-import { reactive, ref, toRefs, h, defineComponent } from 'vue';
-import { createComponent, renderIcon } from '@/packages/utils/create';
+<script setup lang="ts">
+import { reactive, ref, h } from 'vue';
+import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('popover');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Service, Notice, Location, Category, Scan2, Message, Cart2, My2 } from '@nutui/icons-vue';
@@ -139,179 +150,156 @@ const initTranslate = () =>
       contentTarget: 'custom target'
     }
   });
-export default defineComponent({
-  components: { Service },
-  setup() {
-    initTranslate();
-
-    const state = reactive({
-      showIcon: false,
-      placement: false,
-      darkTheme: false,
-      lightTheme: false,
-      Customized: false,
-      disableAction: false,
-      topLocation: false, //向上弹出
-      rightLocation: false, //向右弹出
-      leftLocation: false, //向左弹出
-      customPositon: false,
-
-      showPicker: false,
-
-      customTarget: false,
-      customColor: false
-    });
-    const curPostion = ref('top');
-
-    const columns = ref([
-      { text: 'top', value: 'top' },
-      { text: 'top-start', value: 'top-start' },
-      { text: 'top-end', value: 'top-end' },
-      { text: 'right', value: 'right' },
-      { text: 'right-start', value: 'right-start' },
-      { text: 'right-end', value: 'right-end' },
-      { text: 'bottom', value: 'bottom' },
-      { text: 'bottom-start', value: 'bottom-start' },
-      { text: 'bottom-end', value: 'bottom-end' },
-      { text: 'left', value: 'left' },
-      { text: 'left-start', value: 'left-start' },
-      { text: 'left-end', value: 'left-end' }
-    ]);
-
-    const iconItemList = reactive([
-      {
-        name: 'option1'
-      },
-      {
-        name: 'option2'
-      },
-      {
-        name: 'option3'
-      }
-    ]);
-
-    const positionList = reactive([
-      {
-        name: 'option1'
-      },
-      {
-        name: 'option2'
-      }
-    ]);
-
-    const itemList = reactive([
-      {
-        name: 'option1',
-        icon: () => {
-          return h(My2, {
-            width: '14px',
-            color: 'rgba(250, 44, 25, 1)'
-          });
-        }
-      },
-      {
-        name: 'option2',
-        icon: () => {
-          return h(Cart2, {
-            width: '14px'
-          });
-        }
-      },
-      {
-        name: 'option3',
-        icon: () => {
-          return h(Location, {
-            width: '14px'
-          });
-        }
-      }
-    ]);
-
-    const itemListDisabled = reactive([
-      {
-        name: 'option1',
-        disabled: true
-      },
-      {
-        name: 'option2',
-        disabled: true
-      },
-      {
-        name: 'option3'
-      }
-    ]);
-
-    const selfContent = reactive([
-      {
-        name: Service,
-        desc: 'option1'
-      },
-      {
-        name: Notice,
-        desc: 'option2'
-      },
-      {
-        name: Location,
-        desc: 'option3'
-      },
-      {
-        name: Category,
-        desc: 'option4'
-      },
-      {
-        name: Scan2,
-        desc: 'option5'
-      },
-      {
-        name: Message,
-        desc: 'option6'
-      }
-    ]);
-
-    const chooseItem = (item: unknown, index: number) => {
-      console.log(item, index);
-    };
-
-    const handlePicker = () => {
-      state.showPicker = true;
-      setTimeout(() => {
-        state.customPositon = true;
-      }, 0);
-    };
-
-    const change = ({ selectedValue }) => {
-      curPostion.value = selectedValue[0];
-      if (state.showPicker) state.customPositon = true;
-    };
-
-    const clickCustomHandle = () => {
-      state.customTarget = !state.customTarget;
-    };
-
-    const closePicker = () => {
-      state.customPositon = false;
-      state.showPicker = false;
-    };
-
-    return {
-      iconItemList,
-      itemList,
-      ...toRefs(state),
-      itemListDisabled,
-      selfContent,
-      chooseItem,
-      curPostion,
-      positionList,
-      translate,
-      columns,
-      change,
-      handlePicker,
-      clickCustomHandle,
-      renderIcon,
-      closePicker
-    };
-  }
+initTranslate();
+
+const state = reactive({
+  showIcon: false,
+  placement: false,
+  darkTheme: false,
+  lightTheme: false,
+  Customized: false,
+  disableAction: false,
+  topLocation: false, //向上弹出
+  rightLocation: false, //向右弹出
+  leftLocation: false, //向左弹出
+  customPositon: false,
+
+  showPicker: false,
+
+  customTarget: false,
+  customColor: false
 });
+const curPostion = ref('top');
+
+const columns = ref([
+  { text: 'top', value: 'top' },
+  { text: 'top-start', value: 'top-start' },
+  { text: 'top-end', value: 'top-end' },
+  { text: 'right', value: 'right' },
+  { text: 'right-start', value: 'right-start' },
+  { text: 'right-end', value: 'right-end' },
+  { text: 'bottom', value: 'bottom' },
+  { text: 'bottom-start', value: 'bottom-start' },
+  { text: 'bottom-end', value: 'bottom-end' },
+  { text: 'left', value: 'left' },
+  { text: 'left-start', value: 'left-start' },
+  { text: 'left-end', value: 'left-end' }
+]);
+
+const iconItemList = reactive([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  },
+  {
+    name: 'option3'
+  }
+]);
+
+const positionList = reactive([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  }
+]);
+
+const itemList = reactive([
+  {
+    name: 'option1',
+    icon: () => {
+      return h(My2, {
+        width: '14px',
+        color: 'rgba(250, 44, 25, 1)'
+      });
+    }
+  },
+  {
+    name: 'option2',
+    icon: () => {
+      return h(Cart2, {
+        width: '14px'
+      });
+    }
+  },
+  {
+    name: 'option3',
+    icon: () => {
+      return h(Location, {
+        width: '14px'
+      });
+    }
+  }
+]);
+
+const itemListDisabled = reactive([
+  {
+    name: 'option1',
+    disabled: true
+  },
+  {
+    name: 'option2',
+    disabled: true
+  },
+  {
+    name: 'option3'
+  }
+]);
+
+const selfContent = reactive([
+  {
+    name: Service,
+    desc: 'option1'
+  },
+  {
+    name: Notice,
+    desc: 'option2'
+  },
+  {
+    name: Location,
+    desc: 'option3'
+  },
+  {
+    name: Category,
+    desc: 'option4'
+  },
+  {
+    name: Scan2,
+    desc: 'option5'
+  },
+  {
+    name: Message,
+    desc: 'option6'
+  }
+]);
+
+const chooseItem = (item: unknown, index: number) => {
+  console.log(item, index);
+};
+
+const handlePicker = () => {
+  state.showPicker = true;
+  setTimeout(() => {
+    state.customPositon = true;
+  }, 0);
+};
+
+const change = ({ selectedValue }: any) => {
+  curPostion.value = selectedValue[0];
+  if (state.showPicker) state.customPositon = true;
+};
+
+const clickCustomHandle = () => {
+  state.customTarget = !state.customTarget;
+};
+
+const closePicker = () => {
+  state.customPositon = false;
+  state.showPicker = false;
+};
 </script>
 <style lang="scss">
 .demo > h2 {
diff --git a/src/packages/__VUE/popover/doc.en-US.md b/src/packages/__VUE/popover/doc.en-US.md
index aceabc0fa0..007982f18f 100644
--- a/src/packages/__VUE/popover/doc.en-US.md
+++ b/src/packages/__VUE/popover/doc.en-US.md
@@ -20,7 +20,7 @@ Popover supports both light and dark styles. The default is light style. Set the
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-row type="flex">
     <nut-col :span="8" style="margin-left:20px">
@@ -44,27 +44,19 @@ Popover supports both light and dark styles. The default is light style. Set the
     </nut-col>
   </nut-row>
 </template>
-<script>
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const visible = ref({
-        darkTheme: false,
-        lightTheme: false
-      });
-      const iconItemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
-      return {
-        visible,
-        iconItemList
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const visible = reactive({
+  darkTheme: false,
+  lightTheme: false
+});
+const iconItemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
 </script>
 
 <style>
-  .nut-popover-content {
-    width: 120px;
-  }
+.nut-popover-content {
+  width: 120px;
+}
 </style>
 ```
 
@@ -76,7 +68,7 @@ In the list array, an option can be disabled via the `disabled` field.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-row type="flex">
     <nut-col :span="8" style="margin-left:20px">
@@ -96,66 +88,56 @@ In the list array, an option can be disabled via the `disabled` field.
   </nut-row>
 </template>
 
-<script>
-  import { reactive, ref, h } from 'vue';
-  import { Location, Cart2, My2 } from '@nutui/icons-vue';
-  export default {
-    setup() {
-      const visible = ref({
-        showIcon: false,
-        disableAction: false
+<script setup>
+import { reactive, h } from 'vue';
+import { Location, Cart2, My2 } from '@nutui/icons-vue';
+const visible = reactive({
+  showIcon: false,
+  disableAction: false
+});
+
+const itemList = reactive([
+  {
+    name: 'option1',
+    icon: () => {
+      return h(My2, {
+        width: '14px',
+        color: 'rgba(250, 44, 25, 1)'
       });
-
-      const itemList = reactive([
-        {
-          name: 'option1',
-          icon: () => {
-            return h(My2, {
-              width: '14px',
-              color: 'rgba(250, 44, 25, 1)'
-            });
-          }
-        },
-        {
-          name: 'option2',
-          icon: Cart2
-        },
-        {
-          name: 'option3',
-          icon: Location
-        }
-      ]);
-
-      const itemListDisabled = reactive([
-        {
-          name: 'option1',
-          disabled: true
-        },
-        {
-          name: 'option2',
-          disabled: true
-        },
-        {
-          name: 'option3'
-        }
-      ]);
-
-      return {
-        itemList,
-        visible,
-        itemListDisabled
-      };
     }
-  };
+  },
+  {
+    name: 'option2',
+    icon: Cart2
+  },
+  {
+    name: 'option3',
+    icon: Location
+  }
+]);
+
+const itemListDisabled = reactive([
+  {
+    name: 'option1',
+    disabled: true
+  },
+  {
+    name: 'option2',
+    disabled: true
+  },
+  {
+    name: 'option3'
+  }
+]);
 </script>
 
 <style>
-  .nut-popover-content {
-    width: 120px;
-  }
-  .nut-icon {
-    width: 14px;
-  }
+.nut-popover-content {
+  width: 120px;
+}
+.nut-icon {
+  width: 14px;
+}
 </style>
 ```
 
@@ -167,7 +149,7 @@ Customize the content in the slot named content.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
     <template #reference>
@@ -185,67 +167,57 @@ Customize the content in the slot named content.
   </nut-popover>
 </template>
 
-<script>
-  import { reactive, ref } from 'vue';
-  import { Service } from '@nutui/icons-vue';
-  export default {
-    components: { Service },
-    setup() {
-      const visible = ref({
-        customized: false
-      });
-      const selfContent = reactive([
-        {
-          desc: 'option1'
-        },
-        {
-          desc: 'option2'
-        },
-        {
-          desc: 'option3'
-        },
-        {
-          desc: 'option4'
-        },
-        {
-          desc: 'option5'
-        },
-        {
-          desc: 'option6'
-        }
-      ]);
-
-      return {
-        visible,
-        selfContent
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Service } from '@nutui/icons-vue';
+const visible = ref({
+  customized: false
+});
+const selfContent = reactive([
+  {
+    desc: 'option1'
+  },
+  {
+    desc: 'option2'
+  },
+  {
+    desc: 'option3'
+  },
+  {
+    desc: 'option4'
+  },
+  {
+    desc: 'option5'
+  },
+  {
+    desc: 'option6'
+  }
+]);
 </script>
 
 <style>
-  #app {
-    padding-top: 200px;
-  }
-  .self-content {
-    width: 195px;
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .self-content-item {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-  .self-content-desc {
-    margin-top: 5px;
-    width: 60px;
-    font-size: 10px;
-    text-align: center;
-  }
+#app {
+  padding-top: 200px;
+}
+.self-content {
+  width: 195px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.self-content-item {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.self-content-desc {
+  margin-top: 5px;
+  width: 60px;
+  font-size: 10px;
+  text-align: center;
+}
 </style>
 ```
 
@@ -272,7 +244,7 @@ bottom-end    # Bottom right
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
   <nut-popup position="bottom" v-model:visible="showPicker">
@@ -302,84 +274,69 @@ bottom-end    # Bottom right
   </nut-popover>
 </template>
 
-<script lang="ts">
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const showPicker = ref(false);
-      const customPositon = ref(false);
-      const curPostion = ref('top');
-      const positionList = reactive([
-        {
-          name: 'option1'
-        },
-        {
-          name: 'option2'
-        }
-      ]);
-      const closePicker = () => {
-        customPositon.value = false;
-        showPicker.value = false;
-      };
-
-      const change = ({ selectedValue }) => {
-        curPostion.value = selectedValue[0];
-        if (showPicker.value) customPositon.value = true;
-      };
-
-      const handlePicker = () => {
-        showPicker.value = true;
-        setTimeout(() => {
-          customPositon.value = true;
-        }, 0);
-      };
-
-      const columns = ref([
-        { text: 'top', value: 'top' },
-        { text: 'top-start', value: 'top-start' },
-        { text: 'top-end', value: 'top-end' },
-        { text: 'right', value: 'right' },
-        { text: 'right-start', value: 'right-start' },
-        { text: 'right-end', value: 'right-end' },
-        { text: 'bottom', value: 'bottom' },
-        { text: 'bottom-start', value: 'bottom-start' },
-        { text: 'bottom-end', value: 'bottom-end' },
-        { text: 'left', value: 'left' },
-        { text: 'left-start', value: 'left-start' },
-        { text: 'left-end', value: 'left-end' }
-      ]);
-
-      return {
-        positionList,
-        showPicker,
-        customPositon,
-        curPostion,
-        closePicker,
-        change,
-        handlePicker,
-        columns
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const showPicker = ref(false);
+const customPositon = ref(false);
+const curPostion = ref('top');
+const positionList = reactive([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  }
+]);
+const closePicker = () => {
+  customPositon.value = false;
+  showPicker.value = false;
+};
+
+const change = ({ selectedValue }) => {
+  curPostion.value = selectedValue[0];
+  if (showPicker.value) customPositon.value = true;
+};
+
+const handlePicker = () => {
+  showPicker.value = true;
+  setTimeout(() => {
+    customPositon.value = true;
+  }, 0);
+};
+
+const columns = ref([
+  { text: 'top', value: 'top' },
+  { text: 'top-start', value: 'top-start' },
+  { text: 'top-end', value: 'top-end' },
+  { text: 'right', value: 'right' },
+  { text: 'right-start', value: 'right-start' },
+  { text: 'right-end', value: 'right-end' },
+  { text: 'bottom', value: 'bottom' },
+  { text: 'bottom-start', value: 'bottom-start' },
+  { text: 'bottom-end', value: 'bottom-end' },
+  { text: 'left', value: 'left' },
+  { text: 'left-start', value: 'left-start' },
+  { text: 'left-end', value: 'left-end' }
+]);
 </script>
 
 <style>
-  .nut-popover-content {
-    width: 120px;
-  }
-
-  .brickBox {
-    margin: 80px 0;
-    display: flex;
-    justify-content: center;
-  }
-
-  .brick {
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-    border-radius: 10px;
-  }
+.nut-popover-content {
+  width: 120px;
+}
+
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.brick {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+  border-radius: 10px;
+}
 </style>
 ```
 
@@ -391,7 +348,7 @@ Popover provides the 'targetId' attribute to match the target element by adding
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle">custom target</nut-button>
   <nut-popover
@@ -402,35 +359,25 @@ Popover provides the 'targetId' attribute to match the target element by adding
   ></nut-popover>
 </template>
 
-<script>
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const visible = reactive({
-        customTarget: false
-      });
-
-      const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
+<script setup>
+import { reactive, ref } from 'vue';
+const visible = reactive({
+  customTarget: false
+});
 
-      const clickCustomHandle = () => {
-        visible.customTarget = !visible.customTarget;
-      };
+const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
 
-      return {
-        itemList,
-        visible,
-        clickCustomHandle
-      };
-    }
-  };
+const clickCustomHandle = () => {
+  visible.customTarget = !visible.customTarget;
+};
 </script>
 <style>
-  #app {
-    margin-top: 300px;
-  }
-  .nut-popover-content {
-    width: 120px;
-  }
+#app {
+  margin-top: 300px;
+}
+.nut-popover-content {
+  width: 120px;
+}
 </style>
 ```
 
@@ -440,7 +387,7 @@ Popover provides the 'targetId' attribute to match the target element by adding
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-popover
     v-model:visible="visible.customColor"
@@ -455,30 +402,21 @@ Popover provides the 'targetId' attribute to match the target element by adding
   </nut-popover>
 </template>
 
-<script>
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const visible = reactive({
-        customColor: false
-      });
-
-      const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
+<script setup>
+import { reactive, ref } from 'vue';
+const visible = reactive({
+  customColor: false
+});
 
-      return {
-        itemList,
-        visible
-      };
-    }
-  };
+const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
 </script>
 <style>
-  #app {
-    margin-top: 300px;
-  }
-  .nut-popover-content {
-    width: 120px;
-  }
+#app {
+  margin-top: 300px;
+}
+.nut-popover-content {
+  width: 120px;
+}
 </style>
 ```
 
@@ -488,51 +426,51 @@ Popover provides the 'targetId' attribute to match the target element by adding
 
 ### Props
 
-| Attribute              | Description                               | Type             | Default   |
-| ---------------------- | ----------------------------------------- | ---------------- | --------- |
-| list                   | list of options                           | List[]           | `[]`      |
-| visible                | whether to show                           | boolean          | `false`   |
-| theme                  | Theme style, can be set to `dark` `light` | string           | `light`   |
-| location               | pop-up location                           | string           | `bottom`  |
-| offset                 | the offset of the occurrence position     | [number,number]  | `[0, 12]` |
-| show-arrow             | whether to show small arrows              | boolean          | `true`    |
-| custom-class           | custom class                              | string           | `''`      |
-| duration               | Transition duration，Unit second          | number \| string | `0.3`     |
-| overlay                | Whether to show overlay                   | boolean          | `false`   |
-| overlay-class          | Custom overlay class                      | string           | `''`      |
-| overlay-style          | Custom overlay style                      | string           | `''`      |
-| close-on-click-overlay | Whether to close when clicking overlay    | boolean          | `true`    |
-| close-on-click-action  | Whether to close when clicking action     | boolean          | `true`    |
-| close-on-click-outside | Whether to close when clicking outside    | boolean          | `true`    |
-| bg-color               | Custom color                              | string           | `-`       |
-| target-id              | Custom target id                          | string           | `-`       |
-| arrow-offset           | the offset of the arrow                   | number           | `0`       |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| list | list of options | List[] | `[]` |
+| visible | whether to show | boolean | `false` |
+| theme | Theme style, can be set to `dark` `light` | string | `light` |
+| location | pop-up location | string | `bottom` |
+| offset | the offset of the occurrence position | [number,number] | `[0, 12]` |
+| show-arrow | whether to show small arrows | boolean | `true` |
+| custom-class | custom class | string | `''` |
+| duration | Transition duration，Unit second | number \| string | `0.3` |
+| overlay | Whether to show overlay | boolean | `false` |
+| overlay-class | Custom overlay class | string | `''` |
+| overlay-style | Custom overlay style | string | `''` |
+| close-on-click-overlay | Whether to close when clicking overlay | boolean | `true` |
+| close-on-click-action | Whether to close when clicking action | boolean | `true` |
+| close-on-click-outside | Whether to close when clicking outside | boolean | `true` |
+| bg-color | Custom color | string | `-` |
+| target-id | Custom target id | string | `-` |
+| arrow-offset | the offset of the arrow | number | `0` |
 
 ### List data structure
 
 The List property is an array of objects, each object in the array is configured with a column, and the object can contain the following values:
 
-| Key       | Description                                     | Type                      | Default |
-| --------- | ----------------------------------------------- | ------------------------- | ------- |
-| name      | option text                                     | string                    | `-`     |
-| icon      | @nutui/icons-vue name                           | VNode                     | `-`     |
-| disabled  | whether to disable                              | boolean                   | `false` |
-| className | Add extra class names for corresponding options | string \| Array \| object | `-`     |
+| Key | Description | Type | Default |
+| --- | --- | --- | --- |
+| name | option text | string | `-` |
+| icon | @nutui/icons-vue name | VNode | `-` |
+| disabled | whether to disable | boolean | `false` |
+| className | Add extra class names for corresponding options | string \| Array \| object | `-` |
 
 ### Slots
 
-| Name      | Description                                                     |
-| --------- | --------------------------------------------------------------- |
-| content   | Customize Bubble Component Menu Content                         |
+| Name | Description |
+| --- | --- |
+| content | Customize Bubble Component Menu Content |
 | reference | The content of the element that triggers the Popover to display |
 
 ### Events
 
-| Event  | Description                         |
-| ------ | ----------------------------------- |
+| Event | Description |
+| --- | --- |
 | choose | Triggered when an option is clicked |
-| open   | Triggered when the menu is opened   |
-| close  | Fired when the menu is closed       |
+| open | Triggered when the menu is opened |
+| close | Fired when the menu is closed |
 
 ## Theming
 
@@ -540,13 +478,13 @@ The List property is an array of objects, each object in the array is configured
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                 | Default Value            |
-| ------------------------------------ | ------------------------ |
+| Name | Default Value |
+| --- | --- |
 | --nut-popover-white-background-color | _rgba(255, 255, 255, 1)_ |
-| --nut-popover-dark-background-color  | _rgba(75, 76, 77, 1)_    |
-| --nut-popover-border-bottom-color    | _rgba(229, 229, 229, 1)_ |
-| --nut-popover-primary-text-color     | _rgba(51, 51, 51, 1)_    |
-| --nut-popover-disable-color          | _rgba(154, 155, 157, 1)_ |
-| --nut-popover-menu-item-padding      | _8px 0_                  |
-| --nut-popover-menu-item-margin       | _0 8px_                  |
-| --nut-popover-menu-name-line-height  | _normal_                 |
+| --nut-popover-dark-background-color | _rgba(75, 76, 77, 1)_ |
+| --nut-popover-border-bottom-color | _rgba(229, 229, 229, 1)_ |
+| --nut-popover-primary-text-color | _rgba(51, 51, 51, 1)_ |
+| --nut-popover-disable-color | _rgba(154, 155, 157, 1)_ |
+| --nut-popover-menu-item-padding | _8px 0_ |
+| --nut-popover-menu-item-margin | _0 8px_ |
+| --nut-popover-menu-name-line-height | _normal_ |
diff --git a/src/packages/__VUE/popover/doc.md b/src/packages/__VUE/popover/doc.md
index 976f31a645..8a8793942c 100644
--- a/src/packages/__VUE/popover/doc.md
+++ b/src/packages/__VUE/popover/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Popover } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-row type="flex">
     <nut-col :span="8" style="margin-left:20px">
@@ -44,27 +44,18 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
     </nut-col>
   </nut-row>
 </template>
-<script>
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const visible = ref({
-        darkTheme: false,
-        lightTheme: false
-      });
-      const iconItemList = reactive([{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }]);
-      return {
-        visible,
-        iconItemList
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const visible = reactive({
+  darkTheme: false,
+  lightTheme: false
+});
 </script>
 
 <style>
-  .nut-popover-content {
-    width: 120px;
-  }
+.nut-popover-content {
+  width: 120px;
+}
 </style>
 ```
 
@@ -76,7 +67,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-row type="flex">
     <nut-col :span="8" style="margin-left:20px">
@@ -96,66 +87,56 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
   </nut-row>
 </template>
 
-<script>
-  import { reactive, ref, h } from 'vue';
-  import { Location, Cart2, My2 } from '@nutui/icons-vue';
-  export default {
-    setup() {
-      const visible = ref({
-        showIcon: false,
-        disableAction: false
+<script setup>
+import { reactive, ref, h } from 'vue';
+import { Location, Cart2, My2 } from '@nutui/icons-vue';
+const visible = reactive({
+  showIcon: false,
+  disableAction: false
+});
+
+const itemList = reactive([
+  {
+    name: 'option1',
+    icon: () => {
+      return h(My2, {
+        width: '14px',
+        color: 'rgba(250, 44, 25, 1)'
       });
-
-      const itemList = reactive([
-        {
-          name: 'option1',
-          icon: () => {
-            return h(My2, {
-              width: '14px',
-              color: 'rgba(250, 44, 25, 1)'
-            });
-          }
-        },
-        {
-          name: 'option2',
-          icon: Cart2
-        },
-        {
-          name: 'option3',
-          icon: Location
-        }
-      ]);
-
-      const itemListDisabled = reactive([
-        {
-          name: '选项一',
-          disabled: true
-        },
-        {
-          name: '选项二',
-          disabled: true
-        },
-        {
-          name: '选项三'
-        }
-      ]);
-
-      return {
-        itemList,
-        visible,
-        itemListDisabled
-      };
     }
-  };
+  },
+  {
+    name: 'option2',
+    icon: Cart2
+  },
+  {
+    name: 'option3',
+    icon: Location
+  }
+]);
+
+const itemListDisabled = reactive([
+  {
+    name: '选项一',
+    disabled: true
+  },
+  {
+    name: '选项二',
+    disabled: true
+  },
+  {
+    name: '选项三'
+  }
+]);
 </script>
 
 <style>
-  .nut-popover-content {
-    width: 120px;
-  }
-  .nut-icon {
-    width: 14px;
-  }
+.nut-popover-content {
+  width: 120px;
+}
+.nut-icon {
+  width: 14px;
+}
 </style>
 ```
 
@@ -167,7 +148,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
     <template #reference>
@@ -185,67 +166,57 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
   </nut-popover>
 </template>
 
-<script>
-  import { reactive, ref } from 'vue';
-  import { Service } from '@nutui/icons-vue';
-  export default {
-    components: { Service },
-    setup() {
-      const visible = ref({
-        customized: false
-      });
-      const selfContent = reactive([
-        {
-          desc: 'option1'
-        },
-        {
-          desc: 'option2'
-        },
-        {
-          desc: 'option3'
-        },
-        {
-          desc: 'option4'
-        },
-        {
-          desc: 'option5'
-        },
-        {
-          desc: 'option6'
-        }
-      ]);
-
-      return {
-        visible,
-        selfContent
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Service } from '@nutui/icons-vue';
+const visible = reactive({
+  customized: false
+});
+const selfContent = reactive([
+  {
+    desc: 'option1'
+  },
+  {
+    desc: 'option2'
+  },
+  {
+    desc: 'option3'
+  },
+  {
+    desc: 'option4'
+  },
+  {
+    desc: 'option5'
+  },
+  {
+    desc: 'option6'
+  }
+]);
 </script>
 
 <style>
-  #app {
-    padding-top: 200px;
-  }
-  .self-content {
-    width: 195px;
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .self-content-item {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-  .self-content-desc {
-    margin-top: 5px;
-    width: 60px;
-    font-size: 10px;
-    text-align: center;
-  }
+#app {
+  padding-top: 200px;
+}
+.self-content {
+  width: 195px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.self-content-item {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.self-content-desc {
+  margin-top: 5px;
+  width: 60px;
+  font-size: 10px;
+  text-align: center;
+}
 </style>
 ```
 
@@ -272,7 +243,7 @@ bottom-end    # 底部右侧位置
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
   <nut-popup position="bottom" v-model:visible="showPicker">
@@ -302,82 +273,67 @@ bottom-end    # 底部右侧位置
   </nut-popover>
 </template>
 
-<script lang="ts">
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const showPicker = ref(false);
-      const customPositon = ref(false);
-      const curPostion = ref('top');
-      const positionList = reactive([
-        {
-          name: 'option1'
-        },
-        {
-          name: 'option2'
-        }
-      ]);
-      const closePicker = () => {
-        customPositon.value = false;
-        showPicker.value = false;
-      };
-
-      const change = ({ selectedValue }) => {
-        curPostion.value = selectedValue[0];
-        if (showPicker.value) customPositon.value = true;
-      };
-
-      const handlePicker = () => {
-        showPicker.value = true;
-        setTimeout(() => {
-          customPositon.value = true;
-        }, 0);
-      };
-
-      const columns = ref([
-        { text: 'top', value: 'top' },
-        { text: 'top-start', value: 'top-start' },
-        { text: 'top-end', value: 'top-end' },
-        { text: 'right', value: 'right' },
-        { text: 'right-start', value: 'right-start' },
-        { text: 'right-end', value: 'right-end' },
-        { text: 'bottom', value: 'bottom' },
-        { text: 'bottom-start', value: 'bottom-start' },
-        { text: 'bottom-end', value: 'bottom-end' },
-        { text: 'left', value: 'left' },
-        { text: 'left-start', value: 'left-start' },
-        { text: 'left-end', value: 'left-end' }
-      ]);
-
-      return {
-        positionList,
-        showPicker,
-        customPositon,
-        curPostion,
-        closePicker,
-        change,
-        handlePicker,
-        columns
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const showPicker = ref(false);
+const customPositon = ref(false);
+const curPostion = ref('top');
+const positionList = reactive([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  }
+]);
+const closePicker = () => {
+  customPositon.value = false;
+  showPicker.value = false;
+};
+
+const change = ({ selectedValue }) => {
+  curPostion.value = selectedValue[0];
+  if (showPicker.value) customPositon.value = true;
+};
+
+const handlePicker = () => {
+  showPicker.value = true;
+  setTimeout(() => {
+    customPositon.value = true;
+  }, 0);
+};
+
+const columns = ref([
+  { text: 'top', value: 'top' },
+  { text: 'top-start', value: 'top-start' },
+  { text: 'top-end', value: 'top-end' },
+  { text: 'right', value: 'right' },
+  { text: 'right-start', value: 'right-start' },
+  { text: 'right-end', value: 'right-end' },
+  { text: 'bottom', value: 'bottom' },
+  { text: 'bottom-start', value: 'bottom-start' },
+  { text: 'bottom-end', value: 'bottom-end' },
+  { text: 'left', value: 'left' },
+  { text: 'left-start', value: 'left-start' },
+  { text: 'left-end', value: 'left-end' }
+]);
 </script>
 
 <style>
-  .nut-popover-content {
-    width: 120px;
-  }
-  .brickBox {
-    margin: 80px 0;
-    display: flex;
-    justify-content: center;
-  }
-  .brick {
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-    border-radius: 10px;
-  }
+.nut-popover-content {
+  width: 120px;
+}
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+}
+.brick {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+  border-radius: 10px;
+}
 </style>
 ```
 
@@ -389,7 +345,7 @@ Popover 提供了 `targetId` 属性，用于匹配目标元素，在目标元素
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle">自定义目标元素</nut-button>
   <nut-popover
@@ -400,35 +356,25 @@ Popover 提供了 `targetId` 属性，用于匹配目标元素，在目标元素
   ></nut-popover>
 </template>
 
-<script>
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const visible = reactive({
-        customTarget: false
-      });
-
-      const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
+<script setup>
+import { reactive, ref } from 'vue';
+const visible = reactive({
+  customTarget: false
+});
 
-      const clickCustomHandle = () => {
-        visible.customTarget = !visible.customTarget;
-      };
+const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
 
-      return {
-        itemList,
-        visible,
-        clickCustomHandle
-      };
-    }
-  };
+const clickCustomHandle = () => {
+  visible.customTarget = !visible.customTarget;
+};
 </script>
 <style>
-  #app {
-    margin-top: 300px;
-  }
-  .nut-popover-content {
-    width: 120px;
-  }
+#app {
+  margin-top: 300px;
+}
+.nut-popover-content {
+  width: 120px;
+}
 </style>
 ```
 
@@ -440,7 +386,7 @@ Popopver 提供了 2 种主题色，同样可以通过 `bgColor` 属性改变背
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-popover
     v-model:visible="visible.customColor"
@@ -455,30 +401,21 @@ Popopver 提供了 2 种主题色，同样可以通过 `bgColor` 属性改变背
   </nut-popover>
 </template>
 
-<script>
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const visible = reactive({
-        customColor: false
-      });
-
-      const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
+<script setup>
+import { reactive, ref } from 'vue';
+const visible = reactive({
+  customColor: false
+});
 
-      return {
-        itemList,
-        visible
-      };
-    }
-  };
+const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
 </script>
 <style>
-  #app {
-    margin-top: 300px;
-  }
-  .nut-popover-content {
-    width: 120px;
-  }
+#app {
+  margin-top: 300px;
+}
+.nut-popover-content {
+  width: 120px;
+}
 </style>
 ```
 
@@ -488,51 +425,51 @@ Popopver 提供了 2 种主题色，同样可以通过 `bgColor` 属性改变背
 
 ### Props
 
-| 参数                   | 说明                         | 类型             | 默认值    |
-| ---------------------- | ---------------------------- | ---------------- | --------- |
-| list                   | 选项列表                     | List[]           | `[]`      |
-| visible                | 是否展示气泡弹出层           | boolean          | `false`   |
-| theme                  | 主题风格，可选值为 `dark`    | string           | `light`   |
-| location               | 弹出位置                     | string           | `bottom`  |
-| offset                 | 出现位置的偏移量             | [number,number]  | `[0, 12]` |
-| show-arrow             | 是否显示小箭头               | boolean          | `true`    |
-| custom-class           | 自定义 class 值              | string           | `''`      |
-| duration               | 动画时长，单位秒             | number \| string | `0.3`     |
-| overlay                | 是否显示遮罩层               | boolean          | `false`   |
-| overlay-class          | 自定义遮罩层类名             | string           | `''`      |
-| overlay-style          | 自定义遮罩层样式             | string           | `''`      |
-| close-on-click-overlay | 是否在点击遮罩层后关闭菜单   | boolean          | `true`    |
-| close-on-click-action  | 是否在点击选项后关闭         | boolean          | `true`    |
-| close-on-click-outside | 是否在点击外部元素后关闭菜单 | boolean          | `true`    |
-| bg-color               | 自定义背景色                 | string           | `-`       |
-| target-id              | 自定义目标元素 id            | string           | `-`       |
-| arrow-offset           | 小箭头的偏移量               | number           | `0`       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| list | 选项列表 | List[] | `[]` |
+| visible | 是否展示气泡弹出层 | boolean | `false` |
+| theme | 主题风格，可选值为 `dark` | string | `light` |
+| location | 弹出位置 | string | `bottom` |
+| offset | 出现位置的偏移量 | [number,number] | `[0, 12]` |
+| show-arrow | 是否显示小箭头 | boolean | `true` |
+| custom-class | 自定义 class 值 | string | `''` |
+| duration | 动画时长，单位秒 | number \| string | `0.3` |
+| overlay | 是否显示遮罩层 | boolean | `false` |
+| overlay-class | 自定义遮罩层类名 | string | `''` |
+| overlay-style | 自定义遮罩层样式 | string | `''` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | boolean | `true` |
+| close-on-click-action | 是否在点击选项后关闭 | boolean | `true` |
+| close-on-click-outside | 是否在点击外部元素后关闭菜单 | boolean | `true` |
+| bg-color | 自定义背景色 | string | `-` |
+| target-id | 自定义目标元素 id | string | `-` |
+| arrow-offset | 小箭头的偏移量 | number | `0` |
 
 ### List 数据结构
 
 List 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
 
-| 键名      | 说明                     | 类型                      | 默认值  |
-| --------- | ------------------------ | ------------------------- | ------- |
-| name      | 选项文字                 | string                    | `-`     |
-| icon      | @nutui/icons-vue 图标    | VNode                     | `-`     |
-| disabled  | 是否为禁用状态           | boolean                   | `false` |
-| className | 为对应选项添加额外的类名 | string \| Array \| object | `-`     |
+| 键名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 选项文字 | string | `-` |
+| icon | @nutui/icons-vue 图标 | VNode | `-` |
+| disabled | 是否为禁用状态 | boolean | `false` |
+| className | 为对应选项添加额外的类名 | string \| Array \| object | `-` |
 
 ### Slots
 
-| 名称      | 说明                        |
-| --------- | --------------------------- |
-| content   | 自定义气泡组件菜单内容      |
+| 名称 | 说明 |
+| --- | --- |
+| content | 自定义气泡组件菜单内容 |
 | reference | 触发 Popover 显示的元素内容 |
 
 ### Events
 
-| 事件名 | 说明           |
-| ------ | -------------- |
+| 事件名 | 说明 |
+| --- | --- |
 | choose | 点击选项时触发 |
-| open   | 打开菜单时触发 |
-| close  | 关闭菜单时触发 |
+| open | 打开菜单时触发 |
+| close | 关闭菜单时触发 |
 
 ## 主题定制
 
@@ -540,13 +477,13 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值                   |
-| ------------------------------------ | ------------------------ |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-popover-white-background-color | _rgba(255, 255, 255, 1)_ |
-| --nut-popover-dark-background-color  | _rgba(75, 76, 77, 1)_    |
-| --nut-popover-border-bottom-color    | _rgba(229, 229, 229, 1)_ |
-| --nut-popover-primary-text-color     | _rgba(51, 51, 51, 1)_    |
-| --nut-popover-disable-color          | _rgba(154, 155, 157, 1)_ |
-| --nut-popover-menu-item-padding      | _8px 0_                  |
-| --nut-popover-menu-item-margin       | _0 8px_                  |
-| --nut-popover-menu-name-line-height  | _normal_                 |
+| --nut-popover-dark-background-color | _rgba(75, 76, 77, 1)_ |
+| --nut-popover-border-bottom-color | _rgba(229, 229, 229, 1)_ |
+| --nut-popover-primary-text-color | _rgba(51, 51, 51, 1)_ |
+| --nut-popover-disable-color | _rgba(154, 155, 157, 1)_ |
+| --nut-popover-menu-item-padding | _8px 0_ |
+| --nut-popover-menu-item-margin | _0 8px_ |
+| --nut-popover-menu-name-line-height | _normal_ |
diff --git a/src/packages/__VUE/popover/doc.taro.md b/src/packages/__VUE/popover/doc.taro.md
index 17754c33a6..a473572119 100644
--- a/src/packages/__VUE/popover/doc.taro.md
+++ b/src/packages/__VUE/popover/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Popover } from '@nutui/nutui-taro';
 
@@ -20,7 +20,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-row type="flex">
     <nut-col :span="8" style="margin-left:20px">
@@ -44,27 +44,18 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
     </nut-col>
   </nut-row>
 </template>
-<script>
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const visible = ref({
-        darkTheme: false,
-        lightTheme: false
-      });
-      const iconItemList = reactive([{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }]);
-      return {
-        visible,
-        iconItemList
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const visible = reactive({
+  darkTheme: false,
+  lightTheme: false
+});
 </script>
 
 <style>
-  .nut-popover-content {
-    width: 120px;
-  }
+.nut-popover-content {
+  width: 120px;
+}
 </style>
 ```
 
@@ -76,7 +67,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-row type="flex">
     <nut-col :span="8" style="margin-left:20px">
@@ -96,69 +87,56 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
   </nut-row>
 </template>
 
-<script>
-  import { reactive, ref, h } from 'vue';
-  import { Location, Cart2, My2 } from '@nutui/icons-vue-taro';
-  export default {
-    setup() {
-      const visible = ref({
-        showIcon: false,
-        disableAction: false
+<script setup>
+import { reactive, ref, h } from 'vue';
+import { Location, Cart2, My2 } from '@nutui/icons-vue-taro';
+const visible = reactive({
+  showIcon: false,
+  disableAction: false
+});
+
+const itemList = reactive([
+  {
+    name: 'option1',
+    icon: () => {
+      return h(My2, {
+        width: '14px',
+        color: 'rgba(250, 44, 25, 1)'
       });
-
-      const itemList = reactive([
-        {
-          name: 'option1',
-          icon: () => {
-            return h(My2, {
-              width: '14px',
-              color: 'rgba(250, 44, 25, 1)'
-            });
-          }
-        },
-        {
-          name: 'option2',
-          icon: Cart2
-        },
-        {
-          name: 'option3',
-          icon: Location
-        }
-      ]);
-
-      const itemListDisabled = reactive([
-        {
-          name: '选项一',
-          disabled: true
-        },
-        {
-          name: '选项二',
-          disabled: true
-        },
-        {
-          name: '选项三'
-        }
-      ]);
-
-      return {
-        itemList,
-        visible,
-        itemListDisabled
-      };
     }
-  };
+  },
+  {
+    name: 'option2',
+    icon: Cart2
+  },
+  {
+    name: 'option3',
+    icon: Location
+  }
+]);
+
+const itemListDisabled = reactive([
+  {
+    name: '选项一',
+    disabled: true
+  },
+  {
+    name: '选项二',
+    disabled: true
+  },
+  {
+    name: '选项三'
+  }
+]);
 </script>
 
 <style>
-  .nut-row-flex {
-    padding-top: 100px;
-  }
-  .nut-popover-content {
-    width: 120px;
-  }
-  .nut-icon {
-    width: 14px;
-  }
+.nut-popover-content {
+  width: 120px;
+}
+.nut-icon {
+  width: 14px;
+}
 </style>
 ```
 
@@ -170,7 +148,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
     <template #reference>
@@ -188,67 +166,57 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 `theme`
   </nut-popover>
 </template>
 
-<script>
-  import { reactive, ref, h } from 'vue';
-  import { Service } from '@nutui/icons-vue-taro';
-  export default {
-    components: { Service },
-    setup() {
-      const visible = ref({
-        customized: false
-      });
-      const selfContent = reactive([
-        {
-          desc: 'option1'
-        },
-        {
-          desc: 'option2'
-        },
-        {
-          desc: 'option3'
-        },
-        {
-          desc: 'option4'
-        },
-        {
-          desc: 'option5'
-        },
-        {
-          desc: 'option6'
-        }
-      ]);
-
-      return {
-        visible,
-        selfContent
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+import { Service } from '@nutui/icons-vue-taro';
+const visible = reactive({
+  customized: false
+});
+const selfContent = reactive([
+  {
+    desc: 'option1'
+  },
+  {
+    desc: 'option2'
+  },
+  {
+    desc: 'option3'
+  },
+  {
+    desc: 'option4'
+  },
+  {
+    desc: 'option5'
+  },
+  {
+    desc: 'option6'
+  }
+]);
 </script>
 
 <style>
-  page {
-    padding-top: 200px;
-  }
-  .self-content {
-    width: 195px;
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .self-content-item {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-  .self-content-desc {
-    margin-top: 5px;
-    width: 60px;
-    font-size: 10px;
-    text-align: center;
-  }
+page {
+  padding-top: 200px;
+}
+.self-content {
+  width: 195px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.self-content-item {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.self-content-desc {
+  margin-top: 5px;
+  width: 60px;
+  font-size: 10px;
+  text-align: center;
+}
 </style>
 ```
 
@@ -275,7 +243,7 @@ bottom-end    # 底部右侧位置
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
   <nut-popup position="bottom" v-model:visible="showPicker">
@@ -305,82 +273,67 @@ bottom-end    # 底部右侧位置
   </nut-popover>
 </template>
 
-<script lang="ts">
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const showPicker = ref(false);
-      const customPositon = ref(false);
-      const curPostion = ref('top');
-      const positionList = reactive([
-        {
-          name: 'option1'
-        },
-        {
-          name: 'option2'
-        }
-      ]);
-      const closePicker = () => {
-        customPositon.value = false;
-        showPicker.value = false;
-      };
-
-      const change = ({ selectedValue }) => {
-        curPostion.value = selectedValue[0];
-        if (showPicker.value) customPositon.value = true;
-      };
-
-      const handlePicker = () => {
-        showPicker.value = true;
-        setTimeout(() => {
-          customPositon.value = true;
-        }, 1000);
-      };
-
-      const columns = ref([
-        { text: 'top', value: 'top' },
-        { text: 'top-start', value: 'top-start' },
-        { text: 'top-end', value: 'top-end' },
-        { text: 'right', value: 'right' },
-        { text: 'right-start', value: 'right-start' },
-        { text: 'right-end', value: 'right-end' },
-        { text: 'bottom', value: 'bottom' },
-        { text: 'bottom-start', value: 'bottom-start' },
-        { text: 'bottom-end', value: 'bottom-end' },
-        { text: 'left', value: 'left' },
-        { text: 'left-start', value: 'left-start' },
-        { text: 'left-end', value: 'left-end' }
-      ]);
-
-      return {
-        positionList,
-        showPicker,
-        customPositon,
-        curPostion,
-        closePicker,
-        change,
-        handlePicker,
-        columns
-      };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const showPicker = ref(false);
+const customPositon = ref(false);
+const curPostion = ref('top');
+const positionList = reactive([
+  {
+    name: 'option1'
+  },
+  {
+    name: 'option2'
+  }
+]);
+const closePicker = () => {
+  customPositon.value = false;
+  showPicker.value = false;
+};
+
+const change = ({ selectedValue }) => {
+  curPostion.value = selectedValue[0];
+  if (showPicker.value) customPositon.value = true;
+};
+
+const handlePicker = () => {
+  showPicker.value = true;
+  setTimeout(() => {
+    customPositon.value = true;
+  }, 1000);
+};
+
+const columns = ref([
+  { text: 'top', value: 'top' },
+  { text: 'top-start', value: 'top-start' },
+  { text: 'top-end', value: 'top-end' },
+  { text: 'right', value: 'right' },
+  { text: 'right-start', value: 'right-start' },
+  { text: 'right-end', value: 'right-end' },
+  { text: 'bottom', value: 'bottom' },
+  { text: 'bottom-start', value: 'bottom-start' },
+  { text: 'bottom-end', value: 'bottom-end' },
+  { text: 'left', value: 'left' },
+  { text: 'left-start', value: 'left-start' },
+  { text: 'left-end', value: 'left-end' }
+]);
 </script>
 
 <style>
-  .nut-popover-content {
-    width: 120px;
-  }
-  .brickBox {
-    margin: 80px 0;
-    display: flex;
-    justify-content: center;
-  }
-  .brick {
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-    border-radius: 10px;
-  }
+.nut-popover-content {
+  width: 120px;
+}
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+}
+.brick {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+  border-radius: 10px;
+}
 </style>
 ```
 
@@ -392,7 +345,7 @@ Popover 提供了 `targetId` 属性，用于匹配目标元素，在目标元素
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle">自定义目标元素</nut-button>
   <nut-popover
@@ -403,35 +356,25 @@ Popover 提供了 `targetId` 属性，用于匹配目标元素，在目标元素
   ></nut-popover>
 </template>
 
-<script>
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const visible = reactive({
-        customTarget: false
-      });
-
-      const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
+<script setup>
+import { reactive, ref } from 'vue';
+const visible = reactive({
+  customTarget: false
+});
 
-      const clickCustomHandle = () => {
-        visible.customTarget = !visible.customTarget;
-      };
+const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
 
-      return {
-        itemList,
-        visible,
-        clickCustomHandle
-      };
-    }
-  };
+const clickCustomHandle = () => {
+  visible.customTarget = !visible.customTarget;
+};
 </script>
 <style>
-  #popid {
-    margin-top: 300px;
-  }
-  .nut-popover-content {
-    width: 120px;
-  }
+#popid {
+  margin-top: 300px;
+}
+.nut-popover-content {
+  width: 120px;
+}
 </style>
 ```
 
@@ -443,7 +386,7 @@ Popopver 提供了 2 种主题色，同样可以通过 `bgColor` 属性改变背
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-popover
     v-model:visible="visible.customColor"
@@ -458,31 +401,22 @@ Popopver 提供了 2 种主题色，同样可以通过 `bgColor` 属性改变背
   </nut-popover>
 </template>
 
-<script>
-  import { reactive, ref } from 'vue';
-  export default {
-    setup() {
-      const visible = reactive({
-        customColor: false
-      });
-
-      const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
+<script setup>
+import { reactive, ref } from 'vue';
+const visible = reactive({
+  customColor: false
+});
 
-      return {
-        itemList,
-        visible
-      };
-    }
-  };
+const itemList = reactive([{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }]);
 </script>
 <style>
-  page,
-  #app {
-    margin-top: 300px;
-  }
-  .nut-popover-content {
-    width: 120px;
-  }
+page,
+#app {
+  margin-top: 300px;
+}
+.nut-popover-content {
+  width: 120px;
+}
 </style>
 ```
 
@@ -492,51 +426,51 @@ Popopver 提供了 2 种主题色，同样可以通过 `bgColor` 属性改变背
 
 ### Props
 
-| 参数                   | 说明                         | 类型             | 默认值    |
-| ---------------------- | ---------------------------- | ---------------- | --------- |
-| list                   | 选项列表                     | List[]           | `[]`      |
-| visible                | 是否展示气泡弹出层           | boolean          | `false`   |
-| theme                  | 主题风格，可选值为 dark      | string           | `light`   |
-| location               | 弹出位置                     | string           | `bottom`  |
-| offset                 | 出现位置的偏移量             | [number,number]  | `[0, 12]` |
-| show-arrow             | 是否显示小箭头               | boolean          | `true`    |
-| custom-class           | 自定义 class 值              | string           | `''`      |
-| duration               | 动画时长，单位秒             | number \| string | `0.3`     |
-| overlay                | 是否显示遮罩层               | boolean          | `false`   |
-| overlay-class          | 自定义遮罩层类名             | string           | `''`      |
-| overlay-style          | 自定义遮罩层样式             | string           | `''`      |
-| close-on-click-overlay | 是否在点击遮罩层后关闭菜单   | boolean          | `true`    |
-| close-on-click-action  | 是否在点击选项后关闭         | boolean          | `true`    |
-| close-on-click-outside | 是否在点击外部元素后关闭菜单 | boolean          | `true`    |
-| bg-color               | 自定义背景色                 | string           | `-`       |
-| target-id              | 自定义目标元素 id            | string           | `-`       |
-| arrow-offset           | 小箭头的偏移量               | number           | `0`       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| list | 选项列表 | List[] | `[]` |
+| visible | 是否展示气泡弹出层 | boolean | `false` |
+| theme | 主题风格，可选值为 `dark` | string | `light` |
+| location | 弹出位置 | string | `bottom` |
+| offset | 出现位置的偏移量 | [number,number] | `[0, 12]` |
+| show-arrow | 是否显示小箭头 | boolean | `true` |
+| custom-class | 自定义 class 值 | string | `''` |
+| duration | 动画时长，单位秒 | number \| string | `0.3` |
+| overlay | 是否显示遮罩层 | boolean | `false` |
+| overlay-class | 自定义遮罩层类名 | string | `''` |
+| overlay-style | 自定义遮罩层样式 | string | `''` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | boolean | `true` |
+| close-on-click-action | 是否在点击选项后关闭 | boolean | `true` |
+| close-on-click-outside | 是否在点击外部元素后关闭菜单 | boolean | `true` |
+| bg-color | 自定义背景色 | string | `-` |
+| target-id | 自定义目标元素 id | string | `-` |
+| arrow-offset | 小箭头的偏移量 | number | `0` |
 
 ### List 数据结构
 
 List 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
 
-| 键名      | 说明                         | 类型                      | 默认值  |
-| --------- | ---------------------------- | ------------------------- | ------- |
-| name      | 选项文字                     | string                    | `-`     |
-| icon      | `@nutui/icons-vue-taro` 图标 | VNode                     | `-`     |
-| disabled  | 是否为禁用状态               | boolean                   | `false` |
-| className | 为对应选项添加额外的类名     | string \| Array \| object | `-`     |
+| 键名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 选项文字 | string | `-` |
+| icon | `@nutui/icons-vue-taro` 图标 | VNode | `-` |
+| disabled | 是否为禁用状态 | boolean | `false` |
+| className | 为对应选项添加额外的类名 | string \| Array \| object | `-` |
 
 ### Slots
 
-| 名称      | 说明                        |
-| --------- | --------------------------- |
-| content   | 自定义气泡组件菜单内容      |
+| 名称 | 说明 |
+| --- | --- |
+| content | 自定义气泡组件菜单内容 |
 | reference | 触发 Popover 显示的元素内容 |
 
 ### Events
 
-| 事件名 | 说明           |
-| ------ | -------------- |
+| 事件名 | 说明 |
+| --- | --- |
 | choose | 点击选项时触发 |
-| open   | 打开菜单时触发 |
-| close  | 关闭菜单时触发 |
+| open | 打开菜单时触发 |
+| close | 关闭菜单时触发 |
 
 ## 主题定制
 
@@ -544,13 +478,13 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                 | 默认值                   |
-| ------------------------------------ | ------------------------ |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-popover-white-background-color | _rgba(255, 255, 255, 1)_ |
-| --nut-popover-dark-background-color  | _rgba(75, 76, 77, 1)_    |
-| --nut-popover-border-bottom-color    | _rgba(229, 229, 229, 1)_ |
-| --nut-popover-primary-text-color     | _rgba(51, 51, 51, 1)_    |
-| --nut-popover-disable-color          | _rgba(154, 155, 157, 1)_ |
-| --nut-popover-menu-item-padding      | _8px 0_                  |
-| --nut-popover-menu-item-margin       | _0 8px_                  |
-| --nut-popover-menu-name-line-height  | _normal_                 |
+| --nut-popover-dark-background-color | _rgba(75, 76, 77, 1)_ |
+| --nut-popover-border-bottom-color | _rgba(229, 229, 229, 1)_ |
+| --nut-popover-primary-text-color | _rgba(51, 51, 51, 1)_ |
+| --nut-popover-disable-color | _rgba(154, 155, 157, 1)_ |
+| --nut-popover-menu-item-padding | _8px 0_ |
+| --nut-popover-menu-item-margin | _0 8px_ |
+| --nut-popover-menu-name-line-height | _normal_ |
diff --git a/src/packages/__VUE/skeleton/demo.vue b/src/packages/__VUE/skeleton/demo.vue
index 4db4cb30e1..e7342b8c92 100644
--- a/src/packages/__VUE/skeleton/demo.vue
+++ b/src/packages/__VUE/skeleton/demo.vue
@@ -43,8 +43,8 @@
   </view>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('skeleton');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -70,17 +70,8 @@ const initTranslate = () =>
     }
   });
 
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const checked = ref(false);
-
-    return {
-      checked,
-      translate
-    };
-  }
-});
+initTranslate();
+const checked = ref(false);
 </script>
 
 <style lang="scss">
diff --git a/src/packages/__VUE/skeleton/doc.en-US.md b/src/packages/__VUE/skeleton/doc.en-US.md
index c313d3341b..25bc976c94 100644
--- a/src/packages/__VUE/skeleton/doc.en-US.md
+++ b/src/packages/__VUE/skeleton/doc.en-US.md
@@ -6,7 +6,7 @@ Filling gray bitmap in the area to be loaded on the page is essentially the tran
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Skeleton } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
 </template>
@@ -30,7 +30,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
 </template>
@@ -42,7 +42,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
 </template>
@@ -54,7 +54,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
 </template>
@@ -66,7 +66,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="pic-compose">
     <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
@@ -74,13 +74,13 @@ app.use(Skeleton);
   </div>
 </template>
 <style>
-  .pic-compose {
-    display: flex;
-    justify-content: space-between;
-  }
-  .item {
-    width: 47%;
-  }
+.pic-compose {
+  display: flex;
+  justify-content: space-between;
+}
+.item {
+  width: 47%;
+}
 </style>
 ```
 
@@ -90,7 +90,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="content">
     <nut-switch v-model="checked" />
@@ -111,16 +111,9 @@ app.use(Skeleton);
   </div>
 </template>
 
-<script lang="ts">
+<script setup>
 import { ref } from 'vue';
-export default {
-  setup() {
-    const checked = ref(false);
-    return {
-      checked
-    };
-  }
-};
+const checked = ref(false);
 </script>
 
 <style>
@@ -156,23 +149,23 @@ export default {
 
 ### Props
 
-| Attribute    | Description                                               | Type    | Default   |
-| ------------ | --------------------------------------------------------- | ------- | --------- |
-| loading      | Whether to display skeleton screen                        | boolean | `true`    |
-| width        | Width per row                                             | string  | `default` |
-| height       | Height of each row                                        | string  | `15px`    |
-| animated     | Whether to turn on skeleton screen animation              | boolean | `false`   |
-| avatar       | Show avatar                                               | boolean | `false`   |
-| avatar-shape | Avatar shape: square / round                              | string  | `round`   |
-| avatar-size  | Avatar size                                               | string  | `50px`    |
-| round        | Is the title / paragraph rounded                          | boolean | `false`   |
-| title        | Show paragraph titles (first line displayed)              | boolean | `true`    |
-| row          | Set the number of paragraph lines (shown below the title) | string  | `1`       |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| loading | Whether to display skeleton screen | boolean | `true` |
+| width | Width per row | string | `default` |
+| height | Height of each row | string | `15px` |
+| animated | Whether to turn on skeleton screen animation | boolean | `false` |
+| avatar | Show avatar | boolean | `false` |
+| avatar-shape | Avatar shape: square / round | string | `round` |
+| avatar-size | Avatar size | string | `50px` |
+| round | Is the title / paragraph rounded | boolean | `false` |
+| title | Show paragraph titles (first line displayed) | boolean | `true` |
+| row | Set the number of paragraph lines (shown below the title) | string | `1` |
 
 ### Slots
 
-| Name    | Description                     |
-| ------- | ------------------------------- |
+| Name | Description |
+| --- | --- |
 | default | Skeleton screen display content |
 
 ## Theming
@@ -181,8 +174,8 @@ export default {
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                           | Default Value                                                                                      |
-| ---------------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| --nut-skeleton-content-avatar-background-color | _#efefef_                                                                                          |
-| --nut-skeleton-content-line-background-color   | _#efefef_                                                                                          |
-| --nut-skeleton-animation-background-color      | _linear-gradient(90deg,hsla(0, 0%, 100%, 0),hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)_ |
+| Name | Default Value |
+| --- | --- |
+| --nut-skeleton-content-avatar-background-color | _#efefef_ |
+| --nut-skeleton-content-line-background-color | _#efefef_ |
+| --nut-skeleton-animation-background-color | _linear-gradient(90deg,hsla(0, 0%, 100%, 0),hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)_ |
diff --git a/src/packages/__VUE/skeleton/doc.md b/src/packages/__VUE/skeleton/doc.md
index 6a7f661395..97d6d07f44 100644
--- a/src/packages/__VUE/skeleton/doc.md
+++ b/src/packages/__VUE/skeleton/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Skeleton } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
 </template>
@@ -30,7 +30,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
 </template>
@@ -42,7 +42,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
 </template>
@@ -54,7 +54,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
 </template>
@@ -66,7 +66,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="pic-compose">
     <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
@@ -74,13 +74,13 @@ app.use(Skeleton);
   </div>
 </template>
 <style>
-  .pic-compose {
-    display: flex;
-    justify-content: space-between;
-    .item {
-      width: 47%;
-    }
+.pic-compose {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    width: 47%;
   }
+}
 </style>
 ```
 
@@ -90,7 +90,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="content">
     <nut-switch v-model="checked" />
@@ -112,41 +112,34 @@ app.use(Skeleton);
   </div>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(false);
-      return {
-        checked
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(false);
 </script>
 
 <style>
-  .nut-switch {
-    display: flex;
-    margin: 0 16px 8px 0;
-  }
-  .container {
-    display: flex;
-  }
-  .right-content {
-    margin-left: 19px;
-    font-family: PingFangSC;
-    display: flex;
-    flex-direction: column;
-  }
-  .title {
-    font-size: 14px;
-    color: rgba(51, 51, 51, 1);
-  }
-  .desc {
-    margin-top: 10px;
-    font-size: 13px;
-    color: rgba(154, 155, 157, 1);
-  }
+.nut-switch {
+  display: flex;
+  margin: 0 16px 8px 0;
+}
+.container {
+  display: flex;
+}
+.right-content {
+  margin-left: 19px;
+  font-family: PingFangSC;
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  font-size: 14px;
+  color: rgba(51, 51, 51, 1);
+}
+.desc {
+  margin-top: 10px;
+  font-size: 13px;
+  color: rgba(154, 155, 157, 1);
+}
 </style>
 ```
 
@@ -156,23 +149,23 @@ app.use(Skeleton);
 
 ### Props
 
-| 参数         | 说明                           | 类型    | 默认值    |
-| ------------ | ------------------------------ | ------- | --------- |
-| loading      | 是否显示骨架屏                 | boolean | `true`    |
-| width        | 每行宽度                       | string  | `default` |
-| height       | 每行高度                       | string  | `15px`    |
-| animated     | 是否开启骨架屏动画             | boolean | `false`   |
-| avatar       | 是否显示头像                   | boolean | `false`   |
-| avatar-shape | 头像形状：正方形/圆形          | string  | `round`   |
-| avatar-size  | 头像大小                       | string  | `50px`    |
-| round        | 标题/段落是否采用圆角风格      | boolean | `false`   |
-| title        | 是否显示段落标题（第一行显示） | boolean | `true`    |
-| row          | 设置段落行数（title 下方展示） | string  | `1`       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| loading | 是否显示骨架屏 | boolean | `true` |
+| width | 每行宽度 | string | `default` |
+| height | 每行高度 | string | `15px` |
+| animated | 是否开启骨架屏动画 | boolean | `false` |
+| avatar | 是否显示头像 | boolean | `false` |
+| avatar-shape | 头像形状：正方形/圆形 | string | `round` |
+| avatar-size | 头像大小 | string | `50px` |
+| round | 标题/段落是否采用圆角风格 | boolean | `false` |
+| title | 是否显示段落标题（第一行显示） | boolean | `true` |
+| row | 设置段落行数（title 下方展示） | string | `1` |
 
 ### Slots
 
-| 名称    | 说明           |
-| ------- | -------------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 骨架屏显示内容 |
 
 ## 主题定制
@@ -181,8 +174,8 @@ app.use(Skeleton);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                           | 默认值                                                                                             |
-| ---------------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| --nut-skeleton-content-avatar-background-color | _#efefef_                                                                                          |
-| --nut-skeleton-content-line-background-color   | _#efefef_                                                                                          |
-| --nut-skeleton-animation-background-color      | _linear-gradient(90deg,hsla(0, 0%, 100%, 0),hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-skeleton-content-avatar-background-color | _#efefef_ |
+| --nut-skeleton-content-line-background-color | _#efefef_ |
+| --nut-skeleton-animation-background-color | _linear-gradient(90deg,hsla(0, 0%, 100%, 0),hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)_ |
diff --git a/src/packages/__VUE/skeleton/doc.taro.md b/src/packages/__VUE/skeleton/doc.taro.md
index f9682d2c23..4c2f775bc2 100644
--- a/src/packages/__VUE/skeleton/doc.taro.md
+++ b/src/packages/__VUE/skeleton/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Skeleton } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
 </template>
@@ -30,7 +30,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
 </template>
@@ -42,7 +42,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
 </template>
@@ -54,7 +54,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
 </template>
@@ -66,7 +66,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="pic-compose">
     <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
@@ -93,7 +93,7 @@ app.use(Skeleton);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="content">
     <nut-switch v-model="checked" />
@@ -115,41 +115,34 @@ app.use(Skeleton);
   </div>
 </template>
 
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const checked = ref(false);
-      return {
-        checked
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const checked = ref(false);
 </script>
 
 <style>
-  .nut-switch {
-    display: flex;
-    margin: 0 16px 8px 0;
-  }
-  .container {
-    display: flex;
-  }
-  .right-content {
-    margin-left: 19px;
-    font-family: PingFangSC;
-    display: flex;
-    flex-direction: column;
-  }
-  .title {
-    font-size: 14px;
-    color: rgba(51, 51, 51, 1);
-  }
-  .desc {
-    margin-top: 10px;
-    font-size: 13px;
-    color: rgba(154, 155, 157, 1);
-  }
+.nut-switch {
+  display: flex;
+  margin: 0 16px 8px 0;
+}
+.container {
+  display: flex;
+}
+.right-content {
+  margin-left: 19px;
+  font-family: PingFangSC;
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  font-size: 14px;
+  color: rgba(51, 51, 51, 1);
+}
+.desc {
+  margin-top: 10px;
+  font-size: 13px;
+  color: rgba(154, 155, 157, 1);
+}
 </style>
 ```
 
@@ -159,23 +152,23 @@ app.use(Skeleton);
 
 ### Props
 
-| 参数         | 说明                      | 类型    | 默认值    |
-| ------------ | ------------------------- | ------- | --------- |
-| loading      | 是否显示骨架屏            | boolean | `true`    |
-| width        | 每行宽度                  | string  | `default` |
-| height       | 每行高度                  | string  | `15px`    |
-| animated     | 是否开启骨架屏动画        | boolean | `false`   |
-| avatar       | 是否显示头像              | boolean | `false`   |
-| avatar-shape | 头像形状：正方形/圆形     | string  | `round`   |
-| avatar-size  | 头像大小                  | string  | `50px`    |
-| round        | 标题/段落是否采用圆角风格 | boolean | `false`   |
-| row          | 设置段落行数              | string  | `1`       |
-| title        | 是否显示段落标题          | boolean | `true`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| loading | 是否显示骨架屏 | boolean | `true` |
+| width | 每行宽度 | string | `default` |
+| height | 每行高度 | string | `15px` |
+| animated | 是否开启骨架屏动画 | boolean | `false` |
+| avatar | 是否显示头像 | boolean | `false` |
+| avatar-shape | 头像形状：正方形/圆形 | string | `round` |
+| avatar-size | 头像大小 | string | `50px` |
+| round | 标题/段落是否采用圆角风格 | boolean | `false` |
+| row | 设置段落行数 | string | `1` |
+| title | 是否显示段落标题 | boolean | `true` |
 
 ### Slots
 
-| 名称    | 说明           |
-| ------- | -------------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 骨架屏显示内容 |
 
 ## 主题定制
@@ -184,8 +177,8 @@ app.use(Skeleton);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                           | 默认值                                                                                             |
-| ---------------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| --nut-skeleton-content-avatar-background-color | _#efefef_                                                                                          |
-| --nut-skeleton-content-line-background-color   | _#efefef_                                                                                          |
-| --nut-skeleton-animation-background-color      | _linear-gradient(90deg,hsla(0, 0%, 100%, 0),hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-skeleton-content-avatar-background-color | _#efefef_ |
+| --nut-skeleton-content-line-background-color | _#efefef_ |
+| --nut-skeleton-animation-background-color | _linear-gradient(90deg,hsla(0, 0%, 100%, 0),hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)_ |
diff --git a/src/packages/__VUE/swiper/demo.vue b/src/packages/__VUE/swiper/demo.vue
index 28e6304852..3217e61ccd 100644
--- a/src/packages/__VUE/swiper/demo.vue
+++ b/src/packages/__VUE/swiper/demo.vue
@@ -2,60 +2,60 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in list" :key="item"> <img :src="item" alt="" /> </nut-swiper-item>
+      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
+        <nut-swiper-item v-for="item in state.list" :key="item"> <img :src="item" alt="" /> </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>{{ translate('asyc') }}</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in list1" :key="item">
+      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
+        <nut-swiper-item v-for="item in state.list1" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>{{ translate('dynamicDel') }}</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in list2" :key="item">
+      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
+        <nut-swiper-item v-for="item in state.list2" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>{{ translate('size') }}</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page2" :loop="false" width="300">
-        <nut-swiper-item v-for="item in list" :key="item">
+      <nut-swiper :init-page="state.page2" :loop="false" width="300">
+        <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>{{ translate('indicator') }}</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page3" :loop="true" @change="change">
-        <nut-swiper-item v-for="item in list" :key="item">
+      <nut-swiper :init-page="state.page3" :loop="true" @change="change">
+        <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
         <template #page>
-          <div class="page"> {{ current }}/4 </div>
+          <div class="page"> {{ state.current }}/4 </div>
         </template>
       </nut-swiper>
     </view>
     <h2>{{ translate('indicator1') }}</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :loop="true" auto-play="2000" @change="change1">
-        <nut-swiper-item v-for="item in list1" :key="item">
+      <nut-swiper :init-page="state.page" :loop="true" auto-play="2000" @change="change1">
+        <nut-swiper-item v-for="item in state.list1" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
         <template #page>
-          <div class="page"> {{ current1 }}/4 </div>
+          <div class="page"> {{ state.current1 }}/4 </div>
         </template>
       </nut-swiper>
     </view>
     <h2>{{ translate('btns') }}</h2>
     <view class="demo-box">
-      <nut-swiper ref="swiper" :init-page="page" :loop="true">
-        <nut-swiper-item v-for="item in list" :key="item">
+      <nut-swiper ref="swiper" :init-page="state.page" :loop="true">
+        <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
@@ -71,7 +71,7 @@
     <h2>{{ translate('vertical') }}</h2>
     <view class="demo-box">
       <nut-swiper
-        :init-page="page4"
+        :init-page="state.page4"
         :loop="true"
         auto-play="3000"
         direction="vertical"
@@ -79,7 +79,7 @@
         :pagination-visible="true"
         style="height: 150px"
       >
-        <nut-swiper-item v-for="item in list" :key="item">
+        <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
@@ -87,8 +87,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, onMounted, ref, Ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, onMounted, ref, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('swiper');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -120,61 +120,46 @@ const initTranslate = () =>
       verticalCenter: 'Vertical center display'
     }
   });
-export default defineComponent({
-  components: { Left, Right },
-  props: {},
-  setup() {
-    initTranslate();
-    const swiper = ref(null) as Ref;
-    const state = reactive({
-      page: 2,
-      page2: 0,
-      page3: 0,
-      page4: 0,
-      current: 1,
-      current1: 3,
-      list: [
-        'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-        'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-        'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-        'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-      ],
-      list2: [
-        'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-        'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-        'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-        'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-      ],
-      list1: [] as string[]
-    });
-    const change = (index: number) => {
-      state.current = index + 1;
-    };
-    const change1 = (index: number) => {
-      state.current1 = index + 1;
-    };
-    const handlePrev = () => {
-      swiper.value.prev();
-    };
-    const handleNext = () => {
-      swiper.value.next();
-    };
-    onMounted(() => {
-      setTimeout(() => {
-        state.list1 = state.list.slice();
-        state.list2.splice(1, 1);
-      }, 3000);
-    });
-    return {
-      ...toRefs(state),
-      swiper,
-      change,
-      change1,
-      handlePrev,
-      handleNext,
-      translate
-    };
-  }
+initTranslate();
+const swiper = ref(null) as Ref;
+const state = reactive({
+  page: 2,
+  page2: 0,
+  page3: 0,
+  page4: 0,
+  current: 1,
+  current1: 3,
+  list: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ],
+  list2: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ],
+  list1: [] as string[]
+});
+const change = (index: number) => {
+  state.current = index + 1;
+};
+const change1 = (index: number) => {
+  state.current1 = index + 1;
+};
+const handlePrev = () => {
+  swiper.value.prev();
+};
+const handleNext = () => {
+  swiper.value.next();
+};
+onMounted(() => {
+  setTimeout(() => {
+    state.list1 = state.list.slice();
+    state.list2.splice(1, 1);
+  }, 3000);
 });
 </script>
 
diff --git a/src/packages/__VUE/swiper/doc.en-US.md b/src/packages/__VUE/swiper/doc.en-US.md
index 7728522919..b5d81162cc 100644
--- a/src/packages/__VUE/swiper/doc.en-US.md
+++ b/src/packages/__VUE/swiper/doc.en-US.md
@@ -6,7 +6,7 @@ Often used in a group of pictures or card rotation.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Swiper, SwiperItem } from '@nutui/nutui';
 
@@ -24,7 +24,7 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
     <nut-swiper-item>
@@ -41,25 +41,18 @@ app.use(SwiperItem);
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 2
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const page = ref(2);
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -69,44 +62,39 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in list" :key="item">
+  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+    <nut-swiper-item v-for="item in state.list" :key="item">
       <img :src="item" alt="" />
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 2,
-        list: [] as string[]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          state.list = [
-            'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-            'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-            'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-            'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-          ];
-        }, 3000);
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  page: 2,
+  list: []
+});
+onMounted(() => {
+  setTimeout(() => {
+    state.list = [
+      'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+      'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+      'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+      'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+    ];
+  }, 3000);
+});
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -118,44 +106,39 @@ Support dynamic addition / deletion of pictures
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in list" :key="item">
+  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+    <nut-swiper-item v-for="item in state.list" :key="item">
       <img :src="item" alt="" />
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 2,
-        list: [
-          'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-          'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-          'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-        ]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          state.list.splice(1, 1);
-        }, 3000);
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  page: 2,
+  list: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ]
+});
+onMounted(() => {
+  setTimeout(() => {
+    state.list.splice(1, 1);
+  }, 3000);
+});
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -167,9 +150,9 @@ Support dynamic addition / deletion of pictures
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page2" :loop="false" width="300">
+  <nut-swiper :init-page="page" :loop="false" width="300">
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -184,25 +167,18 @@ Support dynamic addition / deletion of pictures
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page2: 2
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const page = ref(2);
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -214,9 +190,9 @@ Support dynamic addition / deletion of pictures
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page3" :loop="true" @change="change">
+  <nut-swiper :init-page="state.page3" :loop="true" @change="change">
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -230,45 +206,40 @@ Support dynamic addition / deletion of pictures
       <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
     </nut-swiper-item>
     <template #page>
-      <div class="page"> {{ current }}/4 </div>
+      <div class="page"> {{ state.current }}/4 </div>
     </template>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page3: 0,
-        current: 1
-      });
-      const change = (index: number) => {
-        state.current = index + 1;
-      };
-      return { ...toRefs(state), change };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  page3: 0,
+  current: 1
+});
+const change = (index) => {
+  state.current = index + 1;
+};
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
-  .page {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 46px;
-    height: 22px;
-    background: rgba(0, 0, 0, 0.33);
-    border-radius: 22px;
-    text-align: center;
-    color: #fff;
-    font-size: 14px;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 46px;
+  height: 22px;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 22px;
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+}
 </style>
 ```
 
@@ -278,9 +249,9 @@ Support dynamic addition / deletion of pictures
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page" :loop="true" @change="change" auto-play="2000">
+  <nut-swiper :init-page="state.page" :loop="true" @change="change" auto-play="2000">
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -294,45 +265,40 @@ Support dynamic addition / deletion of pictures
       <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
     </nut-swiper-item>
     <template #page>
-      <div class="page"> {{ current1 }}/4 </div>
+      <div class="page"> {{ state.current1 }}/4 </div>
     </template>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 0,
-        current1: 1
-      });
-      const change = (index: number) => {
-        state.current1 = index + 1;
-      };
-      return { ...toRefs(state), change };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  page: 0,
+  current1: 1
+});
+const change = (index) => {
+  state.current1 = index + 1;
+};
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
-  .page {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 46px;
-    height: 22px;
-    background: rgba(0, 0, 0, 0.33);
-    border-radius: 22px;
-    text-align: center;
-    color: #fff;
-    font-size: 14px;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 46px;
+  height: 22px;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 22px;
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+}
 </style>
 ```
 
@@ -344,11 +310,11 @@ You can manually switch through `api` (`prev`, `next`)
 
 :::demo
 
-```html
+```vue
 <template>
   <view class="demo-box">
-    <nut-swiper :init-page="page" :loop="true" ref="swiper">
-      <nut-swiper-item v-for="item in list" :key="item">
+    <nut-swiper :init-page="state.page" :loop="true" ref="swiper">
+      <nut-swiper-item v-for="item in state.list" :key="item">
         <img :src="item" alt="" />
       </nut-swiper-item>
     </nut-swiper>
@@ -362,63 +328,54 @@ You can manually switch through `api` (`prev`, `next`)
     </view>
   </view>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, ref, Ref } from 'vue';
-  export default {
-    components: {
-      Left,
-      Right
-    },
-    setup() {
-      const swiper = ref(null) as Ref;
-      const state = reactive({
-        page: 2,
-        list: [
-          'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-          'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-          'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-        ]
-      });
-      const handlePrev = () => {
-        swiper.value.prev();
-      };
-      const handleNext = () => {
-        swiper.value.next();
-      };
-
-      return { ...toRefs(state), swiper, handlePrev, handleNext };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+import { Left, Right } from '@nutui/icons-vue';
+const swiper = ref(null);
+const state = reactive({
+  page: 2,
+  list: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ]
+});
+const handlePrev = () => {
+  swiper.value.prev();
+};
+const handleNext = () => {
+  swiper.value.next();
+};
 </script>
 <style>
-  .demo-box {
-    position: relative;
-  }
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
-  .nut-swiper-btns {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-    display: flex;
-    justify-content: space-between;
-  }
-  .nut-swiper-btns span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 30px;
-    background-color: rgba(0, 0, 0, 0.2);
-  }
+.demo-box {
+  position: relative;
+}
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.nut-swiper-btns {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+}
+.nut-swiper-btns span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
 </style>
 ```
 
@@ -430,10 +387,10 @@ You can manually switch through `api` (`prev`, `next`)
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swiper
-    :init-page="page4"
+    :init-page="page"
     :loop="true"
     auto-play="3000"
     direction="vertical"
@@ -455,34 +412,27 @@ You can manually switch through `api` (`prev`, `next`)
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page4: 0
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const page = ref(2);
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
-  .nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-  }
-  .nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i.active {
-    height: 18px;
-    border-radius: 5px;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+.nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i.active {
+  height: 18px;
+  border-radius: 5px;
+}
 </style>
 ```
 
@@ -492,40 +442,40 @@ You can manually switch through `api` (`prev`, `next`)
 
 ### Props
 
-| Attribute           | Description                                                 | Type             | Default              |
-| ------------------- | ----------------------------------------------------------- | ---------------- | -------------------- |
-| width               | Width of rotation card                                      | number \| string | `window.innerWidth ` |
-| height              | Height of rotation card                                     | number \| string | `0`                  |
-| direction           | Rotation direction, optional value：`horizontal`,`vertical` | string           | `'horizontal'`       |
-| pagination-visible  | Is the paging indicator displayed                           | boolean          | `false`              |
-| pagination-color    | The color selected by the pagination indicator              | string           | `'#fff'`             |
-| loop                | Whether to rotate                                           | boolean          | `true`               |
-| duration            | Animation duration（Unit ms）                               | number \| string | `500`                |
-| auto-play           | Automatic rotation duration, 0 means no automatic rotation  | number \| string | `0`                  |
-| init-page           | Initialize index value                                      | number \| string | `0`                  |
-| touchable           | if touchable to slide                                       | boolean          | `true`               |
-| is-prevent-default  | Disable default events during sliding                       | boolean          | `true`               |
-| is-stop-propagation | Is bubbling prohibited during sliding                       | boolean          | `true`               |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| width | Width of rotation card | number \| string | `window.innerWidth ` |
+| height | Height of rotation card | number \| string | `0` |
+| direction | Rotation direction, optional value：`horizontal`,`vertical` | string | `'horizontal'` |
+| pagination-visible | Is the paging indicator displayed | boolean | `false` |
+| pagination-color | The color selected by the pagination indicator | string | `'#fff'` |
+| loop | Whether to rotate | boolean | `true` |
+| duration | Animation duration（Unit ms） | number \| string | `500` |
+| auto-play | Automatic rotation duration, 0 means no automatic rotation | number \| string | `0` |
+| init-page | Initialize index value | number \| string | `0` |
+| touchable | if touchable to slide | boolean | `true` |
+| is-prevent-default | Disable default events during sliding | boolean | `true` |
+| is-stop-propagation | Is bubbling prohibited during sliding | boolean | `true` |
 
 ### Events
 
-| Event  | Description            | Arguments           |
-| ------ | ---------------------- | ------------------- |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | change | Callback after sliding | Current index value |
 
 ### Slots
 
-| Name | Description      |
-| ---- | ---------------- |
+| Name | Description |
+| --- | --- |
 | page | Custom Indicator |
 
 ### Methods
 
-| Event | Description                      | Arguments      |
-| ----- | -------------------------------- | -------------- |
-| prev  | Switch to previous page          | -              |
-| next  | Switch to next page              | -              |
-| to    | Switch to the specified rotation | `index:number` |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| prev | Switch to previous page | - |
+| next | Switch to next page | - |
+| to | Switch to the specified rotation | `index:number` |
 
 ## Theming
 
@@ -533,9 +483,9 @@ You can manually switch through `api` (`prev`, `next`)
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                       | Default Value |
-| ------------------------------------------ | ------------- |
-| --nut-swiper-pagination-item-width         | _8px_         |
-| --nut-swiper-pagination-item-height        | _3px_         |
-| --nut-swiper-pagination-item-margin-right  | _7px_         |
-| --nut-swiper-pagination-item-border-radius | _2px_         |
+| Name | Default Value |
+| --- | --- |
+| --nut-swiper-pagination-item-width | _8px_ |
+| --nut-swiper-pagination-item-height | _3px_ |
+| --nut-swiper-pagination-item-margin-right | _7px_ |
+| --nut-swiper-pagination-item-border-radius | _2px_ |
diff --git a/src/packages/__VUE/swiper/doc.md b/src/packages/__VUE/swiper/doc.md
index ab57ac7d53..2fbd183590 100644
--- a/src/packages/__VUE/swiper/doc.md
+++ b/src/packages/__VUE/swiper/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Swiper, SwiperItem } from '@nutui/nutui';
 
@@ -24,7 +24,7 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
     <nut-swiper-item>
@@ -41,25 +41,18 @@ app.use(SwiperItem);
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 2
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const page = ref(2);
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -69,44 +62,39 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in list" :key="item">
+  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+    <nut-swiper-item v-for="item in state.list" :key="item">
       <img :src="item" alt="" />
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 2,
-        list: [] as string[]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          state.list = [
-            'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-            'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-            'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-            'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-          ];
-        }, 3000);
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  page: 2,
+  list: []
+});
+onMounted(() => {
+  setTimeout(() => {
+    state.list = [
+      'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+      'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+      'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+      'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+    ];
+  }, 3000);
+});
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -118,44 +106,39 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in list" :key="item">
+  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+    <nut-swiper-item v-for="item in state.list" :key="item">
       <img :src="item" alt="" />
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 2,
-        list: [
-          'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-          'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-          'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-        ]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          state.list.splice(1, 1);
-        }, 3000);
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  page: 2,
+  list: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ]
+});
+onMounted(() => {
+  setTimeout(() => {
+    state.list.splice(1, 1);
+  }, 3000);
+});
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -167,9 +150,9 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page2" :loop="false" width="300">
+  <nut-swiper :init-page="page" :loop="false" width="300">
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -184,25 +167,18 @@ app.use(SwiperItem);
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page2: 2
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const page = ref(2);
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -214,9 +190,9 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page3" :loop="true" @change="change">
+  <nut-swiper :init-page="state.page3" :loop="true" @change="change">
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -230,45 +206,40 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
     </nut-swiper-item>
     <template #page>
-      <div class="page"> {{ current }}/4 </div>
+      <div class="page"> {{ state.current }}/4 </div>
     </template>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page3: 0,
-        current: 1
-      });
-      const change = (index: number) => {
-        state.current = index + 1;
-      };
-      return { ...toRefs(state), change };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  page3: 0,
+  current: 1
+});
+const change = (index) => {
+  state.current = index + 1;
+};
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
-  .page {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 46px;
-    height: 22px;
-    background: rgba(0, 0, 0, 0.33);
-    border-radius: 22px;
-    text-align: center;
-    color: #fff;
-    font-size: 14px;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 46px;
+  height: 22px;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 22px;
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+}
 </style>
 ```
 
@@ -278,9 +249,9 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page" :loop="true" @change="change" auto-play="2000">
+  <nut-swiper :init-page="state.page" :loop="true" @change="change" auto-play="2000">
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -294,45 +265,40 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
     </nut-swiper-item>
     <template #page>
-      <div class="page"> {{ current1 }}/4 </div>
+      <div class="page"> {{ state.current1 }}/4 </div>
     </template>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 0,
-        current1: 1
-      });
-      const change = (index: number) => {
-        state.current1 = index + 1;
-      };
-      return { ...toRefs(state), change };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  page: 0,
+  current1: 1
+});
+const change = (index) => {
+  state.current1 = index + 1;
+};
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
-  .page {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 46px;
-    height: 22px;
-    background: rgba(0, 0, 0, 0.33);
-    border-radius: 22px;
-    text-align: center;
-    color: #fff;
-    font-size: 14px;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 46px;
+  height: 22px;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 22px;
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+}
 </style>
 ```
 
@@ -344,11 +310,11 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <view class="demo-box">
-    <nut-swiper :init-page="page" :loop="true" ref="swiper">
-      <nut-swiper-item v-for="item in list" :key="item">
+    <nut-swiper :init-page="state.page" :loop="true" ref="swiper">
+      <nut-swiper-item v-for="item in state.list" :key="item">
         <img :src="item" alt="" />
       </nut-swiper-item>
     </nut-swiper>
@@ -362,64 +328,54 @@ app.use(SwiperItem);
     </view>
   </view>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, ref, Ref } from 'vue';
-  import { Left, Right } from '@nutui/icons-vue';
-  export default {
-    components: {
-      Left,
-      Right
-    },
-    setup() {
-      const swiper = ref(null) as Ref;
-      const state = reactive({
-        page: 2,
-        list: [
-          'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-          'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-          'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-        ]
-      });
-      const handlePrev = () => {
-        swiper.value.prev();
-      };
-      const handleNext = () => {
-        swiper.value.next();
-      };
-
-      return { ...toRefs(state), swiper, handlePrev, handleNext };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+import { Left, Right } from '@nutui/icons-vue';
+const swiper = ref(null);
+const state = reactive({
+  page: 2,
+  list: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ]
+});
+const handlePrev = () => {
+  swiper.value.prev();
+};
+const handleNext = () => {
+  swiper.value.next();
+};
 </script>
 <style>
-  .demo-box {
-    position: relative;
-  }
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
-  .nut-swiper-btns {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-    display: flex;
-    justify-content: space-between;
-  }
-  .nut-swiper-btns span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 30px;
-    background-color: rgba(0, 0, 0, 0.2);
-  }
+.demo-box {
+  position: relative;
+}
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.nut-swiper-btns {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+}
+.nut-swiper-btns span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
 </style>
 ```
 
@@ -431,10 +387,10 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swiper
-    :init-page="page4"
+    :init-page="page"
     :loop="true"
     auto-play="3000"
     direction="vertical"
@@ -456,34 +412,27 @@ app.use(SwiperItem);
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page4: 0
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const page = ref(2);
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
-  .nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-  }
-  .nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i.active {
-    height: 18px;
-    border-radius: 5px;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+.nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i.active {
+  height: 18px;
+  border-radius: 5px;
+}
 </style>
 ```
 
@@ -493,40 +442,40 @@ app.use(SwiperItem);
 
 ### Props
 
-| 参数                | 说明                                   | 类型             | 默认值              |
-| ------------------- | -------------------------------------- | ---------------- | ------------------- |
-| width               | 轮播卡片的宽度                         | number \| string | `window.innerWidth` |
-| height              | 轮播卡片的高度                         | number \| string | `0`                 |
-| direction           | 轮播方向,可选值`horizontal`,`vertical` | string           | `'horizontal'`      |
-| pagination-visible  | 分页指示器是否展示                     | boolean          | `false`             |
-| pagination-color    | 分页指示器选中的颜色                   | string           | `'#fff'`            |
-| loop                | 是否循环轮播                           | boolean          | `true`              |
-| duration            | 动画时长（单位是 ms）                  | number \| string | `500`               |
-| auto-play           | 自动轮播时长，0 表示不会自动轮播       | number \| string | `0`                 |
-| init-page           | 初始化索引值                           | number \| string | `0`                 |
-| touchable           | 是否可触摸滑动                         | boolean          | `true`              |
-| is-prevent-default  | 滑动过程中是否禁用默认事件             | boolean          | `true`              |
-| is-stop-propagation | 滑动过程中是否禁止冒泡                 | boolean          | `true`              |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 轮播卡片的宽度 | number \| string | `window.innerWidth` |
+| height | 轮播卡片的高度 | number \| string | `0` |
+| direction | 轮播方向,可选值`horizontal`,`vertical` | string | `'horizontal'` |
+| pagination-visible | 分页指示器是否展示 | boolean | `false` |
+| pagination-color | 分页指示器选中的颜色 | string | `'#fff'` |
+| loop | 是否循环轮播 | boolean | `true` |
+| duration | 动画时长（单位是 ms） | number \| string | `500` |
+| auto-play | 自动轮播时长，0 表示不会自动轮播 | number \| string | `0` |
+| init-page | 初始化索引值 | number \| string | `0` |
+| touchable | 是否可触摸滑动 | boolean | `true` |
+| is-prevent-default | 滑动过程中是否禁用默认事件 | boolean | `true` |
+| is-stop-propagation | 滑动过程中是否禁止冒泡 | boolean | `true` |
 
 ### Events
 
-| 事件名 | 说明           | 回调参数           |
-| ------ | -------------- | ------------------ |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 滑动之后的回调 | `当前索引值 index` |
 
 ### Slots
 
-| 名称 | 说明         |
-| ---- | ------------ |
+| 名称 | 说明 |
+| --- | --- |
 | page | 自定义指示器 |
 
 ### Methods
 
-| 事件名 | 说明           | 参数           |
-| ------ | -------------- | -------------- |
-| prev   | 切换到上一页   | -              |
-| next   | 切换到下一页   | -              |
-| to     | 切换到指定轮播 | `index:number` |
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| prev | 切换到上一页 | - |
+| next | 切换到下一页 | - |
+| to | 切换到指定轮播 | `index:number` |
 
 ## 主题定制
 
@@ -534,9 +483,9 @@ app.use(SwiperItem);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                       | 默认值 |
-| ------------------------------------------ | ------ |
-| --nut-swiper-pagination-item-width         | _8px_  |
-| --nut-swiper-pagination-item-height        | _3px_  |
-| --nut-swiper-pagination-item-margin-right  | _7px_  |
-| --nut-swiper-pagination-item-border-radius | _2px_  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-swiper-pagination-item-width | _8px_ |
+| --nut-swiper-pagination-item-height | _3px_ |
+| --nut-swiper-pagination-item-margin-right | _7px_ |
+| --nut-swiper-pagination-item-border-radius | _2px_ |
diff --git a/src/packages/__VUE/swiper/doc.taro.md b/src/packages/__VUE/swiper/doc.taro.md
index fc552a9786..c2e9006a01 100644
--- a/src/packages/__VUE/swiper/doc.taro.md
+++ b/src/packages/__VUE/swiper/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Swiper, SwiperItem } from '@nutui/nutui-taro';
 
@@ -24,7 +24,7 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
     <nut-swiper-item>
@@ -41,25 +41,18 @@ app.use(SwiperItem);
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 2
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const page = ref(2);
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -69,44 +62,39 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in list" :key="item">
+  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+    <nut-swiper-item v-for="item in state.list" :key="item">
       <img :src="item" alt="" />
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 2,
-        list: [] as string[]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          state.list = [
-            'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-            'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-            'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-            'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-          ];
-        }, 3000);
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  page: 2,
+  list: []
+});
+onMounted(() => {
+  setTimeout(() => {
+    state.list = [
+      'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+      'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+      'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+      'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+    ];
+  }, 3000);
+});
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -118,44 +106,39 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in list" :key="item">
+  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+    <nut-swiper-item v-for="item in state.list" :key="item">
       <img :src="item" alt="" />
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 2,
-        list: [
-          'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-          'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-          'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-        ]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          state.list.splice(1, 1);
-        }, 3000);
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  page: 2,
+  list: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ]
+});
+onMounted(() => {
+  setTimeout(() => {
+    state.list.splice(1, 1);
+  }, 3000);
+});
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -167,9 +150,9 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page2" :loop="false" width="300">
+  <nut-swiper :init-page="page" :loop="false" width="300">
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -184,25 +167,18 @@ app.use(SwiperItem);
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page2: 2
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const page = ref(2);
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -214,9 +190,9 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page3" :loop="true" @change="change">
+  <nut-swiper :init-page="state.page3" :loop="true" @change="change">
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -230,45 +206,40 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
     </nut-swiper-item>
     <template #page>
-      <div class="page"> {{ current }}/4 </div>
+      <div class="page"> {{ state.current }}/4 </div>
     </template>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page3: 0,
-        current: 1
-      });
-      const change = (index: number) => {
-        state.current = index + 1;
-      };
-      return { ...toRefs(state), change };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  page3: 0,
+  current: 1
+});
+const change = (index) => {
+  state.current = index + 1;
+};
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
-  .page {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 46px;
-    height: 22px;
-    background: rgba(0, 0, 0, 0.33);
-    border-radius: 22px;
-    text-align: center;
-    color: #fff;
-    font-size: 14px;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 46px;
+  height: 22px;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 22px;
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+}
 </style>
 ```
 
@@ -278,9 +249,9 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-swiper :init-page="page" :loop="true" @change="change" auto-play="2000">
+  <nut-swiper :init-page="state.page" :loop="true" @change="change" auto-play="2000">
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -294,45 +265,40 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
     </nut-swiper-item>
     <template #page>
-      <div class="page"> {{ current1 }}/4 </div>
+      <div class="page"> {{ state.current1 }}/4 </div>
     </template>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page: 0,
-        current1: 1
-      });
-      const change = (index: number) => {
-        state.current1 = index + 1;
-      };
-      return { ...toRefs(state), change };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  page: 0,
+  current1: 1
+});
+const change = (index) => {
+  state.current1 = index + 1;
+};
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
-  .page {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 46px;
-    height: 22px;
-    background: rgba(0, 0, 0, 0.33);
-    border-radius: 22px;
-    text-align: center;
-    color: #fff;
-    font-size: 14px;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 46px;
+  height: 22px;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 22px;
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+}
 </style>
 ```
 
@@ -344,11 +310,11 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <view class="demo-box">
-    <nut-swiper :init-page="page" :loop="true" ref="swiper">
-      <nut-swiper-item v-for="item in list" :key="item">
+    <nut-swiper :init-page="state.page" :loop="true" ref="swiper">
+      <nut-swiper-item v-for="item in state.list" :key="item">
         <img :src="item" alt="" />
       </nut-swiper-item>
     </nut-swiper>
@@ -362,64 +328,54 @@ app.use(SwiperItem);
     </view>
   </view>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, ref, Ref } from 'vue';
-  import { Left, Right } from '@nutui/icons-vue-taro';
-  export default {
-    components: {
-      Left,
-      Right
-    },
-    setup() {
-      const swiper = ref(null) as Ref;
-      const state = reactive({
-        page: 2,
-        list: [
-          'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-          'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-          'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-        ]
-      });
-      const handlePrev = () => {
-        swiper.value.prev();
-      };
-      const handleNext = () => {
-        swiper.value.next();
-      };
-
-      return { ...toRefs(state), swiper, handlePrev, handleNext };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+import { Left, Right } from '@nutui/icons-vue';
+const swiper = ref(null);
+const state = reactive({
+  page: 2,
+  list: [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+  ]
+});
+const handlePrev = () => {
+  swiper.value.prev();
+};
+const handleNext = () => {
+  swiper.value.next();
+};
 </script>
 <style>
-  .demo-box {
-    position: relative;
-  }
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
-  .nut-swiper-btns {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-    display: flex;
-    justify-content: space-between;
-  }
-  .nut-swiper-btns span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 30px;
-    background-color: rgba(0, 0, 0, 0.2);
-  }
+.demo-box {
+  position: relative;
+}
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
+.nut-swiper-btns {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+}
+.nut-swiper-btns span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
 </style>
 ```
 
@@ -431,10 +387,10 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-swiper
-    :init-page="page4"
+    :init-page="page"
     :loop="true"
     auto-play="3000"
     direction="vertical"
@@ -456,25 +412,18 @@ app.use(SwiperItem);
     </nut-swiper-item>
   </nut-swiper>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        page4: 0
-      });
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const page = ref(2);
 </script>
 <style>
-  .nut-swiper-item {
-    line-height: 150px;
-  }
-  .nut-swiper-item img {
-    width: 100%;
-    height: 100%;
-  }
+.nut-swiper-item {
+  line-height: 150px;
+}
+.nut-swiper-item img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 ```
 
@@ -484,40 +433,40 @@ app.use(SwiperItem);
 
 ### Props
 
-| 参数                | 说明                                   | 类型             | 默认值            |
-| ------------------- | -------------------------------------- | ---------------- | ----------------- |
-| width               | 轮播卡片的宽度                         | number \| string | window.innerWidth |
-| height              | 轮播卡片的高度                         | number \| string | `0`               |
-| direction           | 轮播方向,可选值`horizontal`,`vertical` | string           | `'horizontal'`    |
-| pagination-visible  | 分页指示器是否展示                     | boolean          | `false`           |
-| pagination-color    | 分页指示器选中的颜色                   | string           | `'#fff'`          |
-| loop                | 是否循环轮播                           | boolean          | `true`            |
-| duration            | 动画时长（单位是 ms）                  | number \| string | `500`             |
-| auto-play           | 自动轮播时长，0 表示不会自动轮播       | number \| string | `0`               |
-| init-page           | 初始化索引值                           | number \| string | `0`               |
-| touchable           | 是否可触摸滑动                         | boolean          | `true`            |
-| is-prevent-default  | 滑动过程中是否禁用默认事件             | boolean          | `true`            |
-| is-stop-propagation | 滑动过程中是否禁止冒泡                 | boolean          | `true`            |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 轮播卡片的宽度 | number \| string | window.innerWidth |
+| height | 轮播卡片的高度 | number \| string | `0` |
+| direction | 轮播方向,可选值`horizontal`,`vertical` | string | `'horizontal'` |
+| pagination-visible | 分页指示器是否展示 | boolean | `false` |
+| pagination-color | 分页指示器选中的颜色 | string | `'#fff'` |
+| loop | 是否循环轮播 | boolean | `true` |
+| duration | 动画时长（单位是 ms） | number \| string | `500` |
+| auto-play | 自动轮播时长，0 表示不会自动轮播 | number \| string | `0` |
+| init-page | 初始化索引值 | number \| string | `0` |
+| touchable | 是否可触摸滑动 | boolean | `true` |
+| is-prevent-default | 滑动过程中是否禁用默认事件 | boolean | `true` |
+| is-stop-propagation | 滑动过程中是否禁止冒泡 | boolean | `true` |
 
 ### Events
 
-| 事件名 | 说明           | 回调参数           |
-| ------ | -------------- | ------------------ |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | change | 滑动之后的回调 | `当前索引值 index` |
 
 ### Slots
 
-| 名称 | 说明         |
-| ---- | ------------ |
+| 名称 | 说明 |
+| --- | --- |
 | page | 自定义指示器 |
 
 ### Methods
 
-| 事件名 | 说明           | 参数         |
-| ------ | -------------- | ------------ |
-| prev   | 切换到上一页   | -            |
-| next   | 切换到下一页   | -            |
-| to     | 切换到指定轮播 | index:number |
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| prev | 切换到上一页 | - |
+| next | 切换到下一页 | - |
+| to | 切换到指定轮播 | index:number |
 
 ## 主题定制
 
@@ -525,9 +474,9 @@ app.use(SwiperItem);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                       | 默认值 |
-| ------------------------------------------ | ------ |
-| --nut-swiper-pagination-item-width         | _8px_  |
-| --nut-swiper-pagination-item-height        | _3px_  |
-| --nut-swiper-pagination-item-margin-right  | _7px_  |
-| --nut-swiper-pagination-item-border-radius | _2px_  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-swiper-pagination-item-width | _8px_ |
+| --nut-swiper-pagination-item-height | _3px_ |
+| --nut-swiper-pagination-item-margin-right | _7px_ |
+| --nut-swiper-pagination-item-border-radius | _2px_ |
diff --git a/src/packages/__VUE/table/demo.vue b/src/packages/__VUE/table/demo.vue
index d75249a7fd..31a6480ca9 100644
--- a/src/packages/__VUE/table/demo.vue
+++ b/src/packages/__VUE/table/demo.vue
@@ -1,32 +1,32 @@
 <template>
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
-    <nut-table :columns="columns1" :data="data1"></nut-table>
+    <nut-table :columns="state.columns1" :data="state.data1"></nut-table>
     <h2>{{ translate('title1') }}</h2>
-    <nut-table :columns="columns2" :data="data1" :bordered="bordered1"></nut-table>
+    <nut-table :columns="state.columns2" :data="state.data1" :bordered="state.bordered1"></nut-table>
     <h2>{{ translate('title2') }}</h2>
-    <nut-table :columns="columns3" :data="data2" :summary="summary"></nut-table>
+    <nut-table :columns="state.columns3" :data="state.data2" :summary="state.summary"></nut-table>
     <h2>{{ translate('title3') }}</h2>
-    <nut-table :columns="columns3" :data="data2" :striped="striped"></nut-table>
+    <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
     <h2>{{ translate('title4') }}</h2>
-    <nut-table :columns="columns3" :data="data3"> </nut-table>
+    <nut-table :columns="state.columns3" :data="state.data3"> </nut-table>
     <br />
-    <nut-table :columns="columns3" :data="data3">
+    <nut-table :columns="state.columns3" :data="state.data3">
       <template #nodata>
         <div class="no-data"> {{ translate('title5') }} </div>
       </template>
     </nut-table>
     <h2>{{ translate('title6') }}</h2>
-    <nut-table :columns="columns4" :data="data4"> </nut-table>
+    <nut-table :columns="state.columns4" :data="state.data4"> </nut-table>
     <h2>{{ translate('title7') }}</h2>
-    <nut-table :columns="columns3" :data="data5"> </nut-table>
+    <nut-table :columns="state.columns3" :data="state.data5"> </nut-table>
     <h2>{{ translate('title8') }}</h2>
-    <nut-table :columns="columns6" :data="data6" @sorter="handleSorter"> </nut-table>
+    <nut-table :columns="state.columns6" :data="state.data6" @sorter="handleSorter"> </nut-table>
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, onMounted, onUnmounted, h, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, onMounted, onUnmounted, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { TableColumnProps } from './types';
 import { showToast } from '@/packages/nutui.vue';
@@ -91,257 +91,246 @@ const initTranslate = () =>
       hangzhou: 'hangzhou'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const state = reactive({
-      bordered1: false,
-      striped: true,
-      columns1: [
-        {
-          title: translate('name'),
-          key: 'name',
-          stylehead: 'font-size:20px;color:red;font-weight:bolder;',
-          stylecolumn: 'font-size:10px;'
-        },
-        {
-          title: translate('sex'),
-          key: 'sex',
-          stylecolumn: 'font-size:20px;',
-          render: ({ sex }) => {
-            return h(
-              'span',
-              {
-                style: {
-                  color: sex === translate('woman') ? 'blue' : 'green'
-                }
-              },
-              sex
-            );
-          }
-        },
-        {
-          title: translate('education'),
-          key: 'record'
-        }
-      ],
-      columns2: [
-        {
-          title: translate('name'),
-          key: 'name',
-          align: 'center'
-        },
-        {
-          title: translate('sex'),
-          key: 'sex'
-        },
-        {
-          title: translate('education'),
-          key: 'record'
-        }
-      ],
-      columns3: [
-        {
-          title: translate('name'),
-          key: 'name'
-        },
-        {
-          title: translate('sex'),
-          key: 'sex'
-        },
-        {
-          title: translate('education'),
-          key: 'record'
-        },
-        {
-          title: translate('age'),
-          key: 'age'
-        },
-        {
-          title: translate('address'),
-          key: 'address'
-        }
-      ],
-      columns4: [
-        {
-          title: translate('name'),
-          key: 'name',
-          align: 'center'
-        },
-        {
-          title: translate('sex'),
-          key: 'sex'
-        },
-        {
-          title: translate('education'),
-          key: 'record'
-        },
-        {
-          title: translate('oper'),
-          key: 'render'
-        }
-      ],
-      columns6: [
-        {
-          title: translate('name'),
-          key: 'name',
-          align: 'center',
-          sorter: true
-        },
-        {
-          title: translate('sex'),
-          key: 'sex'
-        },
-        {
-          title: translate('education'),
-          key: 'record'
-        },
-        {
-          title: translate('age'),
-          key: 'age',
-          sorter: (row1: any, row2: any) => {
-            return row1.age - row2.age;
-          }
-        }
-      ],
-      data1: [
-        {
-          sex: translate('man'),
-          name: 'Tom',
-          record: translate('primary')
-        },
-        {
-          name: 'Lucy',
-          sex: translate('woman'),
-          record: translate('undergraduate')
-        },
-        {
-          name: 'Jack',
-          sex: translate('man'),
-          record: translate('high')
-        }
-      ],
-      data2: [
-        {
-          address: translate('beijing'),
-          name: 'Tom',
-          sex: translate('man'),
-          record: translate('primary'),
-          age: 13
-        },
-        {
-          record: translate('undergraduate'),
-          name: 'Lucy',
-          sex: translate('woman'),
-          age: 34,
-          address: translate('shanghai')
-        },
-        {
-          age: 4,
-          name: 'Jack',
-          sex: translate('man'),
-          record: translate('high'),
-          address: translate('hangzhou')
-        }
-      ],
-      data3: [],
-      data4: [
-        {
-          name: 'Tom',
-          sex: translate('man'),
-          record: translate('primary'),
-          render: () => {
-            return h(
-              Button,
-              {
-                onClick: () => {
-                  (showToast as any).text('hello');
-                },
-                size: 'small',
-                type: 'primary'
-              },
-              () => h('div', {}, 'Hello')
-            );
-          }
-        },
-        {
-          name: 'Lucy',
-          sex: translate('woman'),
-          record: translate('undergraduate'),
-          render: () => {
-            return h(Dongdong, { width: '14px', height: '14px' });
-          }
-        },
-        {
-          name: 'Jack',
-          sex: translate('man'),
-          record: translate('high'),
-          render: () => {
-            return h(
-              Button,
-              {
-                type: 'success',
-                size: 'small',
-                onClick: () => {
-                  window.open('https://www.jd.com');
-                }
-              },
-              () => h('div', {}, translate('jump'))
-            );
-          }
-        }
-      ],
-      data5: [],
-      data6: [
-        {
-          name: 'Tom',
-          sex: translate('man'),
-          record: translate('primary'),
-          age: 10
-        },
-        {
-          name: 'Lucy',
-          sex: translate('woman'),
-          record: translate('undergraduate'),
-          age: 30
-        },
-        {
-          name: 'Jack',
-          sex: translate('man'),
-          record: translate('high'),
-          age: 4
-        }
-      ],
-      timer: null as number | null,
-      summary: () => {
-        return {
-          value: translate('summary'),
-          colspan: 5
-        };
+initTranslate();
+const state = reactive({
+  bordered1: false,
+  striped: true,
+  columns1: [
+    {
+      title: translate('name'),
+      key: 'name',
+      stylehead: 'font-size:20px;color:red;font-weight:bolder;',
+      stylecolumn: 'font-size:10px;'
+    },
+    {
+      title: translate('sex'),
+      key: 'sex',
+      stylecolumn: 'font-size:20px;',
+      render: ({ sex }: any) => {
+        return h(
+          'span',
+          {
+            style: {
+              color: sex === translate('woman') ? 'blue' : 'green'
+            }
+          },
+          sex
+        );
       }
-    });
-
-    const handleSorter = (item: TableColumnProps) => {
-      (showToast as any).text(`${JSON.stringify(item)}`);
+    },
+    {
+      title: translate('education'),
+      key: 'record'
+    }
+  ],
+  columns2: [
+    {
+      title: translate('name'),
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: translate('sex'),
+      key: 'sex'
+    },
+    {
+      title: translate('education'),
+      key: 'record'
+    }
+  ],
+  columns3: [
+    {
+      title: translate('name'),
+      key: 'name'
+    },
+    {
+      title: translate('sex'),
+      key: 'sex'
+    },
+    {
+      title: translate('education'),
+      key: 'record'
+    },
+    {
+      title: translate('age'),
+      key: 'age'
+    },
+    {
+      title: translate('address'),
+      key: 'address'
+    }
+  ],
+  columns4: [
+    {
+      title: translate('name'),
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: translate('sex'),
+      key: 'sex'
+    },
+    {
+      title: translate('education'),
+      key: 'record'
+    },
+    {
+      title: translate('oper'),
+      key: 'render'
+    }
+  ],
+  columns6: [
+    {
+      title: translate('name'),
+      key: 'name',
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: translate('sex'),
+      key: 'sex'
+    },
+    {
+      title: translate('education'),
+      key: 'record'
+    },
+    {
+      title: translate('age'),
+      key: 'age',
+      sorter: (row1: any, row2: any) => {
+        return row1.age - row2.age;
+      }
+    }
+  ],
+  data1: [
+    {
+      sex: translate('man'),
+      name: 'Tom',
+      record: translate('primary')
+    },
+    {
+      name: 'Lucy',
+      sex: translate('woman'),
+      record: translate('undergraduate')
+    },
+    {
+      name: 'Jack',
+      sex: translate('man'),
+      record: translate('high')
+    }
+  ],
+  data2: [
+    {
+      address: translate('beijing'),
+      name: 'Tom',
+      sex: translate('man'),
+      record: translate('primary'),
+      age: 13
+    },
+    {
+      record: translate('undergraduate'),
+      name: 'Lucy',
+      sex: translate('woman'),
+      age: 34,
+      address: translate('shanghai')
+    },
+    {
+      age: 4,
+      name: 'Jack',
+      sex: translate('man'),
+      record: translate('high'),
+      address: translate('hangzhou')
+    }
+  ],
+  data3: [],
+  data4: [
+    {
+      name: 'Tom',
+      sex: translate('man'),
+      record: translate('primary'),
+      render: () => {
+        return h(
+          Button,
+          {
+            onClick: () => {
+              (showToast as any).text('hello');
+            },
+            size: 'small',
+            type: 'primary'
+          },
+          () => h('div', {}, 'Hello')
+        );
+      }
+    },
+    {
+      name: 'Lucy',
+      sex: translate('woman'),
+      record: translate('undergraduate'),
+      render: () => {
+        return h(Dongdong, { width: '14px', height: '14px' });
+      }
+    },
+    {
+      name: 'Jack',
+      sex: translate('man'),
+      record: translate('high'),
+      render: () => {
+        return h(
+          Button,
+          {
+            type: 'success',
+            size: 'small',
+            onClick: () => {
+              window.open('https://www.jd.com');
+            }
+          },
+          () => h('div', {}, translate('jump'))
+        );
+      }
+    }
+  ],
+  data5: [],
+  data6: [
+    {
+      name: 'Tom',
+      sex: translate('man'),
+      record: translate('primary'),
+      age: 10
+    },
+    {
+      name: 'Lucy',
+      sex: translate('woman'),
+      record: translate('undergraduate'),
+      age: 30
+    },
+    {
+      name: 'Jack',
+      sex: translate('man'),
+      record: translate('high'),
+      age: 4
+    }
+  ],
+  timer: null as number | null,
+  summary: () => {
+    return {
+      value: translate('summary'),
+      colspan: 5
     };
+  }
+});
 
-    onMounted(() => {
-      state.timer = setTimeout(() => {
-        state.data5 = state.data2.slice() as any;
-      }, 5000) as any;
-    });
+const handleSorter = (item: TableColumnProps) => {
+  (showToast as any).text(`${JSON.stringify(item)}`);
+};
 
-    onUnmounted(() => {
-      state.timer = null;
-    });
+onMounted(() => {
+  state.timer = setTimeout(() => {
+    state.data5 = state.data2.slice() as any;
+  }, 5000) as any;
+});
 
-    return {
-      ...toRefs(state),
-      handleSorter,
-      translate
-    };
-  }
+onUnmounted(() => {
+  state.timer = null;
 });
 </script>
 
diff --git a/src/packages/__VUE/table/doc.en-US.md b/src/packages/__VUE/table/doc.en-US.md
index 1963b5321a..bfb443fd76 100644
--- a/src/packages/__VUE/table/doc.en-US.md
+++ b/src/packages/__VUE/table/doc.en-US.md
@@ -6,7 +6,7 @@ Used to display the basic table
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Table } from '@nutui/nutui';
 
@@ -18,66 +18,58 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, h } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: 'name',
-            key: 'name',
-            stylehead: 'font-size:20px;color:red;font-weight:bolder;',
-            stylecolumn: 'font-size:10px;color:blue;'
-          },
-          {
-            title: 'sex',
-            key: 'sex',
-            render: (record) => {
-              return h(
-                'span',
-                {
-                  style: {
-                    color: record.sex === 'woman' ? 'blue' : 'green'
-                  }
-                },
-                record.sex
-              );
+<script setup>
+import { reactive, h } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: 'name',
+      key: 'name',
+      stylehead: 'font-size:20px;color:red;font-weight:bolder;',
+      stylecolumn: 'font-size:10px;color:blue;'
+    },
+    {
+      title: 'sex',
+      key: 'sex',
+      render: (record) => {
+        return h(
+          'span',
+          {
+            style: {
+              color: record.sex === 'woman' ? 'blue' : 'green'
             }
           },
-          {
-            title: 'education',
-            key: 'record'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: 'man',
-            record: 'primary school'
-          },
-          {
-            name: 'Lucy',
-            sex: 'woman',
-            record: 'undergraduate'
-          },
-          {
-            name: 'Jack',
-            sex: 'man',
-            record: 'high school'
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+          record.sex
+        );
+      }
+    },
+    {
+      title: 'education',
+      key: 'record'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: 'man',
+      record: 'primary school'
+    },
+    {
+      name: 'Lucy',
+      sex: 'woman',
+      record: 'undergraduate'
+    },
+    {
+      name: 'Jack',
+      sex: 'man',
+      record: 'high school'
     }
-  };
+  ]
+});
 </script>
 ```
 
@@ -87,55 +79,47 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data" :bordered="bordered"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data" :bordered="state.bordered"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        bordered: false,
-        columns: [
-          {
-            title: 'name',
-            key: 'name',
-            align: 'center'
-          },
-          {
-            title: 'sex',
-            key: 'sex'
-          },
-          {
-            title: 'education',
-            key: 'record'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: 'man',
-            record: 'primary school'
-          },
-          {
-            name: 'Lucy',
-            sex: 'woman',
-            record: 'undergraduate'
-          },
-          {
-            name: 'Jack',
-            sex: 'man',
-            record: 'high school'
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  bordered: false,
+  columns: [
+    {
+      title: 'name',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: 'sex',
+      key: 'sex'
+    },
+    {
+      title: 'education',
+      key: 'record'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: 'man',
+      record: 'primary school'
+    },
+    {
+      name: 'Lucy',
+      sex: 'woman',
+      record: 'undergraduate'
+    },
+    {
+      name: 'Jack',
+      sex: 'man',
+      record: 'high school'
     }
-  };
+  ]
+});
 </script>
 ```
 
@@ -145,73 +129,65 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data" :summary="summary"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data" :summary="state.summary"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: 'name',
-            key: 'name'
-          },
-          {
-            title: 'sex',
-            key: 'sex'
-          },
-          {
-            title: 'education',
-            key: 'record'
-          },
-          {
-            title: 'age',
-            key: 'age'
-          },
-          {
-            title: 'address',
-            key: 'address'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: 'man',
-            record: 'primary school',
-            age: 13,
-            address: 'beijing'
-          },
-          {
-            name: 'Lucy',
-            sex: 'woman',
-            record: 'undergraduate',
-            age: 34,
-            address: 'shanghai'
-          },
-          {
-            name: 'Jack',
-            sex: 'man',
-            record: 'high school',
-            age: 4,
-            address: 'hangzhou'
-          }
-        ],
-        summary: () => {
-          return {
-            value: 'This is the summary column',
-            colspan: 5
-          };
-        }
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: 'name',
+      key: 'name'
+    },
+    {
+      title: 'sex',
+      key: 'sex'
+    },
+    {
+      title: 'education',
+      key: 'record'
+    },
+    {
+      title: 'age',
+      key: 'age'
+    },
+    {
+      title: 'address',
+      key: 'address'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: 'man',
+      record: 'primary school',
+      age: 13,
+      address: 'beijing'
+    },
+    {
+      name: 'Lucy',
+      sex: 'woman',
+      record: 'undergraduate',
+      age: 34,
+      address: 'shanghai'
+    },
+    {
+      name: 'Jack',
+      sex: 'man',
+      record: 'high school',
+      age: 4,
+      address: 'hangzhou'
     }
-  };
+  ],
+  summary: () => {
+    return {
+      value: 'This is the summary column',
+      colspan: 5
+    };
+  }
+});
 </script>
 ```
 
@@ -221,68 +197,60 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns3" :data="data2" :striped="striped"></nut-table>
+  <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        striped: true,
-        columns3: [
-          {
-            title: 'name',
-            key: 'name'
-          },
-          {
-            title: 'sex',
-            key: 'sex'
-          },
-          {
-            title: 'education',
-            key: 'record'
-          },
-          {
-            title: 'age',
-            key: 'age'
-          },
-          {
-            title: 'address',
-            key: 'address'
-          }
-        ],
-        data2: [
-          {
-            name: 'Tom',
-            sex: 'man',
-            record: 'primary school',
-            age: 13,
-            address: 'beijing'
-          },
-          {
-            name: 'Lucy',
-            sex: 'woman',
-            record: 'undergraduate',
-            age: 34,
-            address: 'shanghai'
-          },
-          {
-            name: 'Jack',
-            sex: 'man',
-            record: 'high school',
-            age: 4,
-            address: 'hangzhou'
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  striped: true,
+  columns3: [
+    {
+      title: 'name',
+      key: 'name'
+    },
+    {
+      title: 'sex',
+      key: 'sex'
+    },
+    {
+      title: 'education',
+      key: 'record'
+    },
+    {
+      title: 'age',
+      key: 'age'
+    },
+    {
+      title: 'address',
+      key: 'address'
     }
-  };
+  ],
+  data2: [
+    {
+      name: 'Tom',
+      sex: 'man',
+      record: 'primary school',
+      age: 13,
+      address: 'beijing'
+    },
+    {
+      name: 'Lucy',
+      sex: 'woman',
+      record: 'undergraduate',
+      age: 34,
+      address: 'shanghai'
+    },
+    {
+      name: 'Jack',
+      sex: 'man',
+      record: 'high school',
+      age: 4,
+      address: 'hangzhou'
+    }
+  ]
+});
 </script>
 ```
 
@@ -292,72 +260,65 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data"></nut-table>
-  <nut-table :columns="columns3" :data="data3">
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
+  <nut-table :columns="state.columns3" :data="state.data3">
     <template #nodata>
       <div class="no-data"> Here is the custom display </div>
     </template>
   </nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: 'name',
-            key: 'name'
-          },
-          {
-            title: 'sex',
-            key: 'sex'
-          },
-          {
-            title: 'education',
-            key: 'record'
-          },
-          {
-            title: 'age',
-            key: 'age'
-          },
-          {
-            title: 'address',
-            key: 'address'
-          }
-        ],
-        data: [],
-        columns3: [
-          {
-            title: 'name',
-            key: 'name'
-          },
-          {
-            title: 'sex',
-            key: 'sex'
-          },
-          {
-            title: 'education',
-            key: 'record'
-          },
-          {
-            title: 'age',
-            key: 'age'
-          },
-          {
-            title: 'address',
-            key: 'address'
-          }
-        ],
-        data3: []
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: 'name',
+      key: 'name'
+    },
+    {
+      title: 'sex',
+      key: 'sex'
+    },
+    {
+      title: 'education',
+      key: 'record'
+    },
+    {
+      title: 'age',
+      key: 'age'
+    },
+    {
+      title: 'address',
+      key: 'address'
     }
-  };
+  ],
+  data: [],
+  columns3: [
+    {
+      title: 'name',
+      key: 'name'
+    },
+    {
+      title: 'sex',
+      key: 'sex'
+    },
+    {
+      title: 'education',
+      key: 'record'
+    },
+    {
+      title: 'age',
+      key: 'age'
+    },
+    {
+      title: 'address',
+      key: 'address'
+    }
+  ],
+  data3: []
+});
 </script>
 ```
 
@@ -367,88 +328,81 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, h } from 'vue';
-  import { Button } from '@nutui/nutui';
-  import { Dongdong } from '@nutui/icons-vue';
-  export default {
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: 'name',
-            key: 'name',
-            align: 'center'
-          },
-          {
-            title: 'sex',
-            key: 'sex'
-          },
-          {
-            title: 'education',
-            key: 'record'
-          },
-          {
-            title: 'operation',
-            key: 'render'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: 'man',
-            record: 'primary school',
-            render: () => {
-              return h(
-                Button,
-                {
-                  onClick: () => {
-                    showToast.text('hello');
-                  },
-                  size: 'small',
-                  type: 'primary'
-                },
-                'Hello'
-              );
-            }
-          },
-          {
-            name: 'Lucy',
-            sex: 'woman',
-            record: 'undergraduate',
-            render: () => {
-              return h(Dongdong, { width: '14px', height: '14px' });
+<script setup>
+import { reactive, h } from 'vue';
+import { Button, showToast } from '@nutui/nutui';
+import { Dongdong } from '@nutui/icons-vue';
+const state = reactive({
+  columns: [
+    {
+      title: 'name',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: 'sex',
+      key: 'sex'
+    },
+    {
+      title: 'education',
+      key: 'record'
+    },
+    {
+      title: 'operation',
+      key: 'render'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: 'man',
+      record: 'primary school',
+      render: () => {
+        return h(
+          Button,
+          {
+            onClick: () => {
+              showToast.text('hello');
+            },
+            size: 'small',
+            type: 'primary'
+          },
+          'Hello'
+        );
+      }
+    },
+    {
+      name: 'Lucy',
+      sex: 'woman',
+      record: 'undergraduate',
+      render: () => {
+        return h(Dongdong, { width: '14px', height: '14px' });
+      }
+    },
+    {
+      name: 'Jack',
+      sex: 'man',
+      record: 'high school',
+      render: () => {
+        return h(
+          Button,
+          {
+            type: 'success',
+            size: 'small',
+            onClick: () => {
+              window.open('https://www.jd.com');
             }
           },
-          {
-            name: 'Jack',
-            sex: 'man',
-            record: 'high school',
-            render: () => {
-              return h(
-                Button,
-                {
-                  type: 'success',
-                  size: 'small',
-                  onClick: () => {
-                    window.open('https://www.jd.com');
-                  }
-                },
-                'Jump to Jingdong'
-              );
-            }
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+          'Jump to Jingdong'
+        );
+      }
     }
-  };
+  ]
+});
 </script>
 ```
 
@@ -458,74 +412,66 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
   <h2>Support asynchronous rendering(See the effect after 5S)</h2>
-  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: 'name',
-            key: 'name'
-          },
-          {
-            title: 'sex',
-            key: 'sex'
-          },
-          {
-            title: 'education',
-            key: 'record'
-          },
-          {
-            title: 'age',
-            key: 'age'
-          },
-          {
-            title: 'address',
-            key: 'address'
-          }
-        ],
-        data: [],
-        data1: [
-          {
-            address: 'beijing',
-            name: 'Tom',
-            sex: 'man',
-            record: 'primary school',
-            age: 13
-          },
-          {
-            record: 'undergraduate',
-            name: 'Lucy',
-            sex: 'woman',
-            age: 34,
-            address: 'shanghai'
-          },
-          {
-            name: 'Jack',
-            sex: 'man',
-            record: 'high school',
-            age: 4,
-            address: 'hangzhou'
-          }
-        ]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          state.data = state.data1.slice();
-        }, 5000);
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: 'name',
+      key: 'name'
+    },
+    {
+      title: 'sex',
+      key: 'sex'
+    },
+    {
+      title: 'education',
+      key: 'record'
+    },
+    {
+      title: 'age',
+      key: 'age'
+    },
+    {
+      title: 'address',
+      key: 'address'
+    }
+  ],
+  data: [],
+  data1: [
+    {
+      address: 'beijing',
+      name: 'Tom',
+      sex: 'man',
+      record: 'primary school',
+      age: 13
+    },
+    {
+      record: 'undergraduate',
+      name: 'Lucy',
+      sex: 'woman',
+      age: 34,
+      address: 'shanghai'
+    },
+    {
+      name: 'Jack',
+      sex: 'man',
+      record: 'high school',
+      age: 4,
+      address: 'hangzhou'
     }
-  };
+  ]
+});
+onMounted(() => {
+  setTimeout(() => {
+    state.data = state.data1.slice();
+  }, 5000);
+});
 </script>
 ```
 
@@ -535,72 +481,62 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data" @sorter="handleSorter"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data" @sorter="handleSorter"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: 'name',
-            key: 'name',
-            align: 'center',
-            sorter: true
-          },
-          {
-            title: 'sex',
-            key: 'sex'
-          },
-          {
-            title: 'education',
-            key: 'record'
-          },
-          {
-            title: 'age',
-            key: 'age',
-            sorter: (row1: any, row2: any) => {
-              return row1.age - row2.age;
-            }
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: 'man',
-            record: 'primary school',
-            age: 10
-          },
-          {
-            name: 'Lucy',
-            sex: 'woman',
-            record: 'undergraduate',
-            age: 30
-          },
-          {
-            name: 'Jack',
-            sex: 'man',
-            record: 'high school',
-            age: 4
-          }
-        ]
-      });
-
-      const handleSorter = (item: TableColumnProps) => {
-        showToast.text(`${JSON.stringify(item)}`);
-      };
-
-      return {
-        ...toRefs(state),
-        handleSorter
-      };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  columns: [
+    {
+      title: 'name',
+      key: 'name',
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: 'sex',
+      key: 'sex'
+    },
+    {
+      title: 'education',
+      key: 'record'
+    },
+    {
+      title: 'age',
+      key: 'age',
+      sorter: (row1, row2) => {
+        return row1.age - row2.age;
+      }
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: 'man',
+      record: 'primary school',
+      age: 10
+    },
+    {
+      name: 'Lucy',
+      sex: 'woman',
+      record: 'undergraduate',
+      age: 30
+    },
+    {
+      name: 'Jack',
+      sex: 'man',
+      record: 'high school',
+      age: 4
     }
-  };
+  ]
+});
+
+const handleSorter = (item) => {
+  showToast.text(`${JSON.stringify(item)}`);
+};
 </script>
 ```
 
@@ -610,30 +546,30 @@ app.use(Table);
 
 ### Props
 
-| Attribute | Description                                  | Type               | Default |
-| --------- | -------------------------------------------- | ------------------ | ------- |
-| bordered  | Show border                                  | boolean            | `true`  |
-| columns   | Header data                                  | TableColumnProps[] | `[]`    |
-| data      | Table data                                   | object[]           | `[]`    |
-| summary   | Show profile                                 | Function           | -       |
-| striped   | Whether the stripes alternate light and dark | boolean            | `false` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| bordered | Show border | boolean | `true` |
+| columns | Header data | TableColumnProps[] | `[]` |
+| data | Table data | object[] | `[]` |
+| summary | Show profile | Function | - |
+| striped | Whether the stripes alternate light and dark | boolean | `false` |
 
 ### TableColumnProps
 
-| Attribute   | Description                                                                                                                                                                                                                                             | Type                          | Default |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------- |
-| key         | Unique identification of the column                                                                                                                                                                                                                     | string                        | ``      |
-| title       | Header title                                                                                                                                                                                                                                            | string                        | ``      |
-| stylehead   | Header style                                                                                                                                                                                                                                            | string                        | ``      |
-| stylecolumn | Column style                                                                                                                                                                                                                                            | string                        | ``      |
-| align       | Alignment of columns, optional values`left`,`center`,`right`                                                                                                                                                                                            | string                        | `left`  |
-| sorter      | sort，optional values `true`,`function`, `default`, Where `default` means that you may depend on the interface after clicking, `function` you can return a specific sorting function, `default` indicates that the default sorting algorithm is adopted | boolean \| Function \| string | -       |
-| render      | Custom render column data, high priority                                                                                                                                                                                                                | Function(record)              | -       |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| key | Unique identification of the column | string | `` |
+| title | Header title | string | `` |
+| stylehead | Header style | string | `` |
+| stylecolumn | Column style | string | `` |
+| align | Alignment of columns, optional values`left`,`center`,`right` | string | `left` |
+| sorter | sort，optional values `true`,`function`, `default`, Where `default` means that you may depend on the interface after clicking, `function` you can return a specific sorting function, `default` indicates that the default sorting algorithm is adopted | boolean \| Function \| string | - |
+| render | Custom render column data, high priority | Function(record) | - |
 
 ### Events
 
-| Event  | Description                      | Arguments                                  |
-| ------ | -------------------------------- | ------------------------------------------ |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | sorter | Click the sort button to trigger | item: Data of the currently clicked header |
 
 ## Theming
@@ -642,9 +578,9 @@ app.use(Table);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                         | Default Value      | Description |
-| ---------------------------- | ------------------ | ----------- |
-| --nut-table-border-color     | _#ececec_          | -           |
-| --nut-table-cols-padding     | _10px_             | -           |
-| --nut-table-tr-even-bg-color | _#f3f3f3_          | -           |
-| --nut-table-tr-odd-bg-color  | _var(--nut-white)_ | -           |
+| Name | Default Value | Description |
+| --- | --- | --- |
+| --nut-table-border-color | _#ececec_ | - |
+| --nut-table-cols-padding | _10px_ | - |
+| --nut-table-tr-even-bg-color | _#f3f3f3_ | - |
+| --nut-table-tr-odd-bg-color | _var(--nut-white)_ | - |
diff --git a/src/packages/__VUE/table/doc.md b/src/packages/__VUE/table/doc.md
index db50e0f135..82ef3284b7 100644
--- a/src/packages/__VUE/table/doc.md
+++ b/src/packages/__VUE/table/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Table } from '@nutui/nutui';
 
@@ -18,66 +18,58 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, h } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name',
-            stylehead: 'font-size:20px;color:red;font-weight:bolder;',
-            stylecolumn: 'font-size:10px;color:blue;'
-          },
-          {
-            title: '性别',
-            key: 'sex',
-            render: (record) => {
-              return h(
-                'span',
-                {
-                  style: {
-                    color: record.sex === '女' ? 'blue' : 'green'
-                  }
-                },
-                record.sex
-              );
+<script setup>
+import { reactive, h } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name',
+      stylehead: 'font-size:20px;color:red;font-weight:bolder;',
+      stylecolumn: 'font-size:10px;color:blue;'
+    },
+    {
+      title: '性别',
+      key: 'sex',
+      render: (record) => {
+        return h(
+          'span',
+          {
+            style: {
+              color: record.sex === '女' ? 'blue' : 'green'
             }
           },
-          {
-            title: '学历',
-            key: 'record'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学'
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中'
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+          record.sex
+        );
+      }
+    },
+    {
+      title: '学历',
+      key: 'record'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中'
     }
-  };
+  ]
+});
 </script>
 ```
 
@@ -87,55 +79,47 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data" :bordered="bordered"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data" :bordered="state.bordered"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        bordered: false,
-        columns: [
-          {
-            title: '姓名',
-            key: 'name',
-            align: 'center'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学'
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中'
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  bordered: false,
+  columns: [
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中'
     }
-  };
+  ]
+});
 </script>
 ```
 
@@ -145,73 +129,65 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data" :summary="summary"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data" :summary="state.summary"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            age: 13,
-            address: '北京'
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科',
-            age: 34,
-            address: '上海'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            age: 4,
-            address: '杭州'
-          }
-        ],
-        summary: () => {
-          return {
-            value: '这是总结栏',
-            colspan: 5
-          };
-        }
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 13,
+      address: '北京'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      age: 34,
+      address: '上海'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4,
+      address: '杭州'
     }
-  };
+  ],
+  summary: () => {
+    return {
+      value: '这是总结栏',
+      colspan: 5
+    };
+  }
+});
 </script>
 ```
 
@@ -221,68 +197,60 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns3" :data="data2" :striped="striped"></nut-table>
+  <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        striped: true,
-        columns3: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data2: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            age: 13,
-            address: '北京'
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科',
-            age: 34,
-            address: '上海'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            age: 4,
-            address: '杭州'
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  striped: true,
+  columns3: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
     }
-  };
+  ],
+  data2: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 13,
+      address: '北京'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      age: 34,
+      address: '上海'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4,
+      address: '杭州'
+    }
+  ]
+});
 </script>
 ```
 
@@ -292,72 +260,65 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data"></nut-table>
-  <nut-table :columns="columns3" :data="data3">
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
+  <nut-table :columns="state.columns3" :data="state.data3">
     <template #nodata>
       <div class="no-data"> 这里是自定义展示 </div>
     </template>
   </nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data: [],
-        columns3: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data3: []
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
     }
-  };
+  ],
+  data: [],
+  columns3: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
+    }
+  ],
+  data3: []
+});
 </script>
 ```
 
@@ -367,88 +328,81 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, h } from 'vue';
-  import { Button } from '@nutui/nutui';
-  import { Dongdong } from '@nutui/icons-vue';
-  export default {
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name',
-            align: 'center'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '操作',
-            key: 'render'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            render: () => {
-              return h(
-                Button,
-                {
-                  onClick: () => {
-                    showToast.text('hello');
-                  },
-                  size: 'small',
-                  type: 'primary'
-                },
-                () => 'Hello'
-              );
-            }
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科',
-            render: () => {
-              return h(Dongdong, { width: '14px', height: '14px ' });
+<script setup>
+import { reactive, h } from 'vue';
+import { Button, showToast } from '@nutui/nutui';
+import { Dongdong } from '@nutui/icons-vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '操作',
+      key: 'render'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      render: () => {
+        return h(
+          Button,
+          {
+            onClick: () => {
+              showToast.text('hello');
+            },
+            size: 'small',
+            type: 'primary'
+          },
+          () => 'Hello'
+        );
+      }
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      render: () => {
+        return h(Dongdong, { width: '14px', height: '14px ' });
+      }
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      render: () => {
+        return h(
+          Button,
+          {
+            type: 'success',
+            size: 'small',
+            onClick: () => {
+              window.open('https://www.jd.com');
             }
           },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            render: () => {
-              return h(
-                Button,
-                {
-                  type: 'success',
-                  size: 'small',
-                  onClick: () => {
-                    window.open('https://www.jd.com');
-                  }
-                },
-                () => '跳转到京东'
-              );
-            }
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+          () => '跳转到京东'
+        );
+      }
     }
-  };
+  ]
+});
 </script>
 ```
 
@@ -458,74 +412,66 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
   <h2>支持异步渲染(5s之后看效果)</h2>
-  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data: [],
-        data1: [
-          {
-            address: '北京',
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            age: 13
-          },
-          {
-            record: '本科',
-            name: 'Lucy',
-            sex: '女',
-            age: 34,
-            address: '上海'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            age: 4,
-            address: '杭州'
-          }
-        ]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          state.data = state.data1.slice();
-        }, 5000);
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
+    }
+  ],
+  data: [],
+  data1: [
+    {
+      address: '北京',
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 13
+    },
+    {
+      record: '本科',
+      name: 'Lucy',
+      sex: '女',
+      age: 34,
+      address: '上海'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4,
+      address: '杭州'
     }
-  };
+  ]
+});
+onMounted(() => {
+  setTimeout(() => {
+    state.data = state.data1.slice();
+  }, 5000);
+});
 </script>
 ```
 
@@ -535,72 +481,62 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data" @sorter="handleSorter"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data" @sorter="handleSorter"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name',
-            align: 'center',
-            sorter: true
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age',
-            sorter: (row1: any, row2: any) => {
-              return row1.age - row2.age;
-            }
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            age: 10
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科',
-            age: 30
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            age: 4
-          }
-        ]
-      });
-
-      const handleSorter = (item: TableColumnProps) => {
-        showToast.text(`${JSON.stringify(item)}`);
-      };
-
-      return {
-        ...toRefs(state),
-        handleSorter
-      };
+<script setup>
+import { reactive } from 'vue';
+import { showToast } from '@nutui/nutui';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age',
+      sorter: (row1, row2) => {
+        return row1.age - row2.age;
+      }
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 10
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      age: 30
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4
     }
-  };
+  ]
+});
+
+const handleSorter = (item) => {
+  showToast.text(`${JSON.stringify(item)}`);
+};
 </script>
 ```
 
@@ -610,30 +546,30 @@ app.use(Table);
 
 ### Props
 
-| 参数     | 说明             | 类型               | 默认值  |
-| -------- | ---------------- | ------------------ | ------- |
-| bordered | 是否显示边框     | boolean            | `true`  |
-| columns  | 表头数据         | TableColumnProps[] | `[]`    |
-| data     | 表格数据         | object[]           | `[]`    |
-| summary  | 是否显示简介     | Function           | -       |
-| striped  | 条纹是否明暗交替 | boolean            | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| bordered | 是否显示边框 | boolean | `true` |
+| columns | 表头数据 | TableColumnProps[] | `[]` |
+| data | 表格数据 | object[] | `[]` |
+| summary | 是否显示简介 | Function | - |
+| striped | 条纹是否明暗交替 | boolean | `false` |
 
 ### TableColumnProps
 
-| 参数        | 说明                                                                                                                                                     | 类型                          | 默认值 |
-| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------ |
-| key         | 列的唯一标识                                                                                                                                             | string                        | ``     |
-| title       | 表头标题                                                                                                                                                 | string                        | ``     |
-| stylehead   | 表头样式                                                                                                                                                 | string                        | ``     |
-| stylecolumn | 列样式                                                                                                                                                   | string                        | ``     |
-| align       | 列的对齐方式，可选值`left`,`center`,`right`                                                                                                              | string                        | `left` |
-| sorter      | 排序，可选值有 `true`,`function`, `default`, 其中 `default`表示点击之后可能会依赖接口, `function`可以返回具体的排序函数, `default`表示采用默认的排序算法 | boolean \| Function \| string | -      |
-| render      | 自定义渲染列数据，优先级高                                                                                                                               | Function(record)              | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| key | 列的唯一标识 | string | `` |
+| title | 表头标题 | string | `` |
+| stylehead | 表头样式 | string | `` |
+| stylecolumn | 列样式 | string | `` |
+| align | 列的对齐方式，可选值`left`,`center`,`right` | string | `left` |
+| sorter | 排序，可选值有 `true`,`function`, `default`, 其中 `default`表示点击之后可能会依赖接口, `function`可以返回具体的排序函数, `default`表示采用默认的排序算法 | boolean \| Function \| string | - |
+| render | 自定义渲染列数据，优先级高 | Function(record) | - |
 
 ### Events
 
-| 事件名 | 说明             | 回调参数                   |
-| ------ | ---------------- | -------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | sorter | 点击排序按钮触发 | item: 当前点击的表头的数据 |
 
 ## 主题定制
@@ -642,9 +578,9 @@ app.use(Table);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                         | 默认值             |
-| ---------------------------- | ------------------ |
-| --nut-table-border-color     | _#ececec_          |
-| --nut-table-cols-padding     | _10px_             |
-| --nut-table-tr-even-bg-color | _#f3f3f3_          |
-| --nut-table-tr-odd-bg-color  | _var(--nut-white)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-table-border-color | _#ececec_ |
+| --nut-table-cols-padding | _10px_ |
+| --nut-table-tr-even-bg-color | _#f3f3f3_ |
+| --nut-table-tr-odd-bg-color | _var(--nut-white)_ |
diff --git a/src/packages/__VUE/table/doc.taro.md b/src/packages/__VUE/table/doc.taro.md
index 468c05dbd5..0effea9113 100644
--- a/src/packages/__VUE/table/doc.taro.md
+++ b/src/packages/__VUE/table/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Table } from '@nutui/nutui-taro';
 
@@ -18,66 +18,58 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, h } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name',
-            stylehead: 'font-size:20px;color:red;font-weight:bolder;',
-            stylecolumn: 'font-size:10px;color:blue;'
-          },
-          {
-            title: '性别',
-            key: 'sex',
-            render: (record) => {
-              return h(
-                'span',
-                {
-                  style: {
-                    color: record.sex === '女' ? 'blue' : 'green'
-                  }
-                },
-                record.sex
-              );
+<script setup>
+import { reactive, h } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name',
+      stylehead: 'font-size:20px;color:red;font-weight:bolder;',
+      stylecolumn: 'font-size:10px;color:blue;'
+    },
+    {
+      title: '性别',
+      key: 'sex',
+      render: (record) => {
+        return h(
+          'span',
+          {
+            style: {
+              color: record.sex === '女' ? 'blue' : 'green'
             }
           },
-          {
-            title: '学历',
-            key: 'record'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学'
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中'
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+          record.sex
+        );
+      }
+    },
+    {
+      title: '学历',
+      key: 'record'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中'
     }
-  };
+  ]
+});
 </script>
 ```
 
@@ -87,55 +79,47 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data" :bordered="bordered"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data" :bordered="state.bordered"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        bordered: false,
-        columns: [
-          {
-            title: '姓名',
-            key: 'name',
-            align: 'center'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学'
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中'
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  bordered: false,
+  columns: [
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中'
     }
-  };
+  ]
+});
 </script>
 ```
 
@@ -145,73 +129,65 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data" :summary="summary"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data" :summary="state.summary"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            age: 13,
-            address: '北京'
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科',
-            age: 34,
-            address: '上海'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            age: 4,
-            address: '杭州'
-          }
-        ],
-        summary: () => {
-          return {
-            value: '这是总结栏',
-            colspan: 5
-          };
-        }
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 13,
+      address: '北京'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      age: 34,
+      address: '上海'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4,
+      address: '杭州'
     }
-  };
+  ],
+  summary: () => {
+    return {
+      value: '这是总结栏',
+      colspan: 5
+    };
+  }
+});
 </script>
 ```
 
@@ -221,68 +197,60 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns3" :data="data2" :striped="striped"></nut-table>
+  <nut-table :columns="state.columns3" :data="state.data2" :striped="state.striped"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        striped: true,
-        columns3: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data2: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            age: 13,
-            address: '北京'
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科',
-            age: 34,
-            address: '上海'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            age: 4,
-            address: '杭州'
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  striped: true,
+  columns3: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
     }
-  };
+  ],
+  data2: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 13,
+      address: '北京'
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      age: 34,
+      address: '上海'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4,
+      address: '杭州'
+    }
+  ]
+});
 </script>
 ```
 
@@ -292,72 +260,65 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data"></nut-table>
-  <nut-table :columns="columns3" :data="data3">
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
+  <nut-table :columns="state.columns3" :data="state.data3">
     <template #nodata>
       <div class="no-data"> 这里是自定义展示 </div>
     </template>
   </nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data: [],
-        columns3: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data3: []
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
     }
-  };
+  ],
+  data: [],
+  columns3: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
+    }
+  ],
+  data3: []
+});
 </script>
 ```
 
@@ -367,88 +328,81 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, h } from 'vue';
-  import { Button } from '@nutui/nutui-taro';
-  import { Dongdong } from '@nutui/icons-vue-taro';
-  export default {
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name',
-            align: 'center'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '操作',
-            key: 'render'
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            render: () => {
-              return h(
-                Button,
-                {
-                  onClick: () => {
-                    console.log('hello');
-                  },
-                  size: 'small',
-                  type: 'primary'
-                },
-                () => 'Hello'
-              );
-            }
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科',
-            render: () => {
-              return h(Dongdong, { width: '14px', height: '14px ' });
+<script setup>
+import { reactive, h } from 'vue';
+import { Button } from '@nutui/nutui-taro';
+import { Dongdong } from '@nutui/icons-vue-taro';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '操作',
+      key: 'render'
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      render: () => {
+        return h(
+          Button,
+          {
+            onClick: () => {
+              showToast.text('hello');
+            },
+            size: 'small',
+            type: 'primary'
+          },
+          () => 'Hello'
+        );
+      }
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      render: () => {
+        return h(Dongdong, { width: '14px', height: '14px ' });
+      }
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      render: () => {
+        return h(
+          Button,
+          {
+            type: 'success',
+            size: 'small',
+            onClick: () => {
+              window.open('https://www.jd.com');
             }
           },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            render: () => {
-              return h(
-                Button,
-                {
-                  type: 'success',
-                  size: 'small',
-                  onClick: () => {
-                    window.open('https://www.jd.com');
-                  }
-                },
-                () => '跳转到京东'
-              );
-            }
-          }
-        ]
-      });
-      return {
-        ...toRefs(state)
-      };
+          () => '跳转到京东'
+        );
+      }
     }
-  };
+  ]
+});
 </script>
 ```
 
@@ -458,74 +412,66 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
   <h2>支持异步渲染(5s之后看效果)</h2>
-  <nut-table :columns="columns" :data="data"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  export default {
-    props: {},
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name'
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age'
-          },
-          {
-            title: '地址',
-            key: 'address'
-          }
-        ],
-        data: [],
-        data1: [
-          {
-            address: '北京',
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            age: 13
-          },
-          {
-            record: '本科',
-            name: 'Lucy',
-            sex: '女',
-            age: 34,
-            address: '上海'
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            age: 4,
-            address: '杭州'
-          }
-        ]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          state.data = state.data1.slice();
-        }, 5000);
-      });
-      return {
-        ...toRefs(state)
-      };
+<script setup>
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      key: 'address'
+    }
+  ],
+  data: [],
+  data1: [
+    {
+      address: '北京',
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 13
+    },
+    {
+      record: '本科',
+      name: 'Lucy',
+      sex: '女',
+      age: 34,
+      address: '上海'
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4,
+      address: '杭州'
     }
-  };
+  ]
+});
+onMounted(() => {
+  setTimeout(() => {
+    state.data = state.data1.slice();
+  }, 5000);
+});
 </script>
 ```
 
@@ -535,70 +481,61 @@ app.use(Table);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-table :columns="columns" :data="data" @sorter="handleSorter"></nut-table>
+  <nut-table :columns="state.columns" :data="state.data" @sorter="handleSorter"></nut-table>
 </template>
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        columns: [
-          {
-            title: '姓名',
-            key: 'name',
-            align: 'center',
-            sorter: true
-          },
-          {
-            title: '性别',
-            key: 'sex'
-          },
-          {
-            title: '学历',
-            key: 'record'
-          },
-          {
-            title: '年龄',
-            key: 'age',
-            sorter: (row1: any, row2: any) => {
-              return row1.age - row2.age;
-            }
-          }
-        ],
-        data: [
-          {
-            name: 'Tom',
-            sex: '男',
-            record: '小学',
-            age: 10
-          },
-          {
-            name: 'Lucy',
-            sex: '女',
-            record: '本科',
-            age: 30
-          },
-          {
-            name: 'Jack',
-            sex: '男',
-            record: '高中',
-            age: 4
-          }
-        ]
-      });
-
-      const handleSorter = (item: TableColumnProps) => {
-        console.log(`${JSON.stringify(item)}`);
-      };
-
-      return {
-        ...toRefs(state),
-        handleSorter
-      };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  columns: [
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: '学历',
+      key: 'record'
+    },
+    {
+      title: '年龄',
+      key: 'age',
+      sorter: (row1, row2) => {
+        return row1.age - row2.age;
+      }
+    }
+  ],
+  data: [
+    {
+      name: 'Tom',
+      sex: '男',
+      record: '小学',
+      age: 10
+    },
+    {
+      name: 'Lucy',
+      sex: '女',
+      record: '本科',
+      age: 30
+    },
+    {
+      name: 'Jack',
+      sex: '男',
+      record: '高中',
+      age: 4
     }
-  };
+  ]
+});
+
+const handleSorter = (item) => {
+  console.log(`${JSON.stringify(item)}`);
+};
 </script>
 ```
 
@@ -608,30 +545,30 @@ app.use(Table);
 
 ### Props
 
-| 参数     | 说明             | 类型               | 默认值  |
-| -------- | ---------------- | ------------------ | ------- |
-| bordered | 是否显示边框     | boolean            | `true`  |
-| columns  | 表头数据         | TableColumnProps[] | `[]`    |
-| data     | 表格数据         | object[]           | `[]`    |
-| summary  | 是否显示简介     | Function           | -       |
-| striped  | 条纹是否明暗交替 | boolean            | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| bordered | 是否显示边框 | boolean | `true` |
+| columns | 表头数据 | TableColumnProps[] | `[]` |
+| data | 表格数据 | object[] | `[]` |
+| summary | 是否显示简介 | Function | - |
+| striped | 条纹是否明暗交替 | boolean | `false` |
 
 ### TableColumnProps
 
-| 参数        | 说明                                                                                                                                                     | 类型                          | 默认值 |
-| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------ |
-| key         | 列的唯一标识                                                                                                                                             | string                        | ``     |
-| title       | 表头标题                                                                                                                                                 | string                        | ``     |
-| stylehead   | 表头样式                                                                                                                                                 | string                        | ``     |
-| stylecolumn | 列样式                                                                                                                                                   | string                        | ``     |
-| align       | 列的对齐方式，可选值`left`,`center`,`right`                                                                                                              | string                        | `left` |
-| sorter      | 排序，可选值有 `true`,`function`, `default`, 其中 `default`表示点击之后可能会依赖接口, `function`可以返回具体的排序函数, `default`表示采用默认的排序算法 | boolean \| Function \| string | -      |
-| render      | 自定义渲染列数据，优先级高                                                                                                                               | Function(record)              | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| key | 列的唯一标识 | string | `` |
+| title | 表头标题 | string | `` |
+| stylehead | 表头样式 | string | `` |
+| stylecolumn | 列样式 | string | `` |
+| align | 列的对齐方式，可选值`left`,`center`,`right` | string | `left` |
+| sorter | 排序，可选值有 `true`,`function`, `default`, 其中 `default`表示点击之后可能会依赖接口, `function`可以返回具体的排序函数, `default`表示采用默认的排序算法 | boolean \| Function \| string | - |
+| render | 自定义渲染列数据，优先级高 | Function(record) | - |
 
 ### Events
 
-| 事件名 | 说明             | 回调参数                   |
-| ------ | ---------------- | -------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | sorter | 点击排序按钮触发 | item: 当前点击的表头的数据 |
 
 ## 主题定制
@@ -640,9 +577,9 @@ app.use(Table);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                         | 默认值             |
-| ---------------------------- | ------------------ |
-| --nut-table-border-color     | _#ececec_          |
-| --nut-table-cols-padding     | _10px_             |
-| --nut-table-tr-even-bg-color | _#f3f3f3_          |
-| --nut-table-tr-odd-bg-color  | _var(--nut-white)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-table-border-color | _#ececec_ |
+| --nut-table-cols-padding | _10px_ |
+| --nut-table-tr-even-bg-color | _#f3f3f3_ |
+| --nut-table-tr-odd-bg-color | _var(--nut-white)_ |
diff --git a/src/packages/__VUE/tour/demo.vue b/src/packages/__VUE/tour/demo.vue
index 886714c0b5..c75901acf8 100644
--- a/src/packages/__VUE/tour/demo.vue
+++ b/src/packages/__VUE/tour/demo.vue
@@ -4,14 +4,14 @@
 
     <nut-cell :title="translate('tryClick')">
       <template #link>
-        <nut-switch id="target7" v-model="switchValue" @click="showTour3 = true" />
+        <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
       </template>
     </nut-cell>
 
     <nut-tour
-      v-model="showTour3"
+      v-model="state.showTour3"
       class="nut-custom-tour nut-customword-tour"
-      :steps="steps3"
+      :steps="state.steps3"
       type="tile"
       location="bottom-end"
     ></nut-tour>
@@ -20,14 +20,14 @@
 
     <nut-cell :title="translate('tryClick')">
       <template #link>
-        <nut-switch id="target5" v-model="switchValue" @click="showTourHandle" />
+        <nut-switch id="target5" v-model="state.switchValue" @click="showTourHandle" />
       </template>
     </nut-cell>
 
     <nut-tour
-      v-model="showTour1"
+      v-model="state.showTour1"
       class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-      :steps="steps1"
+      :steps="state.steps1"
       location="bottom-end"
       type="tile"
       bg-color="#f00"
@@ -39,7 +39,7 @@
 
     <h2>{{ translate('title2') }}</h2>
 
-    <nut-cell :title="translate('tryClick')" @click="showTour2 = true">
+    <nut-cell :title="translate('tryClick')" @click="state.showTour2 = true">
       <template #link>
         <div class="tour-demo-img">
           <img
@@ -57,9 +57,9 @@
     </nut-cell>
 
     <nut-tour
-      v-model="showTour2"
+      v-model="state.showTour2"
       class="nut-custom-tour nut-customword-tour"
-      :steps="steps2"
+      :steps="state.steps2"
       type="tile"
       bg-color="#f00"
       theme="dark"
@@ -71,14 +71,14 @@
 
     <nut-cell :title="translate('tryClick')">
       <template #link>
-        <nut-switch id="target8" v-model="switchValue" @click="showTour4 = true" />
+        <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
       </template>
     </nut-cell>
 
     <nut-tour
-      v-model="showTour4"
+      v-model="state.showTour4"
       class="nut-custom-tour nut-customword-tour"
-      :steps="steps4"
+      :steps="state.steps4"
       type="tile"
       theme="dark"
       location="bottom-end"
@@ -88,13 +88,13 @@
       <div class="tour-demo-custom-content">
         <div>nutui 4.x 即将发布，敬请期待</div>
         <nut-divider direction="vertical" />
-        <div @click="showTour4 = false">知道了</div>
+        <div @click="state.showTour4 = false">知道了</div>
       </div>
     </nut-tour>
 
     <h2>{{ translate('title4') }}</h2>
 
-    <nut-cell :title="translate('tryClick')" @click="showTour = true"></nut-cell>
+    <nut-cell :title="translate('tryClick')" @click="state.showTour = true"></nut-cell>
 
     <nut-tabbar :bottom="true">
       <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
@@ -104,9 +104,9 @@
     </nut-tabbar>
 
     <nut-tour
-      v-model="showTour"
+      v-model="state.showTour"
       class="nut-custom-tour"
-      :steps="steps"
+      :steps="state.steps"
       location="top-start"
       :offset="[0, 0]"
       mask-width="60"
@@ -114,8 +114,8 @@
     ></nut-tour>
   </div>
 </template>
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('tour');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -139,86 +139,76 @@ const initTranslate = () =>
       tryClick: 'Try Click'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-
-    const state = reactive({
-      switchValue: false,
-      showTour: false,
-      showTour1: false,
-      showTour2: false,
-      showTour3: false,
-      showTour4: false,
-      offset: [-3, -8],
-      steps: [
-        {
-          content: '70+ 高质量组件，覆盖移动端主流场景',
-          target: 'target1'
-        },
-        {
-          content: '支持一套代码同时开发多端小程序+H5',
-          target: 'target2'
-        },
-        {
-          content: '基于京东APP 10.0 视觉规范',
-          target: 'target3',
-          location: 'top-end'
-        },
-        {
-          content: '支持定制主题，内置 700+ 个主题变量',
-          target: 'target4',
-          location: 'top-end'
-        }
-      ],
-
-      steps1: [
-        {
-          content: '70+ 高质量组件，覆盖移动端主流场景',
-          target: 'target5'
-        }
-      ],
-
-      steps2: [
-        {
-          content: '支持一套代码同时开发多端小程序+H5',
-          target: 'target6',
-          popoverOffset: [40, 12],
-          arrowOffset: -36
-        }
-      ],
-
-      steps3: [
-        {
-          content: '70+ 高质量组件，覆盖移动端主流场景',
-          target: 'target7'
-        }
-      ],
-
-      steps4: [
-        {
-          target: 'target8'
-        }
-      ],
-
-      type: 'normal'
-    });
-
-    setTimeout(() => {
-      state.showTour = true;
-    }, 100);
-
-    const showTourHandle = () => {
-      state.showTour1 = true;
-    };
-
-    return {
-      translate,
-      ...toRefs(state),
-      showTourHandle
-    };
-  }
+initTranslate();
+
+const state = reactive({
+  switchValue: false,
+  showTour: false,
+  showTour1: false,
+  showTour2: false,
+  showTour3: false,
+  showTour4: false,
+  offset: [-3, -8],
+  steps: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target1'
+    },
+    {
+      content: '支持一套代码同时开发多端小程序+H5',
+      target: 'target2'
+    },
+    {
+      content: '基于京东APP 10.0 视觉规范',
+      target: 'target3',
+      location: 'top-end'
+    },
+    {
+      content: '支持定制主题，内置 700+ 个主题变量',
+      target: 'target4',
+      location: 'top-end'
+    }
+  ],
+
+  steps1: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target5'
+    }
+  ],
+
+  steps2: [
+    {
+      content: '支持一套代码同时开发多端小程序+H5',
+      target: 'target6',
+      popoverOffset: [40, 12],
+      arrowOffset: -36
+    }
+  ],
+
+  steps3: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target7'
+    }
+  ],
+
+  steps4: [
+    {
+      target: 'target8'
+    }
+  ],
+
+  type: 'normal'
 });
+
+setTimeout(() => {
+  state.showTour = true;
+}, 100);
+
+const showTourHandle = () => {
+  state.showTour1 = true;
+};
 </script>
 <style lang="scss">
 .nut-custom-tour {
diff --git a/src/packages/__VUE/tour/doc.en-US.md b/src/packages/__VUE/tour/doc.en-US.md
index 1ef5a7ac14..963da55f27 100644
--- a/src/packages/__VUE/tour/doc.en-US.md
+++ b/src/packages/__VUE/tour/doc.en-US.md
@@ -6,7 +6,7 @@ A bubble component used to guide the user through the product's capabilities. Th
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Tour } from '@nutui/nutui';
 
@@ -20,37 +20,32 @@ At each step, set the id of the target element, and the Tour component looks up
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="try click">
     <template #link>
-      <nut-switch id="target7" v-model="switchValue" @click="showTour3 = true" />
+      <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
     </template>
   </nut-cell>
-  <nut-tour v-model="showTour3" :steps="steps3" type="tile" location="bottom-end"></nut-tour>
+  <nut-tour v-model="state.showTour3" :steps="state.steps3" type="tile" location="bottom-end"></nut-tour>
 </template>
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        switchValue: false,
-        showTour3: false,
-        steps3: [
-          {
-            content: '70+ 高质量组件，覆盖移动端主流场景',
-            target: 'target7'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  switchValue: false,
+  showTour3: false,
+  steps3: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target7'
     }
-  };
+  ]
+});
 </script>
 <style>
-  .nut-tour-content-inner {
-    white-space: nowrap;
-  }
+.nut-tour-content-inner {
+  white-space: nowrap;
+}
 </style>
 ```
 
@@ -62,18 +57,18 @@ Through 'maskWidth', 'maskHeight', 'bgColor' can be configured hollow mask size,
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="try click">
     <template #link>
-      <nut-switch id="target5" v-model="switchValue" @click="showTour1 = true" />
+      <nut-switch id="target5" v-model="state.switchValue" @click="state.showTour1 = true" />
     </template>
   </nut-cell>
 
   <nut-tour
     class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-    v-model="showTour1"
-    :steps="steps1"
+    v-model="state.showTour1"
+    :steps="state.steps1"
     location="bottom-end"
     type="tile"
     bgColor="#f00"
@@ -84,28 +79,23 @@ Through 'maskWidth', 'maskHeight', 'bgColor' can be configured hollow mask size,
   ></nut-tour>
 </template>
 
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        switchValue: false,
-        showTour1: false,
-        steps1: [
-          {
-            content: '70+ 高质量组件，覆盖移动端主流场景',
-            target: 'target5'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  switchValue: false,
+  showTour1: false,
+  steps1: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target5'
     }
-  };
+  ]
+});
 </script>
 <style>
-  .nut-tour-content-inner {
-    white-space: nowrap;
-  }
+.nut-tour-content-inner {
+  white-space: nowrap;
+}
 </style>
 ```
 
@@ -117,11 +107,11 @@ Through 'maskWidth', 'maskHeight', 'bgColor' can be configured hollow mask size,
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="点击试试" @click="showTour2 = true">
+  <nut-cell title="点击试试" @click="state.showTour2 = true">
     <template #link>
-      <div class="tour-demo-img" v-for="i in [1,2,3]">
+      <div class="tour-demo-img" v-for="i in [1, 2, 3]">
         <img
           style="width:20px;margin-right:10px"
           id="target6"
@@ -132,8 +122,8 @@ Through 'maskWidth', 'maskHeight', 'bgColor' can be configured hollow mask size,
   </nut-cell>
 
   <nut-tour
-    v-model="showTour2"
-    :steps="steps2"
+    v-model="state.showTour2"
+    :steps="state.steps2"
     type="tile"
     bgColor="#f00"
     theme="dark"
@@ -142,30 +132,25 @@ Through 'maskWidth', 'maskHeight', 'bgColor' can be configured hollow mask size,
   ></nut-tour>
 </template>
 
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        showTour2: false,
-        steps2: [
-          {
-            content: '支持一套代码同时开发多端小程序+H5',
-            target: 'target6',
-            popoverOffset: [40, 12],
-            arrowOffset: -36
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showTour2: false,
+  steps2: [
+    {
+      content: '支持一套代码同时开发多端小程序+H5',
+      target: 'target6',
+      popoverOffset: [40, 12],
+      arrowOffset: -36
     }
-  };
+  ]
+});
 </script>
 
 <style>
-  .nut-tour-content-inner {
-    white-space: nowrap;
-  }
+.nut-tour-content-inner {
+  white-space: nowrap;
+}
 </style>
 ```
 
@@ -177,17 +162,17 @@ Can customize the bubble layer through the slot slot
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击试试">
     <template #link>
-      <nut-switch id="target8" v-model="switchValue" @click="showTour4 = true" />
+      <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
     </template>
   </nut-cell>
 
   <nut-tour
-    v-model="showTour4"
-    :steps="steps4"
+    v-model="state.showTour4"
+    :steps="state.steps4"
     type="tile"
     theme="dark"
     location="bottom-end"
@@ -197,39 +182,34 @@ Can customize the bubble layer through the slot slot
     <div class="tour-demo-custom-content">
       <div>nutui 4.x 即将发布，敬请期待</div>
       <nut-divider direction="vertical" />
-      <div @click="showTour4 = false">知道了</div>
+      <div @click="state.showTour4 = false">知道了</div>
     </div>
   </nut-tour>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        switchValue: false,
-        showTour4: false,
-        steps4: [
-          {
-            target: 'target8'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  switchValue: false,
+  showTour4: false,
+  steps4: [
+    {
+      target: 'target8'
     }
-  };
+  ]
+});
 </script>
 
 <style>
-  .tour-demo-custom-content {
-    padding: 8px;
-    display: flex;
-    width: max-content;
-    align-items: center;
-  }
-  .nut-divider {
-    border-color: #fff;
-  }
+.tour-demo-custom-content {
+  padding: 8px;
+  display: flex;
+  width: max-content;
+  align-items: center;
+}
+.nut-divider {
+  border-color: #fff;
+}
 </style>
 ```
 
@@ -239,7 +219,7 @@ Can customize the bubble layer through the slot slot
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-tabbar :bottom="true">
     <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
@@ -247,11 +227,11 @@ Can customize the bubble layer through the slot slot
     <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
     <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
   </nut-tabbar>
-  <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
+  <nut-cell title="点击试试" @click="state.showTour = true"></nut-cell>
   <nut-tour
     class="nut-custom-tour"
-    v-model="showTour"
-    :steps="steps"
+    v-model="state.showTour"
+    :steps="state.steps"
     location="top-start"
     :offset="[0, 0]"
     maskWidth="60"
@@ -259,45 +239,40 @@ Can customize the bubble layer through the slot slot
   ></nut-tour>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        showTour: false,
-        steps: [
-          {
-            content: '70+ 高质量组件，覆盖移动端主流场景',
-            target: 'target1'
-          },
-          {
-            content: '支持一套代码同时开发多端小程序+H5',
-            target: 'target2'
-          },
-          {
-            content: '基于京东APP 10.0 视觉规范',
-            target: 'target3',
-            location: 'top-end'
-          },
-          {
-            content: '支持定制主题，内置 700+ 个主题变量',
-            target: 'target4',
-            location: 'top-end'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showTour: false,
+  steps: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target1'
+    },
+    {
+      content: '支持一套代码同时开发多端小程序+H5',
+      target: 'target2'
+    },
+    {
+      content: '基于京东APP 10.0 视觉规范',
+      target: 'target3',
+      location: 'top-end'
+    },
+    {
+      content: '支持定制主题，内置 700+ 个主题变量',
+      target: 'target4',
+      location: 'top-end'
     }
-  };
+  ]
+});
 </script>
 
 <style>
-  #app {
-    padding-top: 200px;
-  }
-  .nut-tabbar-item_icon-box_nav-word {
-    font-size: 14px;
-  }
+#app {
+  padding-top: 200px;
+}
+.nut-tabbar-item_icon-box_nav-word {
+  font-size: 14px;
+}
 </style>
 ```
 
@@ -307,48 +282,48 @@ Can customize the bubble layer through the slot slot
 
 ### Props
 
-| Attribute              | Description                                                                                                  | Type             | Default      |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------- | ------------ |
-| v-model                | Whether to display the boot eject layer                                                                      | boolean          | `false`      |
-| type                   | Tour type                                                                                                    | string           | `step`       |
-| steps                  | Boot Step Content                                                                                            | StepOptions[]    | `[]`         |
-| offset                 | The offset of the hollow mask relative to the target element                                                 | [number, number] | `[8, 10]`    |
-| current                | When the type is' step ', the number of steps is displayed by default                                        | number           | `0`          |
-| custom-class           | Custom class                                                                                                 | string           | ''           |
-| location               | Location of popover,[location](https://nutui.jd.com/#/zh-CN/component/popover)                               | string           | `'bottom'`   |
-| next-step-Txt          | Next step text                                                                                               | string           | `'next'`     |
-| prev-step-Txt          | Prev step text                                                                                               | string           | `'prev' `    |
-| complete-txt           | Complete text                                                                                                | string           | `'complete'` |
-| mask                   | Whether to display cutout mask                                                                               | boolean          | `true`       |
-| bg-color               | Custom background color                                                                                      | boolean          | ''           |
-| theme                  | Theme style, can be set to dark light,[theme](https://nutui.jd.com/#/zh-CN/component/popover)                | string           | `'light'`    |
-| mask-width             | Width of hollow mask                                                                                         | number \| string | ''           |
-| mask-height            | Hollow mask height                                                                                           | number \| string | ''           |
-| close-on-click-overlay | Whether to close when clicking overlay,[closeOnClickOverlay](https://nutui.jd.com/#/zh-CN/component/popover) | boolean          | `true`       |
-| show-prev-step         | Whether to show prev button                                                                                  | boolean          | `true`       |
-| show-title-bar         | Whether to show title bar                                                                                    | boolean          | `false`      |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Whether to display the boot eject layer | boolean | `false` |
+| type | Tour type | string | `step` |
+| steps | Boot Step Content | StepOptions[] | `[]` |
+| offset | The offset of the hollow mask relative to the target element | [number, number] | `[8, 10]` |
+| current | When the type is' step ', the number of steps is displayed by default | number | `0` |
+| custom-class | Custom class | string | '' |
+| location | Location of popover,[location](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'bottom'` |
+| next-step-Txt | Next step text | string | `'next'` |
+| prev-step-Txt | Prev step text | string | `'prev' ` |
+| complete-txt | Complete text | string | `'complete'` |
+| mask | Whether to display cutout mask | boolean | `true` |
+| bg-color | Custom background color | boolean | '' |
+| theme | Theme style, can be set to dark light,[theme](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'light'` |
+| mask-width | Width of hollow mask | number \| string | '' |
+| mask-height | Hollow mask height | number \| string | '' |
+| close-on-click-overlay | Whether to close when clicking overlay,[closeOnClickOverlay](https://nutui.jd.com/#/zh-CN/component/popover) | boolean | `true` |
+| show-prev-step | Whether to show prev button | boolean | `true` |
+| show-title-bar | Whether to show title bar | boolean | `false` |
 
 ### StepOptions
 
-| Attribute      | Description                                                                    | Type             | Default    |
-| -------------- | ------------------------------------------------------------------------------ | ---------------- | ---------- |
-| target         | target dom                                                                     | id               | -          |
-| content        | popover content                                                                | string           | ''         |
-| location       | Location of popover,[location](https://nutui.jd.com/#/zh-CN/component/popover) | string           | `'bottom'` |
-| popover-offset | Offset of popopver [offset](https://nutui.jd.com/#/zh-CN/component/popover)    | [number, number] | `[0, 12]`  |
-| arrow-offset   | Offset of arrow [arrowOffset](https://nutui.jd.com/#/zh-CN/component/popover)  | number           | `0`        |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| target | target dom | id | - |
+| content | popover content | string | '' |
+| location | Location of popover,[location](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'bottom'` |
+| popover-offset | Offset of popopver [offset](https://nutui.jd.com/#/zh-CN/component/popover) | [number, number] | `[0, 12]` |
+| arrow-offset | Offset of arrow [arrowOffset](https://nutui.jd.com/#/zh-CN/component/popover) | number | `0` |
 
 ### Slots
 
-| Name      | Description               |
-| --------- | ------------------------- |
-| default   | Custom popover content    |
+| Name | Description |
+| --- | --- |
+| default | Custom popover content |
 | prev-step | Custom prev strep content |
 | next-step | Custom prev strep content |
 
 ### Events
 
-| Event  | Description             |
-| ------ | ----------------------- |
-| change | Emit when step change   |
-| close  | Emit when popover close |
+| Event | Description |
+| --- | --- |
+| change | Emit when step change |
+| close | Emit when popover close |
diff --git a/src/packages/__VUE/tour/doc.md b/src/packages/__VUE/tour/doc.md
index 96c8cf8150..b96eeceb5e 100644
--- a/src/packages/__VUE/tour/doc.md
+++ b/src/packages/__VUE/tour/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Tour } from '@nutui/nutui';
 
@@ -20,37 +20,32 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击试试">
     <template #link>
-      <nut-switch id="target7" v-model="switchValue" @click="showTour3 = true" />
+      <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
     </template>
   </nut-cell>
-  <nut-tour v-model="showTour3" :steps="steps3" type="tile" location="bottom-end"></nut-tour>
+  <nut-tour v-model="state.showTour3" :steps="state.steps3" type="tile" location="bottom-end"></nut-tour>
 </template>
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        switchValue: false,
-        showTour3: false,
-        steps3: [
-          {
-            content: '70+ 高质量组件，覆盖移动端主流场景',
-            target: 'target7'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  switchValue: false,
+  showTour3: false,
+  steps3: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target7'
     }
-  };
+  ]
+});
 </script>
 <style>
-  .nut-tour-content-inner {
-    white-space: nowrap;
-  }
+.nut-tour-content-inner {
+  white-space: nowrap;
+}
 </style>
 ```
 
@@ -62,18 +57,18 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击试试">
     <template #link>
-      <nut-switch id="target5" v-model="switchValue" @click="showTour1 = true" />
+      <nut-switch id="target5" v-model="state.switchValue" @click="state.showTour1 = true" />
     </template>
   </nut-cell>
 
   <nut-tour
     class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-    v-model="showTour1"
-    :steps="steps1"
+    v-model="state.showTour1"
+    :steps="state.steps1"
     location="bottom-end"
     type="tile"
     bgColor="#f00"
@@ -84,28 +79,23 @@ app.use(Tour);
   ></nut-tour>
 </template>
 
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        switchValue: false,
-        showTour1: false,
-        steps1: [
-          {
-            content: '70+ 高质量组件，覆盖移动端主流场景',
-            target: 'target5'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  switchValue: false,
+  showTour1: false,
+  steps1: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target5'
     }
-  };
+  ]
+});
 </script>
 <style>
-  .nut-tour-content-inner {
-    white-space: nowrap;
-  }
+.nut-tour-content-inner {
+  white-space: nowrap;
+}
 </style>
 ```
 
@@ -117,11 +107,11 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="点击试试" @click="showTour2 = true">
+  <nut-cell title="点击试试" @click="state.showTour2 = true">
     <template #link>
-      <div class="tour-demo-img" v-for="i in [1,2,3]">
+      <div class="tour-demo-img" v-for="i in [1, 2, 3]">
         <img
           style="width:20px;margin-right:10px"
           id="target6"
@@ -132,8 +122,8 @@ app.use(Tour);
   </nut-cell>
 
   <nut-tour
-    v-model="showTour2"
-    :steps="steps2"
+    v-model="state.showTour2"
+    :steps="state.steps2"
     type="tile"
     bgColor="#f00"
     theme="dark"
@@ -142,29 +132,24 @@ app.use(Tour);
   ></nut-tour>
 </template>
 
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        showTour2: false,
-        steps2: [
-          {
-            content: '支持一套代码同时开发多端小程序+H5',
-            target: 'target6',
-            popoverOffset: [40, 12],
-            arrowOffset: -36
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showTour2: false,
+  steps2: [
+    {
+      content: '支持一套代码同时开发多端小程序+H5',
+      target: 'target6',
+      popoverOffset: [40, 12],
+      arrowOffset: -36
     }
-  };
+  ]
+});
 </script>
 <style>
-  .nut-tour-content-inner {
-    white-space: nowrap;
-  }
+.nut-tour-content-inner {
+  white-space: nowrap;
+}
 </style>
 ```
 
@@ -176,17 +161,17 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击试试">
     <template #link>
-      <nut-switch id="target8" v-model="switchValue" @click="showTour4 = true" />
+      <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
     </template>
   </nut-cell>
 
   <nut-tour
-    v-model="showTour4"
-    :steps="steps4"
+    v-model="state.showTour4"
+    :steps="state.steps4"
     type="tile"
     theme="dark"
     location="bottom-end"
@@ -196,39 +181,34 @@ app.use(Tour);
     <div class="tour-demo-custom-content">
       <div>nutui 4.x 即将发布，敬请期待</div>
       <nut-divider direction="vertical" />
-      <div @click="showTour4 = false">知道了</div>
+      <div @click="state.showTour4 = false">知道了</div>
     </div>
   </nut-tour>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        switchValue: false,
-        showTour4: false,
-        steps4: [
-          {
-            target: 'target8'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  switchValue: false,
+  showTour4: false,
+  steps4: [
+    {
+      target: 'target8'
     }
-  };
+  ]
+});
 </script>
 
 <style>
-  .tour-demo-custom-content {
-    padding: 8px;
-    display: flex;
-    width: max-content;
-    align-items: center;
-  }
-  .nut-divider {
-    border-color: #fff;
-  }
+.tour-demo-custom-content {
+  padding: 8px;
+  display: flex;
+  width: max-content;
+  align-items: center;
+}
+.nut-divider {
+  border-color: #fff;
+}
 </style>
 ```
 
@@ -240,7 +220,7 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-tabbar :bottom="true">
     <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
@@ -248,11 +228,11 @@ app.use(Tour);
     <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
     <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
   </nut-tabbar>
-  <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
+  <nut-cell title="点击试试" @click="state.showTour = true"></nut-cell>
   <nut-tour
     class="nut-custom-tour"
-    v-model="showTour"
-    :steps="steps"
+    v-model="state.showTour"
+    :steps="state.steps"
     location="top-start"
     :offset="[0, 0]"
     maskWidth="60"
@@ -260,44 +240,39 @@ app.use(Tour);
   ></nut-tour>
 </template>
 
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        showTour: false,
-        steps: [
-          {
-            content: '70+ 高质量组件，覆盖移动端主流场景',
-            target: 'target1'
-          },
-          {
-            content: '支持一套代码同时开发多端小程序+H5',
-            target: 'target2'
-          },
-          {
-            content: '基于京东APP 10.0 视觉规范',
-            target: 'target3',
-            location: 'top-end'
-          },
-          {
-            content: '支持定制主题，内置 700+ 个主题变量',
-            target: 'target4',
-            location: 'top-end'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showTour: false,
+  steps: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target1'
+    },
+    {
+      content: '支持一套代码同时开发多端小程序+H5',
+      target: 'target2'
+    },
+    {
+      content: '基于京东APP 10.0 视觉规范',
+      target: 'target3',
+      location: 'top-end'
+    },
+    {
+      content: '支持定制主题，内置 700+ 个主题变量',
+      target: 'target4',
+      location: 'top-end'
     }
-  };
+  ]
+});
 </script>
 <style>
-  #app {
-    padding-top: 200px;
-  }
-  .nut-tabbar-item_icon-box_nav-word {
-    font-size: 14px;
-  }
+#app {
+  padding-top: 200px;
+}
+.nut-tabbar-item_icon-box_nav-word {
+  font-size: 14px;
+}
 </style>
 ```
 
@@ -307,48 +282,48 @@ app.use(Tour);
 
 ### Props
 
-| 参数                   | 说明                                                                                                                | 类型             | 默认值      |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------- | ----------- |
-| v-model                | 是否展示引导弹出层                                                                                                  | boolean          | `false`     |
-| type                   | 引导类型                                                                                                            | string           | `step`      |
-| steps                  | 引导步骤内容                                                                                                        | StepOptions[]    | `[]`        |
-| offset                 | 镂空遮罩相对于目标元素的偏移量                                                                                      | [number, number] | `[8, 10]`   |
-| current                | 类型为 `step` 时，默认展示第几步                                                                                    | number           | `0`         |
-| custom-class           | 自定义 class 值                                                                                                     | string           | ''          |
-| location               | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)                            | string           | 'bottom'    |
-| next-step-Txt          | 下一步按钮文案                                                                                                      | string           | `'下一步'`  |
-| prev-step-Txt          | 上一步按钮文案                                                                                                      | string           | `'上一步' ` |
-| complete-txt           | 完成按钮文案                                                                                                        | string           | `'完成'`    |
-| mask                   | 是否显示镂空遮罩                                                                                                    | boolean          | `true`      |
-| bg-color               | 自定义背景色                                                                                                        | boolean          | `''`        |
-| theme                  | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover)                           | string           | `'light'`   |
-| mask-width             | 镂空遮罩层宽度                                                                                                      | number \| string | ''          |
-| mask-height            | 镂空遮罩层高度                                                                                                      | number \| string | ''          |
-| close-on-click-overlay | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/#/zh-CN/component/popover) | Boolean          | `true`      |
-| show-prev-step         | 是否展示上一步按钮                                                                                                  | boolean          | `true`      |
-| show-title-bar         | 是否展示标题栏                                                                                                      | boolean          | `false`     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 是否展示引导弹出层 | boolean | `false` |
+| type | 引导类型 | string | `step` |
+| steps | 引导步骤内容 | StepOptions[] | `[]` |
+| offset | 镂空遮罩相对于目标元素的偏移量 | [number, number] | `[8, 10]` |
+| current | 类型为 `step` 时，默认展示第几步 | number | `0` |
+| custom-class | 自定义 class 值 | string | '' |
+| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | 'bottom' |
+| next-step-Txt | 下一步按钮文案 | string | `'下一步'` |
+| prev-step-Txt | 上一步按钮文案 | string | `'上一步' ` |
+| complete-txt | 完成按钮文案 | string | `'完成'` |
+| mask | 是否显示镂空遮罩 | boolean | `true` |
+| bg-color | 自定义背景色 | boolean | `''` |
+| theme | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'light'` |
+| mask-width | 镂空遮罩层宽度 | number \| string | '' |
+| mask-height | 镂空遮罩层高度 | number \| string | '' |
+| close-on-click-overlay | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/#/zh-CN/component/popover) | Boolean | `true` |
+| show-prev-step | 是否展示上一步按钮 | boolean | `true` |
+| show-title-bar | 是否展示标题栏 | boolean | `false` |
 
 ### StepOptions
 
-| 键名           | 说明                                                                                             | 类型             | 默认值     |
-| -------------- | ------------------------------------------------------------------------------------------------ | ---------------- | ---------- |
-| target         | 目标对象                                                                                         | id               | -          |
-| content        | 气泡层内容                                                                                       | string           | ''         |
-| location       | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)         | string           | `'bottom'` |
-| popover-offset | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover)        | [number, number] | `[0, 12]`  |
-| arrow-offset   | 小箭头的偏移量，同 Popopver 的[arrowOffset 属性](https://nutui.jd.com/#/zh-CN/component/popover) | number           | `0`        |
+| 键名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| target | 目标对象 | id | - |
+| content | 气泡层内容 | string | '' |
+| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'bottom'` |
+| popover-offset | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover) | [number, number] | `[0, 12]` |
+| arrow-offset | 小箭头的偏移量，同 Popopver 的[arrowOffset 属性](https://nutui.jd.com/#/zh-CN/component/popover) | number | `0` |
 
 ### Slots
 
-| 名称      | 说明             |
-| --------- | ---------------- |
-| default   | 自定义气泡层内容 |
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义气泡层内容 |
 | prev-step | 自定义上一步内容 |
 | next-step | 自定义下一步内容 |
 
 ### Events
 
-| 事件名 | 说明             |
-| ------ | ---------------- |
-| change | 切换步骤时触发   |
-| close  | 气泡层关闭时触发 |
+| 事件名 | 说明 |
+| --- | --- |
+| change | 切换步骤时触发 |
+| close | 气泡层关闭时触发 |
diff --git a/src/packages/__VUE/tour/doc.taro.md b/src/packages/__VUE/tour/doc.taro.md
index 5050e7428e..720b01a7e7 100644
--- a/src/packages/__VUE/tour/doc.taro.md
+++ b/src/packages/__VUE/tour/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Tour } from '@nutui/nutui-taro';
 
@@ -20,38 +20,33 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击试试">
     <template #link>
-      <nut-switch id="target7" v-model="switchValue" @click="showTour3 = true" />
+      <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
     </template>
   </nut-cell>
-  <nut-tour v-model="showTour3" :steps="steps3" type="tile" location="bottom-end"></nut-tour>
+  <nut-tour v-model="state.showTour3" :steps="state.steps3" type="tile" location="bottom-end"></nut-tour>
 </template>
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        switchValue: false,
-        showTour3: false,
-        steps3: [
-          {
-            content: '70+ 高质量组件，覆盖移动端主流场景',
-            target: 'target7'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  switchValue: false,
+  showTour3: false,
+  steps3: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target7'
     }
-  };
+  ]
+});
 </script>
 
 <style>
-  .nut-tour-content-inner {
-    white-space: nowrap;
-  }
+.nut-tour-content-inner {
+  white-space: nowrap;
+}
 </style>
 ```
 
@@ -63,18 +58,18 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击试试">
     <template #link>
-      <nut-switch id="target5" v-model="switchValue" @click="showTour1 = true" />
+      <nut-switch id="target5" v-model="state.switchValue" @click="state.showTour1 = true" />
     </template>
   </nut-cell>
 
   <nut-tour
     class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-    v-model="showTour1"
-    :steps="steps1"
+    v-model="state.showTour1"
+    :steps="state.steps1"
     location="bottom-end"
     type="tile"
     bgColor="#f00"
@@ -85,29 +80,24 @@ app.use(Tour);
   ></nut-tour>
 </template>
 
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        switchValue: false,
-        showTour1: false,
-        steps1: [
-          {
-            content: '70+ 高质量组件，覆盖移动端主流场景',
-            target: 'target5'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  switchValue: false,
+  showTour1: false,
+  steps1: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target5'
     }
-  };
+  ]
+});
 </script>
 
 <style>
-  .nut-tour-content-inner {
-    white-space: nowrap;
-  }
+.nut-tour-content-inner {
+  white-space: nowrap;
+}
 </style>
 ```
 
@@ -119,11 +109,11 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="点击试试" @click="showTour2 = true">
+  <nut-cell title="点击试试" @click="state.showTour2 = true">
     <template #link>
-      <div class="tour-demo-img" v-for="i in [1,2,3]">
+      <div class="tour-demo-img" v-for="i in [1, 2, 3]">
         <img
           style="width:20px;height:20px;margin-right:10px"
           id="target6"
@@ -134,8 +124,8 @@ app.use(Tour);
   </nut-cell>
 
   <nut-tour
-    v-model="showTour2"
-    :steps="steps2"
+    v-model="state.showTour2"
+    :steps="state.steps2"
     type="tile"
     bgColor="#f00"
     theme="dark"
@@ -144,30 +134,25 @@ app.use(Tour);
   ></nut-tour>
 </template>
 
-<script>
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        showTour2: false,
-        steps2: [
-          {
-            content: '支持一套代码同时开发多端小程序+H5',
-            target: 'target6',
-            popoverOffset: [40, 12],
-            arrowOffset: -36
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showTour2: false,
+  steps2: [
+    {
+      content: '支持一套代码同时开发多端小程序+H5',
+      target: 'target6',
+      popoverOffset: [40, 12],
+      arrowOffset: -36
     }
-  };
+  ]
+});
 </script>
 
 <style>
-  .nut-tour-content-inner {
-    white-space: nowrap;
-  }
+.nut-tour-content-inner {
+  white-space: nowrap;
+}
 </style>
 ```
 
@@ -179,17 +164,17 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="点击试试">
     <template #link>
-      <nut-switch id="target8" v-model="switchValue" @click="showTour4 = true" />
+      <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
     </template>
   </nut-cell>
 
   <nut-tour
-    v-model="showTour4"
-    :steps="steps4"
+    v-model="state.showTour4"
+    :steps="state.steps4"
     type="tile"
     theme="dark"
     location="bottom-end"
@@ -199,38 +184,33 @@ app.use(Tour);
     <div class="tour-demo-custom-content">
       <div>nutui 4.x 即将发布，敬请期待</div>
       <nut-divider direction="vertical" />
-      <div @click="showTour4 = false">知道了</div>
+      <div @click="state.showTour4 = false">知道了</div>
     </div>
   </nut-tour>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        switchValue: false,
-        showTour4: false,
-        steps4: [
-          {
-            target: 'target8'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  switchValue: false,
+  showTour4: false,
+  steps4: [
+    {
+      target: 'target8'
     }
-  };
+  ]
+});
 </script>
 <style>
-  .tour-demo-custom-content {
-    padding: 8px;
-    display: flex;
-    width: max-content;
-    align-items: center;
-  }
-  .nut-divider {
-    border-color: #fff;
-  }
+.tour-demo-custom-content {
+  padding: 8px;
+  display: flex;
+  width: max-content;
+  align-items: center;
+}
+.nut-divider {
+  border-color: #fff;
+}
 </style>
 ```
 
@@ -242,9 +222,9 @@ app.use(Tour);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
+  <nut-cell title="点击试试" @click="state.showTour = true"></nut-cell>
 
   <nut-tabbar :bottom="true">
     <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
@@ -255,8 +235,8 @@ app.use(Tour);
 
   <nut-tour
     class="nut-customword-tour"
-    v-model="showTour"
-    :steps="steps"
+    v-model="state.showTour"
+    :steps="state.steps"
     location="top-start"
     :offset="[0, 0]"
     maskWidth="60"
@@ -264,48 +244,43 @@ app.use(Tour);
   ></nut-tour>
 </template>
 
-<script lang="ts">
-  import { reactive, toRefs } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        showTour: false,
-        steps: [
-          {
-            content: '70+ 高质量组件，覆盖移动端主流场景',
-            target: 'target1'
-          },
-          {
-            content: '支持一套代码同时开发多端小程序+H5',
-            target: 'target2'
-          },
-          {
-            content: '基于京东APP 10.0 视觉规范',
-            target: 'target3',
-            location: 'top-end'
-          },
-          {
-            content: '支持定制主题，内置 700+ 个主题变量',
-            target: 'target4',
-            location: 'top-end'
-          }
-        ]
-      });
-      return { ...toRefs(state) };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  showTour: false,
+  steps: [
+    {
+      content: '70+ 高质量组件，覆盖移动端主流场景',
+      target: 'target1'
+    },
+    {
+      content: '支持一套代码同时开发多端小程序+H5',
+      target: 'target2'
+    },
+    {
+      content: '基于京东APP 10.0 视觉规范',
+      target: 'target3',
+      location: 'top-end'
+    },
+    {
+      content: '支持定制主题，内置 700+ 个主题变量',
+      target: 'target4',
+      location: 'top-end'
     }
-  };
+  ]
+});
 </script>
 <style>
-  page {
-    padding-top: 200px;
-  }
-  .nut-tour-content {
-    display: block;
-    width: 200px;
-  }
-  .nut-tabbar-item_icon-box_nav-word {
-    font-size: 14px;
-  }
+page {
+  padding-top: 200px;
+}
+.nut-tour-content {
+  display: block;
+  width: 200px;
+}
+.nut-tabbar-item_icon-box_nav-word {
+  font-size: 14px;
+}
 </style>
 ```
 
@@ -315,48 +290,48 @@ app.use(Tour);
 
 ### Props
 
-| 参数                   | 说明                                                                                                                | 类型             | 默认值     |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------- |
-| v-model                | 是否展示引导弹出层                                                                                                  | boolean          | `false`    |
-| type                   | 引导类型                                                                                                            | string           | `step`     |
-| steps                  | 引导步骤内容                                                                                                        | StepOptions[]    | `[]`       |
-| offset                 | 镂空遮罩相对于目标元素的偏移量                                                                                      | [number, number] | `[8, 10]`  |
-| current                | 类型为 `step` 时，默认展示第几步                                                                                    | number           | `0`        |
-| custom-class           | 自定义 class 值                                                                                                     | string           | ''         |
-| location               | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)                            | string           | `'bottom'` |
-| next-step-Txt          | 下一步按钮文案                                                                                                      | string           | `'下一步'` |
-| prev-step-Txt          | 上一步按钮文案                                                                                                      | string           | `'上一步'` |
-| complete-txt           | 完成按钮文案                                                                                                        | string           | `'完成'`   |
-| mask                   | 是否显示镂空遮罩                                                                                                    | boolean          | `true`     |
-| bg-color               | 自定义背景色                                                                                                        | boolean          | ''         |
-| theme                  | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover)                           | string           | `'light'`  |
-| mask-width             | 镂空遮罩层宽度                                                                                                      | number \|string  | ''         |
-| mask-height            | 镂空遮罩层高度                                                                                                      | number \|string  | ''         |
-| close-on-click-overlay | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/#/zh-CN/component/popover) | Boolean          | `true`     |
-| show-prev-step         | 是否展示上一步按钮                                                                                                  | boolean          | `true`     |
-| show-title-bar         | 是否展示标题栏                                                                                                      | boolean          | `false`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 是否展示引导弹出层 | boolean | `false` |
+| type | 引导类型 | string | `step` |
+| steps | 引导步骤内容 | StepOptions[] | `[]` |
+| offset | 镂空遮罩相对于目标元素的偏移量 | [number, number] | `[8, 10]` |
+| current | 类型为 `step` 时，默认展示第几步 | number | `0` |
+| custom-class | 自定义 class 值 | string | '' |
+| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'bottom'` |
+| next-step-Txt | 下一步按钮文案 | string | `'下一步'` |
+| prev-step-Txt | 上一步按钮文案 | string | `'上一步'` |
+| complete-txt | 完成按钮文案 | string | `'完成'` |
+| mask | 是否显示镂空遮罩 | boolean | `true` |
+| bg-color | 自定义背景色 | boolean | '' |
+| theme | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'light'` |
+| mask-width | 镂空遮罩层宽度 | number \|string | '' |
+| mask-height | 镂空遮罩层高度 | number \|string | '' |
+| close-on-click-overlay | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/#/zh-CN/component/popover) | Boolean | `true` |
+| show-prev-step | 是否展示上一步按钮 | boolean | `true` |
+| show-title-bar | 是否展示标题栏 | boolean | `false` |
 
 ### StepOptions
 
-| 键名           | 说明                                                                                             | 类型             | 默认值     |
-| -------------- | ------------------------------------------------------------------------------------------------ | ---------------- | ---------- |
-| target         | 目标对象                                                                                         | id               | -          |
-| content        | 气泡层内容                                                                                       | string           | ''         |
-| location       | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)         | string           | `'bottom'` |
-| popover-offset | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover)        | [number, number] | `[0, 12]`  |
-| arrow-offset   | 小箭头的偏移量，同 Popopver 的[arrowOffset 属性](https://nutui.jd.com/#/zh-CN/component/popover) | number           | `0`        |
+| 键名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| target | 目标对象 | id | - |
+| content | 气泡层内容 | string | '' |
+| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'bottom'` |
+| popover-offset | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover) | [number, number] | `[0, 12]` |
+| arrow-offset | 小箭头的偏移量，同 Popopver 的[arrowOffset 属性](https://nutui.jd.com/#/zh-CN/component/popover) | number | `0` |
 
 ### Slots
 
-| 名称      | 说明             |
-| --------- | ---------------- |
-| default   | 自定义气泡层内容 |
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义气泡层内容 |
 | prev-step | 自定义上一步内容 |
 | next-step | 自定义下一步内容 |
 
 ### Events
 
-| 事件名 | 说明             |
-| ------ | ---------------- |
-| change | 切换步骤时触发   |
-| close  | 气泡层关闭时触发 |
+| 事件名 | 说明 |
+| --- | --- |
+| change | 切换步骤时触发 |
+| close | 气泡层关闭时触发 |
diff --git a/src/packages/__VUE/trendarrow/demo.vue b/src/packages/__VUE/trendarrow/demo.vue
index add4896791..f777120e78 100644
--- a/src/packages/__VUE/trendarrow/demo.vue
+++ b/src/packages/__VUE/trendarrow/demo.vue
@@ -57,8 +57,7 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('trend-arrow');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -86,14 +85,7 @@ const initTranslate = () =>
       title7: 'Custom icon'
     }
   });
-export default defineComponent({
-  components: { Success, Failure },
-  props: {},
-  setup() {
-    initTranslate();
-    return { translate };
-  }
-});
+initTranslate();
 </script>
 <style lang="scss" scoped>
 .demo {
diff --git a/src/packages/__VUE/trendarrow/doc.en-US.md b/src/packages/__VUE/trendarrow/doc.en-US.md
index 758a91bace..a225d51c5d 100644
--- a/src/packages/__VUE/trendarrow/doc.en-US.md
+++ b/src/packages/__VUE/trendarrow/doc.en-US.md
@@ -4,7 +4,7 @@
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { TrendArrow } from '@nutui/nutui';
 
@@ -16,7 +16,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :sync-text-color="false" :rate="1" />
@@ -31,7 +31,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365" />
@@ -46,7 +46,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :digits="0" :rate="10.2365" />
@@ -61,7 +61,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow arrowLeft :rate="0.2535" />
@@ -76,7 +76,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow showSign :rate="1" />
@@ -91,7 +91,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow showSign :rate="0" />
@@ -106,7 +106,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)" />
@@ -128,7 +128,7 @@ app.use(TrendArrow);
 
 ::: demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365">
@@ -139,11 +139,8 @@ app.use(TrendArrow);
     </nut-trend-arrow>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { Success, Failure } from '@nutui/icons-vue';
-  export default {
-    components: { Success, Failure }
-  };
+<script setup>
+import { Success, Failure } from '@nutui/icons-vue';
 </script>
 ```
 
@@ -153,23 +150,23 @@ app.use(TrendArrow);
 
 ### Props
 
-| Attribute       | Description                                                                                    | Type    | Default   |
-| --------------- | ---------------------------------------------------------------------------------------------- | ------- | --------- |
-| rate            | Value, the arrow is up when it is greater than 0, and the arrow is down when it is less than 0 | number  | -         |
-| digits          | decimal precision                                                                              | number  | `2`       |
-| show-sign       | Whether to display plus and minus signs                                                        | boolean | `false`   |
-| show-zero       | whether to show 0                                                                              | boolean | `false`   |
-| arrow-left      | whether to show an arrow to the left of the number                                             | boolean | `false`   |
-| sync-text-color | Whether the text color is in sync with the arrow                                               | boolean | `true`    |
-| text-color      | text color                                                                                     | string  | `#333333` |
-| rise-color      | up arrow color                                                                                 | string  | `#fa2c19` |
-| drop-color      | down arrow color                                                                               | string  | `#64b578` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| rate | Value, the arrow is up when it is greater than 0, and the arrow is down when it is less than 0 | number | - |
+| digits | decimal precision | number | `2` |
+| show-sign | Whether to display plus and minus signs | boolean | `false` |
+| show-zero | whether to show 0 | boolean | `false` |
+| arrow-left | whether to show an arrow to the left of the number | boolean | `false` |
+| sync-text-color | Whether the text color is in sync with the arrow | boolean | `true` |
+| text-color | text color | string | `#333333` |
+| rise-color | up arrow color | string | `#fa2c19` |
+| drop-color | down arrow color | string | `#64b578` |
 
 ### Slots
 
-| Name      | Description      |
-| --------- | ---------------- |
-| up-icon   | custom up icon   |
+| Name | Description |
+| --- | --- |
+| up-icon | custom up icon |
 | down-icon | custom down icon |
 
 ## Theming
@@ -178,7 +175,7 @@ app.use(TrendArrow);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                                | Default Value |
-| ----------------------------------- | ------------- |
-| --nut-trendarrow-font-size          | _14px_        |
-| --nut-trendarrow-before-icon-margin | _4px_         |
+| Name | Default Value |
+| --- | --- |
+| --nut-trendarrow-font-size | _14px_ |
+| --nut-trendarrow-before-icon-margin | _4px_ |
diff --git a/src/packages/__VUE/trendarrow/doc.md b/src/packages/__VUE/trendarrow/doc.md
index cf65972273..2b1e25fde8 100644
--- a/src/packages/__VUE/trendarrow/doc.md
+++ b/src/packages/__VUE/trendarrow/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { TrendArrow } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :sync-text-color="false" :rate="1" />
@@ -33,7 +33,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365" />
@@ -48,7 +48,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :digits="0" :rate="10.2365" />
@@ -63,7 +63,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow arrowLeft :rate="0.2535" />
@@ -78,7 +78,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow showSign :rate="1" />
@@ -93,7 +93,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow showSign :rate="0" />
@@ -108,7 +108,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)" />
@@ -130,7 +130,7 @@ app.use(TrendArrow);
 
 ::: demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365">
@@ -141,11 +141,8 @@ app.use(TrendArrow);
     </nut-trend-arrow>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { Success, Failure } from '@nutui/icons-vue';
-  export default {
-    components: { Success, Failure }
-  };
+<script setup>
+import { Success, Failure } from '@nutui/icons-vue';
 </script>
 ```
 
@@ -155,23 +152,23 @@ app.use(TrendArrow);
 
 ### Props
 
-| 参数            | 说明                                       | 类型    | 默认值    |
-| --------------- | ------------------------------------------ | ------- | --------- |
-| rate            | 数值，大于 0 时箭头向上，小于 0 时箭头向下 | number  | -         |
-| digits          | 小数位精度                                 | number  | `2`       |
-| show-sign       | 是否显示加减号                             | boolean | `false`   |
-| show-zero       | 是否显示 0                                 | boolean | `false`   |
-| arrow-left      | 是否在数字左侧显示箭头                     | boolean | `false`   |
-| sync-text-color | 文字颜色是否与箭头同步                     | boolean | `true`    |
-| text-color      | 文字颜色                                   | string  | `#333333` |
-| rise-color      | 向上箭头颜色                               | string  | `#fa2c19` |
-| drop-color      | 向下箭头颜色                               | string  | `#64b578` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rate | 数值，大于 0 时箭头向上，小于 0 时箭头向下 | number | - |
+| digits | 小数位精度 | number | `2` |
+| show-sign | 是否显示加减号 | boolean | `false` |
+| show-zero | 是否显示 0 | boolean | `false` |
+| arrow-left | 是否在数字左侧显示箭头 | boolean | `false` |
+| sync-text-color | 文字颜色是否与箭头同步 | boolean | `true` |
+| text-color | 文字颜色 | string | `#333333` |
+| rise-color | 向上箭头颜色 | string | `#fa2c19` |
+| drop-color | 向下箭头颜色 | string | `#64b578` |
 
 ### Slots
 
-| 名称      | 说明                                        |
-| --------- | ------------------------------------------- |
-| up-icon   | 自定义向上箭头图标，默认使用 `TriangleUp`   |
+| 名称 | 说明 |
+| --- | --- |
+| up-icon | 自定义向上箭头图标，默认使用 `TriangleUp` |
 | down-icon | 自定义向下箭头图标，默认使用 `TriangleDown` |
 
 ## 主题定制
@@ -180,7 +177,7 @@ app.use(TrendArrow);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                | 默认值 |
-| ----------------------------------- | ------ |
-| --nut-trendarrow-font-size          | _14px_ |
-| --nut-trendarrow-before-icon-margin | _4px_  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-trendarrow-font-size | _14px_ |
+| --nut-trendarrow-before-icon-margin | _4px_ |
diff --git a/src/packages/__VUE/trendarrow/doc.taro.md b/src/packages/__VUE/trendarrow/doc.taro.md
index f0fcaf3086..9cd47fcc09 100644
--- a/src/packages/__VUE/trendarrow/doc.taro.md
+++ b/src/packages/__VUE/trendarrow/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { TrendArrow } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :sync-text-color="false" :rate="1" />
@@ -33,7 +33,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365" />
@@ -48,7 +48,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :digits="0" :rate="10.2365" />
@@ -63,7 +63,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow arrowLeft :rate="0.2535" />
@@ -78,7 +78,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow showSign :rate="1" />
@@ -93,7 +93,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow showSign :rate="0" />
@@ -108,7 +108,7 @@ app.use(TrendArrow);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)" />
@@ -130,7 +130,7 @@ app.use(TrendArrow);
 
 ::: demo
 
-```html
+```vue
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365">
@@ -141,11 +141,8 @@ app.use(TrendArrow);
     </nut-trend-arrow>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { Success, Failure } from '@nutui/icons-vue-taro';
-  export default {
-    components: { Success, Failure }
-  };
+<script setup>
+import { Success, Failure } from '@nutui/icons-vue-taro';
 </script>
 ```
 
@@ -155,23 +152,23 @@ app.use(TrendArrow);
 
 ### Props
 
-| 参数            | 说明                                       | 类型    | 默认值    |
-| --------------- | ------------------------------------------ | ------- | --------- |
-| rate            | 数值，大于 0 时箭头向上，小于 0 时箭头向下 | number  | -         |
-| digits          | 小数位精度                                 | number  | `2`       |
-| show-sign       | 是否显示加减号                             | boolean | `false`   |
-| show-zero       | 是否显示 0                                 | boolean | `false`   |
-| arrow-left      | 是否在数字左侧显示箭头                     | boolean | `false`   |
-| sync-text-color | 文字颜色是否与箭头同步                     | boolean | `true`    |
-| text-color      | 文字颜色                                   | string  | `#333333` |
-| rise-color      | 向上箭头颜色                               | string  | `#fa2c19` |
-| drop-color      | 向下箭头颜色                               | string  | `#64b578` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rate | 数值，大于 0 时箭头向上，小于 0 时箭头向下 | number | - |
+| digits | 小数位精度 | number | `2` |
+| show-sign | 是否显示加减号 | boolean | `false` |
+| show-zero | 是否显示 0 | boolean | `false` |
+| arrow-left | 是否在数字左侧显示箭头 | boolean | `false` |
+| sync-text-color | 文字颜色是否与箭头同步 | boolean | `true` |
+| text-color | 文字颜色 | string | `#333333` |
+| rise-color | 向上箭头颜色 | string | `#fa2c19` |
+| drop-color | 向下箭头颜色 | string | `#64b578` |
 
 ### Slots
 
-| 名称      | 说明                                        |
-| --------- | ------------------------------------------- |
-| up-icon   | 自定义向上箭头图标，默认使用 `TriangleUp`   |
+| 名称 | 说明 |
+| --- | --- |
+| up-icon | 自定义向上箭头图标，默认使用 `TriangleUp` |
 | down-icon | 自定义向下箭头图标，默认使用 `TriangleDown` |
 
 ## 主题定制
@@ -180,7 +177,7 @@ app.use(TrendArrow);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                                | 默认值 |
-| ----------------------------------- | ------ |
-| --nut-trendarrow-font-size          | _14px_ |
-| --nut-trendarrow-before-icon-margin | _4px_  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-trendarrow-font-size | _14px_ |
+| --nut-trendarrow-before-icon-margin | _4px_ |
diff --git a/src/packages/__VUE/video/demo.vue b/src/packages/__VUE/video/demo.vue
index 18000cd08a..52bea67de0 100644
--- a/src/packages/__VUE/video/demo.vue
+++ b/src/packages/__VUE/video/demo.vue
@@ -2,36 +2,50 @@
   <div class="demo">
     <h4>{{ translate('basic') }}</h4>
     <nut-cell class="cell">
-      <nut-video :source="source" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
+      <nut-video :source="state.source" :options="state.options" @play="play" @pause="pause" @playend="playend">
+      </nut-video>
     </nut-cell>
     <h4>{{ translate('title1') }}</h4>
     <nut-cell class="cell">
-      <nut-video :source="source" :options="options1" @play="play" @pause="pause" @playend="playend"> </nut-video>
+      <nut-video :source="state.source" :options="state.options1" @play="play" @pause="pause" @playend="playend">
+      </nut-video>
     </nut-cell>
     <h4>{{ translate('title2') }}</h4>
     <nut-cell class="cell">
-      <nut-video :source="source" :options="options2" @play="play" @pause="pause" @playend="playend"> </nut-video>
+      <nut-video :source="state.source" :options="state.options2" @play="play" @pause="pause" @playend="playend">
+      </nut-video>
     </nut-cell>
     <h4>{{ translate('title3') }}</h4>
     <nut-cell class="cell">
-      <nut-video :source="source" :options="options3" @play="play" @pause="pause" @playend="playend"> </nut-video>
+      <nut-video :source="state.source" :options="state.options3" @play="play" @pause="pause" @playend="playend">
+      </nut-video>
     </nut-cell>
     <h4>{{ translate('title4') }}</h4>
     <nut-cell class="cell">
-      <nut-video :source="source" :options="options4" @play="play" @pause="pause" @playend="playend"> </nut-video>
+      <nut-video :source="state.source" :options="state.options4" @play="play" @pause="pause" @playend="playend">
+      </nut-video>
     </nut-cell>
     <h4>{{ translate('title5') }}</h4>
     <nut-cell class="cell">
-      <nut-video :source="source" :options="options5" @play="play" @pause="pause" @playend="playend"> </nut-video>
+      <nut-video :source="state.source" :options="state.options5" @play="play" @pause="pause" @playend="playend">
+      </nut-video>
     </nut-cell>
     <h4>{{ translate('title6') }}</h4>
     <nut-cell class="cell">
-      <nut-video :source="source1" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
+      <nut-video :source="state.source1" :options="state.options" @play="play" @pause="pause" @playend="playend">
+      </nut-video>
     </nut-cell>
     <nut-button type="primary" class="m-b" @click="changeVideo">{{ translate('title6') }}</nut-button>
     <h4>{{ translate('title7') }}</h4>
     <nut-cell class="cell">
-      <nut-video ref="videoRef" :source="source" :options="options" @play="play" @pause="pause" @playend="playend">
+      <nut-video
+        ref="videoRef"
+        :source="state.source"
+        :options="state.options"
+        @play="play"
+        @pause="pause"
+        @playend="playend"
+      >
       </nut-video>
     </nut-cell>
     <nut-button type="success" class="m-b" @click="videoRef.play()">{{ translate('title8') }}</nut-button>
@@ -42,8 +56,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, defineComponent, ref, Ref } from 'vue';
+<script setup lang="ts">
+import { reactive, ref, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('video');
 
@@ -81,59 +95,53 @@ const initTranslate = () =>
       title12: 'unmuted'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const state = reactive({
-      source: {
-        src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
-        type: 'video/mp4'
-      },
-      source1: {
-        src: 'https://storage.360buyimg.com/nutui/video/legao-%E6%9D%A8%E8%BF%9B%E5%86%9B.mp4',
-        type: 'video/mp4'
-      },
-      options: {
-        controls: true
-      },
-      options1: {
-        autoplay: true,
-        muted: true,
-        controls: true
-      },
-      options2: {
-        muted: true,
-        controls: true
-      },
-      options3: {
-        controls: true,
-        poster:
-          'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
-      },
-      options4: {
-        controls: true,
-        playsinline: true
-      },
-      options5: {
-        controls: false,
-        autoplay: true,
-        disabled: true,
-        muted: true,
-        playsinline: true,
-        loop: true
-      }
-    });
-    const videoRef = ref('null') as Ref;
-    const play = (elm: any) => console.log('play', elm);
-    const pause = (elm: any) => console.log('pause', elm);
-    const playend = (elm: any) => console.log('playend', elm);
-    const changeVideo = () => {
-      state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
-    };
-    return { play, pause, playend, ...toRefs(state), changeVideo, translate, videoRef };
+initTranslate();
+const state = reactive({
+  source: {
+    src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+    type: 'video/mp4'
+  },
+  source1: {
+    src: 'https://storage.360buyimg.com/nutui/video/legao-%E6%9D%A8%E8%BF%9B%E5%86%9B.mp4',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: true
+  },
+  options1: {
+    autoplay: true,
+    muted: true,
+    controls: true
+  },
+  options2: {
+    muted: true,
+    controls: true
+  },
+  options3: {
+    controls: true,
+    poster:
+      'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
+  },
+  options4: {
+    controls: true,
+    playsinline: true
+  },
+  options5: {
+    controls: false,
+    autoplay: true,
+    disabled: true,
+    muted: true,
+    playsinline: true,
+    loop: true
   }
 });
+const videoRef = ref('null') as Ref;
+const play = (elm: any) => console.log('play', elm);
+const pause = (elm: any) => console.log('pause', elm);
+const playend = (elm: any) => console.log('playend', elm);
+const changeVideo = () => {
+  state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/video/doc.en-US.md b/src/packages/__VUE/video/doc.en-US.md
index a225b6a013..dcb6187db4 100644
--- a/src/packages/__VUE/video/doc.en-US.md
+++ b/src/packages/__VUE/video/doc.en-US.md
@@ -6,7 +6,7 @@ Video player implemented by native video
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Video, Button } from '@nutui/nutui';
 
@@ -18,30 +18,25 @@ app.use(Video);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
+  <nut-video :source="state.source" :options="state.options" @play="play" @pause="pause" @playend="playend">
+  </nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: true
-        }
-      });
-      const play = (elm: any) => console.log('play', elm);
-      const pause = (elm: any) => console.log('pause', elm);
-      const playend = (elm: any) => console.log('playend', elm);
-
-      return { ...toRefs(state), play, pause, playend };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: true
+  }
+});
+const play = (elm) => console.log('play', elm);
+const pause = (elm) => console.log('pause', elm);
+const playend = (elm) => console.log('playend', elm);
 </script>
 ```
 
@@ -53,29 +48,23 @@ app.use(Video);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          autoplay: true,
-          muted: true,
-          controls: true
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    autoplay: true,
+    muted: true,
+    controls: true
+  }
+});
 </script>
 ```
 
@@ -87,28 +76,22 @@ The `muted` property sets the initial mute of the video
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          muted: true,
-          controls: true
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    muted: true,
+    controls: true
+  }
+});
 </script>
 ```
 
@@ -120,29 +103,23 @@ The `poster` property sets the video poster
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: true,
-          poster:
-            'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: true,
+    poster:
+      'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
+  }
+});
 </script>
 ```
 
@@ -154,28 +131,22 @@ The `playsinline` property sets the mobile terminal video to play in line and pr
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          playsinline: true,
-          controls: true
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    playsinline: true,
+    controls: true
+  }
+});
 </script>
 ```
 
@@ -187,32 +158,26 @@ When setting the video as the background image, it is necessary to set `muted`,
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: false,
-          autoplay: true,
-          muted: true,
-          disabled: true,
-          playsinline: true,
-          loop: true
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: false,
+    autoplay: true,
+    muted: true,
+    disabled: true,
+    playsinline: true,
+    loop: true
+  }
+});
 </script>
 ```
 
@@ -224,31 +189,25 @@ Reset the video when the video address changes
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source1" :options="options"></nut-video>
-  <nut-button type="primary" @click="changeVideo">Video switching</nut-button>
+  <nut-video :source="state.source1" :options="state.options"></nut-video>
+  <nut-button type="primary" @click="changeVideo">切换视频</nut-button>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source1: {
-          src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: true
-        }
-      });
-      const changeVideo = () => {
-        state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
-      };
-
-      return { ...toRefs(state), changeVideo };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source1: {
+    src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: true
+  }
+});
+const changeVideo = () => {
+  state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
+};
 </script>
 ```
 
@@ -258,84 +217,87 @@ Reset the video when the video address changes
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video ref="videoRef" :source="source" :options="options" @play="play" @pause="pause" @playend="playend">
+  <nut-video
+    ref="videoRef"
+    :source="state.source"
+    :options="state.options"
+    @play="play"
+    @pause="pause"
+    @playend="playend"
+  >
   </nut-video>
-  <nut-button type="success" class="m-b" @click="videoRef.play();">play</nut-button>
-  <nut-button type="warning" class="m-b" @click="videoRef.pause();">pause</nut-button>
-  <nut-button type="danger" class="m-b" @click="videoRef.stop();">stop</nut-button>
-  <nut-button type="success" class="m-b" @click="videoRef.muted();">muted</nut-button>
-  <nut-button type="danger" class="m-b" @click="videoRef.unmuted();">unmuted</nut-button>
+  <nut-button type="success" class="m-b" @click="videoRef.play()">播放</nut-button>
+  <nut-button type="warning" class="m-b" @click="videoRef.pause()">暂停</nut-button>
+  <nut-button type="danger" class="m-b" @click="videoRef.stop()">结束</nut-button>
+  <nut-button type="success" class="m-b" @click="videoRef.muted()">静音</nut-button>
+  <nut-button type="danger" class="m-b" @click="videoRef.unmuted()">取消静音</nut-button>
 </template>
-<script lang="ts">
-  import { toRefs, reactive, ref, Ref } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: true
-        }
-      });
-      const videoRef = ref(null) as Ref;
-      const play = (elm: any) => console.log('play', elm);
-      const pause = (elm: any) => console.log('pause', elm);
-      const playend = (elm: any) => console.log('playend', elm);
-
-      return { ...toRefs(state), play, pause, playend, videoRef };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: true
+  }
+});
+const videoRef = ref(null);
+const play = (elm) => console.log('play', elm);
+const pause = (elm) => console.log('pause', elm);
+const playend = (elm) => console.log('playend', elm);
 </script>
 ```
 
+:::
+
 ## API
 
 ### Props
 
-| Attribute | Description                       | Type         | Default |
-| --------- | --------------------------------- | ------------ | ------- |
-| source    | Video url and type settings       | VideoSource  | {}      |
-| options   | Control video playback properties | VideoOptions | {}      |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| source | Video url and type settings | VideoSource | {} |
+| options | Control video playback properties | VideoOptions | {} |
 
 ### VideoSource 数据结构
 
-| 键名 | 说明       | 类型    |
-| ---- | ---------- | ------- |
-| src  | Video Src  | boolean |
-| type | Video Type | string  |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| src | Video Src | boolean |
+| type | Video Type | string |
 
 ### VideoOptions 数据结构
 
-| key         | Description                                                                        | Type    | Default |
-| ----------- | ---------------------------------------------------------------------------------- | ------- | ------- |
-| autoplay    | Auto play                                                                          | boolean | `false` |
-| poster      | Poster settings                                                                    | string  | -       |
-| loop        | Poster loop                                                                        | boolean | `false` |
-| controls    | Show operation control                                                             | boolean | `true`  |
-| muted       | Mute                                                                               | boolean | `false` |
-| volume      | Volume control                                                                     | number  | `0.5`   |
-| disabled    | Disable operation (e.g. background image of circular playback, prohibit operation) | boolean | `false` |
-| playsinline | Whether to set as inline playback element (solve Android compatibility problem)    | boolean | `false` |
+| key | Description | Type | Default |
+| --- | --- | --- | --- |
+| autoplay | Auto play | boolean | `false` |
+| poster | Poster settings | string | - |
+| loop | Poster loop | boolean | `false` |
+| controls | Show operation control | boolean | `true` |
+| muted | Mute | boolean | `false` |
+| volume | Volume control | number | `0.5` |
+| disabled | Disable operation (e.g. background image of circular playback, prohibit operation) | boolean | `false` |
+| playsinline | Whether to set as inline playback element (solve Android compatibility problem) | boolean | `false` |
 
 ### Events
 
-| Event   | Description                                                                           | Arguments                     |
-| ------- | ------------------------------------------------------------------------------------- | ----------------------------- |
-| play    | play event                                                                            | -                             |
-| pause   | pause event                                                                           | -                             |
-| playend | Playback completion callback                                                          | -                             |
-| time    | Triggered when playing(current is the current playback time，total is the total time) | (current:string,total:string) |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| play | play event | - |
+| pause | pause event | - |
+| playend | Playback completion callback | - |
+| time | Triggered when playing(current is the current playback time，total is the total time) | (current:string,total:string) |
 
 ### Ref v4.1.6
 
-| Event   | Description |
-| ------- | ----------- |
-| play    | play        |
-| pause   | pause       |
-| stop    | stop        |
-| muted   | muted       |
-| unmuted | unmuted     |
+| Event | Description |
+| --- | --- |
+| play | play |
+| pause | pause |
+| stop | stop |
+| muted | muted |
+| unmuted | unmuted |
diff --git a/src/packages/__VUE/video/doc.md b/src/packages/__VUE/video/doc.md
index fca2229886..cb2a2306c2 100644
--- a/src/packages/__VUE/video/doc.md
+++ b/src/packages/__VUE/video/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Video, Button } from '@nutui/nutui';
 
@@ -18,30 +18,25 @@ app.use(Video);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
+  <nut-video :source="state.source" :options="state.options" @play="play" @pause="pause" @playend="playend">
+  </nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: true
-        }
-      });
-      const play = (elm: any) => console.log('play', elm);
-      const pause = (elm: any) => console.log('pause', elm);
-      const playend = (elm: any) => console.log('playend', elm);
-
-      return { ...toRefs(state), play, pause, playend };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: true
+  }
+});
+const play = (elm) => console.log('play', elm);
+const pause = (elm) => console.log('pause', elm);
+const playend = (elm) => console.log('playend', elm);
 </script>
 ```
 
@@ -53,29 +48,23 @@ autoplay 属性设置视频自动播放
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          autoplay: true,
-          muted: true,
-          controls: true
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    autoplay: true,
+    muted: true,
+    controls: true
+  }
+});
 </script>
 ```
 
@@ -87,28 +76,22 @@ muted 属性设置视频初始化静音
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          muted: true,
-          controls: true
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    muted: true,
+    controls: true
+  }
+});
 </script>
 ```
 
@@ -120,29 +103,23 @@ poster 属性设置视频海报
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: true,
-          poster:
-            'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: true,
+    poster:
+      'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
+  }
+});
 </script>
 ```
 
@@ -154,28 +131,22 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          playsinline: true,
-          controls: true
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    playsinline: true,
+    controls: true
+  }
+});
 </script>
 ```
 
@@ -187,32 +158,26 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source" :options="options"></nut-video>
+  <nut-video :source="state.source" :options="state.options"></nut-video>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: false,
-          autoplay: true,
-          muted: true,
-          disabled: true,
-          playsinline: true,
-          loop: true
-        }
-      });
-
-      return { ...toRefs(state) };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: false,
+    autoplay: true,
+    muted: true,
+    disabled: true,
+    playsinline: true,
+    loop: true
+  }
+});
 </script>
 ```
 
@@ -224,31 +189,25 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video :source="source1" :options="options"></nut-video>
+  <nut-video :source="state.source1" :options="state.options"></nut-video>
   <nut-button type="primary" @click="changeVideo">切换视频</nut-button>
 </template>
-<script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source1: {
-          src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: true
-        }
-      });
-      const changeVideo = () => {
-        state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
-      };
-
-      return { ...toRefs(state), changeVideo };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  source1: {
+    src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: true
+  }
+});
+const changeVideo = () => {
+  state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
+};
 </script>
 ```
 
@@ -258,37 +217,38 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-video ref="videoRef" :source="source" :options="options" @play="play" @pause="pause" @playend="playend">
+  <nut-video
+    ref="videoRef"
+    :source="state.source"
+    :options="state.options"
+    @play="play"
+    @pause="pause"
+    @playend="playend"
+  >
   </nut-video>
-  <nut-button type="success" class="m-b" @click="videoRef.play();">播放</nut-button>
-  <nut-button type="warning" class="m-b" @click="videoRef.pause();">暂停</nut-button>
-  <nut-button type="danger" class="m-b" @click="videoRef.stop();">结束</nut-button>
-  <nut-button type="success" class="m-b" @click="videoRef.muted();">静音</nut-button>
-  <nut-button type="danger" class="m-b" @click="videoRef.unmuted();">取消静音</nut-button>
+  <nut-button type="success" class="m-b" @click="videoRef.play()">播放</nut-button>
+  <nut-button type="warning" class="m-b" @click="videoRef.pause()">暂停</nut-button>
+  <nut-button type="danger" class="m-b" @click="videoRef.stop()">结束</nut-button>
+  <nut-button type="success" class="m-b" @click="videoRef.muted()">静音</nut-button>
+  <nut-button type="danger" class="m-b" @click="videoRef.unmuted()">取消静音</nut-button>
 </template>
-<script lang="ts">
-  import { toRefs, reactive, ref, Ref } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        source: {
-          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-          type: 'video/mp4'
-        },
-        options: {
-          controls: true
-        }
-      });
-      const videoRef = ref(null) as Ref;
-      const play = (elm: any) => console.log('play', elm);
-      const pause = (elm: any) => console.log('pause', elm);
-      const playend = (elm: any) => console.log('playend', elm);
-
-      return { ...toRefs(state), play, pause, playend, videoRef };
-    }
-  };
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  source: {
+    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+    type: 'video/mp4'
+  },
+  options: {
+    controls: true
+  }
+});
+const videoRef = ref(null);
+const play = (elm) => console.log('play', elm);
+const pause = (elm) => console.log('pause', elm);
+const playend = (elm) => console.log('playend', elm);
 </script>
 ```
 
@@ -298,46 +258,46 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 
 ### Props
 
-| 参数    | 说明               | 类型         | 默认值 |
-| ------- | ------------------ | ------------ | ------ |
-| source  | 视频地址和类型设置 | VideoSource  | {}     |
-| options | 控制视频播放属性   | VideoOptions | {}     |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| source | 视频地址和类型设置 | VideoSource | {} |
+| options | 控制视频播放属性 | VideoOptions | {} |
 
 ### VideoSource 数据结构
 
-| 键名 | 说明     | 类型    |
-| ---- | -------- | ------- |
-| src  | 视频链接 | boolean |
-| type | 视频类型 | string  |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| src | 视频链接 | boolean |
+| type | 视频类型 | string |
 
 ### VideoOptions 数据结构
 
-| 键名        | 说明                                       | 类型    | 默认值  |
-| ----------- | ------------------------------------------ | ------- | ------- |
-| autoplay    | 是否自动播放                               | boolean | `false` |
-| poster      | 海报设置                                   | string  | -       |
-| loop        | 是否循环播放                               | boolean | `false` |
-| controls    | 是否展示操作栏                             | boolean | `true`  |
-| muted       | 是否静音                                   | boolean | `false` |
-| volume      | 音量控制                                   | number  | `0.5`   |
-| disabled    | 禁用操作（如循环播放的背景图，禁止操作）   | boolean | `false` |
+| 键名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| autoplay | 是否自动播放 | boolean | `false` |
+| poster | 海报设置 | string | - |
+| loop | 是否循环播放 | boolean | `false` |
+| controls | 是否展示操作栏 | boolean | `true` |
+| muted | 是否静音 | boolean | `false` |
+| volume | 音量控制 | number | `0.5` |
+| disabled | 禁用操作（如循环播放的背景图，禁止操作） | boolean | `false` |
 | playsinline | 是否设置为行内播放元素（解决安卓兼容问题） | boolean | `false` |
 
 ### Events
 
-| 事件名  | 说明                                               | 回调参数                      |
-| ------- | -------------------------------------------------- | ----------------------------- |
-| play    | 播放                                               | videoElm                      |
-| pause   | 暂停                                               | videoElm                      |
-| playend | 播放完成回调                                       | videoElm                      |
-| time    | 播放时触发(current 为当前播放时间，total 为总时间) | (current:string,total:string) |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| play | 播放 | videoElm |
+| pause | 暂停 | videoElm |
+| playend | 播放完成回调 | videoElm |
+| time | 播放时触发(current 为当前播放时间，total 为总时间) | (current:string,total:string) |
 
 ### Ref v4.1.6
 
-| 事件名  | 说明     |
-| ------- | -------- |
-| play    | 播放     |
-| pause   | 暂停     |
-| stop    | 结束     |
-| muted   | 静音     |
+| 事件名 | 说明 |
+| --- | --- |
+| play | 播放 |
+| pause | 暂停 |
+| stop | 结束 |
+| muted | 静音 |
 | unmuted | 取消静音 |
diff --git a/src/packages/__VUE/watermark/demo.vue b/src/packages/__VUE/watermark/demo.vue
index ad8448cf74..8e7e40a2ed 100644
--- a/src/packages/__VUE/watermark/demo.vue
+++ b/src/packages/__VUE/watermark/demo.vue
@@ -21,8 +21,8 @@
     </nut-cell>
   </div>
 </template>
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('watermark');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -41,24 +41,16 @@ const initTranslate = () =>
       btn2: 'Image Watermark'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-    const imgSrc = ref(
-      '//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
-    );
-    const flag = ref(false);
-    const showTextMark = () => {
-      flag.value = false;
-    };
-    const showImageMark = () => {
-      flag.value = true;
-    };
-    return { translate, src, imgSrc, showTextMark, showImageMark, flag };
-  }
-});
+initTranslate();
+const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
+const imgSrc = ref('//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png');
+const flag = ref(false);
+const showTextMark = () => {
+  flag.value = false;
+};
+const showImageMark = () => {
+  flag.value = true;
+};
 </script>
 <style lang="scss" scoped>
 .demo {
diff --git a/src/packages/__VUE/watermark/doc.en-US.md b/src/packages/__VUE/watermark/doc.en-US.md
index 0a4f6f04b2..89b4939dcd 100644
--- a/src/packages/__VUE/watermark/doc.en-US.md
+++ b/src/packages/__VUE/watermark/doc.en-US.md
@@ -4,7 +4,7 @@
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Watermark } from '@nutui/nutui';
 
@@ -16,7 +16,7 @@ app.use(Watermark);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell class="wrap">
     <nut-button @click="showTextMark">Text Watermark</nut-button>
@@ -32,41 +32,34 @@ app.use(Watermark);
     ></nut-watermark>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const imgSrc = ref(
-        '//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
-      );
-      const flag = ref(false);
-      const showTextMark = () => {
-        flag.value = false;
-      };
-      const showImageMark = () => {
-        flag.value = true;
-      };
-      return { imgSrc, showTextMark, showImageMark, flag };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const imgSrc = ref('//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png');
+const flag = ref(false);
+const showTextMark = () => {
+  flag.value = false;
+};
+const showImageMark = () => {
+  flag.value = true;
+};
 </script>
 <style>
-  .wrap {
-    width: 100%;
-    height: 240px;
-    display: block;
-    background: #fff;
-  }
-  .wrap > img {
-    width: 100%;
-  }
-  .mark1 {
-    width: 100%;
-    top: 50px;
-  }
-  .nut-button {
-    margin-right: 10px;
-  }
+.wrap {
+  width: 100%;
+  height: 240px;
+  display: block;
+  background: #fff;
+}
+.wrap > img {
+  width: 100%;
+}
+.mark1 {
+  width: 100%;
+  top: 50px;
+}
+.nut-button {
+  margin-right: 10px;
+}
 </style>
 ```
 
@@ -76,32 +69,27 @@ app.use(Watermark);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell class="wrap">
     <img :src="src" alt="" />
     <nut-watermark :fullPage="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-      return { src };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
 </script>
 <style>
-  .wrap {
-    width: 100%;
-    height: 240px;
-    display: block;
-    background: #fff;
-  }
-  .wrap > img {
-    width: 100%;
-  }
+.wrap {
+  width: 100%;
+  height: 240px;
+  display: block;
+  background: #fff;
+}
+.wrap > img {
+  width: 100%;
+}
 </style>
 ```
 
@@ -111,22 +99,22 @@ app.use(Watermark);
 
 ### Props
 
-| Attribute    | Description                                                                                               | Type             | Default              |
-| ------------ | --------------------------------------------------------------------------------------------------------- | ---------------- | -------------------- |
-| width        | Width of watermark                                                                                        | number           | `120`                |
-| height       | Height of watermark                                                                                       | number           | `64`                 |
-| rotate       | Rotation angle when drawing watermark                                                                     | number           | `-22`                |
-| image        | Image source, it is recommended to export 2x or 3x images, and the image rendering watermark is preferred | string           | -                    |
-| image-width  | Width of image                                                                                            | number           | `120`                |
-| image-height | Height of image                                                                                           | number           | `64`                 |
-| z-index      | Z-index of the appended watermark element                                                                 | number           | `2000`               |
-| content      | Watermark text content                                                                                    | string           | -                    |
-| font-color   | Watermark text color                                                                                      | string           | `rgba(0, 0, 0, .15)` |
-| font-size    | Watermark text font size                                                                                  | string \| number | `16`                 |
-| gap-x        | Horizontal spacing between watermarks                                                                     | number           | `24`                 |
-| gap-y        | Vertical spacing between watermarks                                                                       | number           | `48`                 |
-| full-page    | Overwrite entire page                                                                                     | boolean          | `true`               |
-| font-family  | Watermark text font family                                                                                | boolean          | `true`               |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| width | Width of watermark | number | `120` |
+| height | Height of watermark | number | `64` |
+| rotate | Rotation angle when drawing watermark | number | `-22` |
+| image | Image source, it is recommended to export 2x or 3x images, and the image rendering watermark is preferred | string | - |
+| image-width | Width of image | number | `120` |
+| image-height | Height of image | number | `64` |
+| z-index | Z-index of the appended watermark element | number | `2000` |
+| content | Watermark text content | string | - |
+| font-color | Watermark text color | string | `rgba(0, 0, 0, .15)` |
+| font-size | Watermark text font size | string \| number | `16` |
+| gap-x | Horizontal spacing between watermarks | number | `24` |
+| gap-y | Vertical spacing between watermarks | number | `48` |
+| full-page | Overwrite entire page | boolean | `true` |
+| font-family | Watermark text font family | boolean | `true` |
 
 ## Theming
 
@@ -134,6 +122,6 @@ app.use(Watermark);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                    | Default Value |
-| ----------------------- | ------------- |
-| --nut-watermark-z-index | _2000_        |
+| Name | Default Value |
+| --- | --- |
+| --nut-watermark-z-index | _2000_ |
diff --git a/src/packages/__VUE/watermark/doc.md b/src/packages/__VUE/watermark/doc.md
index 64c671829e..dda9cef1a1 100644
--- a/src/packages/__VUE/watermark/doc.md
+++ b/src/packages/__VUE/watermark/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Watermark } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Watermark);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell class="wrap">
     <nut-button @click="showTextMark">文字水印</nut-button>
@@ -34,41 +34,34 @@ app.use(Watermark);
     ></nut-watermark>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const imgSrc = ref(
-        '//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
-      );
-      const flag = ref(false);
-      const showTextMark = () => {
-        flag.value = false;
-      };
-      const showImageMark = () => {
-        flag.value = true;
-      };
-      return { imgSrc, showTextMark, showImageMark, flag };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const imgSrc = ref('//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png');
+const flag = ref(false);
+const showTextMark = () => {
+  flag.value = false;
+};
+const showImageMark = () => {
+  flag.value = true;
+};
 </script>
 <style>
-  .wrap {
-    width: 100%;
-    height: 240px;
-    display: block;
-    background: #fff;
-  }
-  .wrap > img {
-    width: 100%;
-  }
-  .mark1 {
-    width: 100%;
-    top: 50px;
-  }
-  .nut-button {
-    margin-right: 10px;
-  }
+.wrap {
+  width: 100%;
+  height: 240px;
+  display: block;
+  background: #fff;
+}
+.wrap > img {
+  width: 100%;
+}
+.mark1 {
+  width: 100%;
+  top: 50px;
+}
+.nut-button {
+  margin-right: 10px;
+}
 </style>
 ```
 
@@ -78,32 +71,27 @@ app.use(Watermark);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell class="wrap">
     <img :src="src" alt="" />
     <nut-watermark :fullPage="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-      return { src };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
 </script>
 <style>
-  .wrap {
-    width: 100%;
-    height: 240px;
-    display: block;
-    background: #fff;
-  }
-  .wrap > img {
-    width: 100%;
-  }
+.wrap {
+  width: 100%;
+  height: 240px;
+  display: block;
+  background: #fff;
+}
+.wrap > img {
+  width: 100%;
+}
 </style>
 ```
 
@@ -113,22 +101,22 @@ app.use(Watermark);
 
 ### Props
 
-| 参数         | 说明                                                 | 类型             | 默认值               |
-| ------------ | ---------------------------------------------------- | ---------------- | -------------------- |
-| width        | 水印的宽度                                           | number           | `120`                |
-| height       | 水印的高度                                           | number           | `64`                 |
-| rotate       | 水印绘制时，旋转的角度                               | number           | `-22`                |
-| image        | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | string           | -                    |
-| image-width  | 图片宽度                                             | number           | `120`                |
-| image-height | 图片高度                                             | number           | `64`                 |
-| z-index      | 追加的水印元素的 z-index                             | number           | `2000`               |
-| content      | 水印文字内容                                         | string           | -                    |
-| font-color   | 水印文字颜色                                         | string           | `rgba(0, 0, 0, .15)` |
-| font-size    | 文字大小                                             | string \| number | `16`                 |
-| gap-x        | 水印之间的水平间距                                   | number           | `24`                 |
-| gap-y        | 水印之间的垂直间距                                   | number           | `48`                 |
-| full-page    | 是否覆盖整个页面                                     | boolean          | `true`               |
-| font-family  | 水印文字字体                                         | boolean          | `true`               |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 水印的宽度 | number | `120` |
+| height | 水印的高度 | number | `64` |
+| rotate | 水印绘制时，旋转的角度 | number | `-22` |
+| image | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | string | - |
+| image-width | 图片宽度 | number | `120` |
+| image-height | 图片高度 | number | `64` |
+| z-index | 追加的水印元素的 z-index | number | `2000` |
+| content | 水印文字内容 | string | - |
+| font-color | 水印文字颜色 | string | `rgba(0, 0, 0, .15)` |
+| font-size | 文字大小 | string \| number | `16` |
+| gap-x | 水印之间的水平间距 | number | `24` |
+| gap-y | 水印之间的垂直间距 | number | `48` |
+| full-page | 是否覆盖整个页面 | boolean | `true` |
+| font-family | 水印文字字体 | boolean | `true` |
 
 ## 主题定制
 
@@ -136,6 +124,6 @@ app.use(Watermark);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                    | 默认值 |
-| ----------------------- | ------ |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-watermark-z-index | _2000_ |
diff --git a/src/packages/__VUE/watermark/doc.taro.md b/src/packages/__VUE/watermark/doc.taro.md
index 8554045951..0b1d04eb37 100644
--- a/src/packages/__VUE/watermark/doc.taro.md
+++ b/src/packages/__VUE/watermark/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Watermark } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(Watermark);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell class="wrap">
     <nut-button @click="showTextMark">文字水印</nut-button>
@@ -34,41 +34,34 @@ app.use(Watermark);
     ></nut-watermark>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const imgSrc = ref(
-        '//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
-      );
-      const flag = ref(false);
-      const showTextMark = () => {
-        flag.value = false;
-      };
-      const showImageMark = () => {
-        flag.value = true;
-      };
-      return { imgSrc, showTextMark, showImageMark, flag };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const imgSrc = ref('//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png');
+const flag = ref(false);
+const showTextMark = () => {
+  flag.value = false;
+};
+const showImageMark = () => {
+  flag.value = true;
+};
 </script>
 <style>
-  .wrap {
-    width: 100%;
-    height: 240px;
-    display: block;
-    background: #fff;
-  }
-  .wrap > img {
-    width: 100%;
-  }
-  .mark1 {
-    width: 100%;
-    top: 50px;
-  }
-  .nut-button {
-    margin-right: 10px;
-  }
+.wrap {
+  width: 100%;
+  height: 240px;
+  display: block;
+  background: #fff;
+}
+.wrap > img {
+  width: 100%;
+}
+.mark1 {
+  width: 100%;
+  top: 50px;
+}
+.nut-button {
+  margin-right: 10px;
+}
 </style>
 ```
 
@@ -78,32 +71,27 @@ app.use(Watermark);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell class="wrap">
     <img :src="src" alt="" />
     <nut-watermark :fullPage="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
   </nut-cell>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-      return { src };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
 </script>
 <style>
-  .wrap {
-    width: 100%;
-    height: 240px;
-    display: block;
-    background: #fff;
-  }
-  .wrap > img {
-    width: 100%;
-  }
+.wrap {
+  width: 100%;
+  height: 240px;
+  display: block;
+  background: #fff;
+}
+.wrap > img {
+  width: 100%;
+}
 </style>
 ```
 
@@ -113,22 +101,22 @@ app.use(Watermark);
 
 ### Props
 
-| 参数         | 说明                                                 | 类型             | 默认值               |
-| ------------ | ---------------------------------------------------- | ---------------- | -------------------- |
-| width        | 水印的宽度                                           | number           | `120`                |
-| height       | 水印的高度                                           | number           | `64`                 |
-| rotate       | 水印绘制时，旋转的角度                               | number           | `-22`                |
-| image        | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | string           | -                    |
-| image-width  | 图片宽度                                             | number           | `120`                |
-| image-height | 图片高度                                             | number           | `64`                 |
-| z-index      | 追加的水印元素的 z-index                             | number           | `2000`               |
-| content      | 水印文字内容                                         | string           | -                    |
-| font-color   | 水印文字颜色                                         | string           | `rgba(0, 0, 0, .15)` |
-| font-size    | 文字大小                                             | string \| number | `16`                 |
-| gap-x        | 水印之间的水平间距                                   | number           | `24`                 |
-| gap-y        | 水印之间的垂直间距                                   | number           | `48`                 |
-| full-page    | 是否覆盖整个页面                                     | boolean          | `true`               |
-| font-family  | 水印文字字体                                         | boolean          | `true`               |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 水印的宽度 | number | `120` |
+| height | 水印的高度 | number | `64` |
+| rotate | 水印绘制时，旋转的角度 | number | `-22` |
+| image | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | string | - |
+| image-width | 图片宽度 | number | `120` |
+| image-height | 图片高度 | number | `64` |
+| z-index | 追加的水印元素的 z-index | number | `2000` |
+| content | 水印文字内容 | string | - |
+| font-color | 水印文字颜色 | string | `rgba(0, 0, 0, .15)` |
+| font-size | 文字大小 | string \| number | `16` |
+| gap-x | 水印之间的水平间距 | number | `24` |
+| gap-y | 水印之间的垂直间距 | number | `48` |
+| full-page | 是否覆盖整个页面 | boolean | `true` |
+| font-family | 水印文字字体 | boolean | `true` |
 
 ## 主题定制
 
@@ -136,6 +124,6 @@ app.use(Watermark);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                    | 默认值 |
-| ----------------------- | ------ |
+| 名称 | 默认值 |
+| --- | --- |
 | --nut-watermark-z-index | _2000_ |