diff --git a/packages/nutui-taro-demo/src/feedback/pages/backtop/index.vue b/packages/nutui-taro-demo/src/feedback/pages/backtop/index.vue
index 831a9c5056..2e3eaa1a00 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/backtop/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/backtop/index.vue
@@ -32,24 +32,12 @@
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const click = () => {
-      console.log('click');
-    };
-
-    return {
-      click,
-      env
-    };
-  }
+const env = Taro.getEnv();
+const click = () => {
+  console.log('click');
 };
 </script>
 
diff --git a/packages/nutui-taro-demo/src/feedback/pages/dialog/index.vue b/packages/nutui-taro-demo/src/feedback/pages/dialog/index.vue
index 41f1d4ed44..e269f642d6 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/dialog/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/dialog/index.vue
@@ -30,85 +30,60 @@
     <nut-dialog title="异步关闭" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const visible1 = ref(false);
-    const visible2 = ref(false);
-    const visible3 = ref(false);
-    const visible4 = ref(false);
-    const visible5 = ref(false);
-    const closeContent = ref('');
-    const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
-    const countDown = (second: number) => `倒计时 ${second} 秒`;
+const env = Taro.getEnv();
+const visible1 = ref(false);
+const visible2 = ref(false);
+const visible3 = ref(false);
+const visible4 = ref(false);
+const visible5 = ref(false);
+const closeContent = ref('');
+const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
+const countDown = (second: number) => `倒计时 ${second} 秒`;
 
-    const onCancel = () => {
-      console.log('event cancel');
-    };
-    const onOk = () => {
-      console.log('event ok');
-    };
-    const onOkAsync = () => {
-      sleep()
-        .then(() => {
-          closeContent.value = countDown(2);
-          return sleep();
-        })
-        .then(() => {
-          closeContent.value = countDown(1);
-          return sleep();
-        })
-        .then(() => {
-          closeContent.value = countDown(0);
-        })
-        .then(() => {
-          visible4.value = false;
-        });
-    };
-
-    const baseClick = (): void => {
-      visible1.value = true;
-    };
-    const noTitleClick = () => {
-      visible2.value = true;
-    };
-    const tipsClick = () => {
-      visible3.value = true;
-    };
+const onCancel = () => {
+  console.log('event cancel');
+};
+const onOk = () => {
+  console.log('event ok');
+};
+const onOkAsync = () => {
+  sleep()
+    .then(() => {
+      closeContent.value = countDown(2);
+      return sleep();
+    })
+    .then(() => {
+      closeContent.value = countDown(1);
+      return sleep();
+    })
+    .then(() => {
+      closeContent.value = countDown(0);
+    })
+    .then(() => {
+      visible4.value = false;
+    });
+};
 
-    const componentClick = () => {
-      closeContent.value = `点击确定时3s后关闭`;
-      visible4.value = true;
-    };
+const baseClick = (): void => {
+  visible1.value = true;
+};
+const noTitleClick = () => {
+  visible2.value = true;
+};
+const tipsClick = () => {
+  visible3.value = true;
+};
 
-    const verticalClick = () => {
-      visible5.value = true;
-    };
+const componentClick = () => {
+  closeContent.value = `点击确定时3s后关闭`;
+  visible4.value = true;
+};
 
-    return {
-      visible1,
-      visible2,
-      visible3,
-      visible4,
-      visible5,
-      onCancel,
-      onOk,
-      closeContent,
-      onOkAsync,
-      baseClick,
-      noTitleClick,
-      componentClick,
-      tipsClick,
-      verticalClick,
-      env
-    };
-  }
+const verticalClick = () => {
+  visible5.value = true;
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/drag/index.vue b/packages/nutui-taro-demo/src/feedback/pages/drag/index.vue
index 4ab79e4729..9ae809a7ec 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/drag/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/drag/index.vue
@@ -16,22 +16,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-
-    return {
-      env
-    };
-  }
-};
+const env = Taro.getEnv();
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/feedback/pages/infiniteloading/index.vue b/packages/nutui-taro-demo/src/feedback/pages/infiniteloading/index.vue
index 7bed053e5b..ad61c6ab48 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/infiniteloading/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/infiniteloading/index.vue
@@ -13,63 +13,47 @@
           @load-more="loadMore"
           @refresh="refresh"
         >
-          <view class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</view>
+          <view class="infiniteLi" v-for="(item, index) in defaultList" :key="index">{{ item }}</view>
         </nut-infinite-loading>
       </view>
     </nut-cell>
   </view>
 </template>
 
-<script lang="ts">
-import { onMounted, ref, reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+const hasMore = ref(true);
+const defaultList = ref(['']);
 
-export default {
-  props: {},
-  setup() {
-    const hasMore = ref(true);
+const loadMore = (done) => {
+  setTimeout(() => {
+    const curLen = defaultList.value.length;
 
-    const data = reactive({
-      defultList: ['']
-    });
+    for (let i = curLen; i < curLen + 10; i++) {
+      defaultList.value.push(`${i}`);
+    }
 
-    const loadMore = (done) => {
-      setTimeout(() => {
-        const curLen = data.defultList.length;
+    if (defaultList.value.length > 30) hasMore.value = false;
 
-        for (let i = curLen; i < curLen + 10; i++) {
-          data.defultList.push(`${i}`);
-        }
-
-        if (data.defultList.length > 30) hasMore.value = false;
-
-        done();
-      }, 500);
-    };
-
-    const refresh = (done) => {
-      setTimeout(() => {
-        console.log('刷新成功');
-        done();
-      }, 1000);
-    };
+    done();
+  }, 500);
+};
 
-    const init = () => {
-      for (let i = 0; i < 20; i++) {
-        data.defultList.push(`${i}`);
-      }
-    };
-    onMounted(() => {
-      init();
-    });
+const refresh = (done) => {
+  setTimeout(() => {
+    console.log('刷新成功');
+    done();
+  }, 1000);
+};
 
-    return {
-      loadMore,
-      hasMore,
-      refresh,
-      ...toRefs(data)
-    };
+const init = () => {
+  for (let i = 0; i < 20; i++) {
+    defaultList.value.push(`${i}`);
   }
 };
+onMounted(() => {
+  init();
+});
 </script>
 
 <style>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/notify/index.vue b/packages/nutui-taro-demo/src/feedback/pages/notify/index.vue
index 6e2abe106b..a3000762f3 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/notify/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/notify/index.vue
@@ -51,78 +51,61 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const onClosed = () => console.log('closed');
-    const onClick = () => console.log('click');
+const env = Taro.getEnv();
+const onClosed = () => console.log('closed');
+const onClick = () => console.log('click');
 
-    const baseState = {
-      state: reactive({
-        show: false,
-        desc: '基础用法'
-      }),
-      methods: {
-        cellClick() {
-          baseState.state.show = true;
-        }
-      }
-    };
+const baseState = {
+  state: reactive({
+    show: false,
+    desc: '基础用法'
+  }),
+  methods: {
+    cellClick() {
+      baseState.state.show = true;
+    }
+  }
+};
 
-    const notifyState = {
-      state: reactive({
-        show: false,
-        desc: '',
-        type: 'primary'
-      }),
-      methods: {
-        cellClick(type: string, desc: string) {
-          notifyState.state.show = true;
-          notifyState.state.type = type;
-          notifyState.state.desc = desc;
-        }
-      }
-    };
-    const customState = {
-      state: reactive({
-        show: false,
-        desc: '',
-        type: 'primary',
-        duration: 3000
-      }),
-      methods: {
-        cellClick(type: string, desc: string, duration: number) {
-          customState.state.show = true;
-          customState.state.type = type;
-          customState.state.desc = desc;
-          customState.state.duration = duration;
-        }
-      }
-    };
-    const show = ref(false);
-    const showNotify = () => {
-      show.value = true;
-      setTimeout(() => {
-        show.value = false;
-      }, 2000);
-    };
-    return {
-      baseState,
-      notifyState,
-      customState,
-      onClosed,
-      onClick,
-      show,
-      showNotify,
-      env
-    };
+const notifyState = {
+  state: reactive({
+    show: false,
+    desc: '',
+    type: 'primary'
+  }),
+  methods: {
+    cellClick(type: string, desc: string) {
+      notifyState.state.show = true;
+      notifyState.state.type = type;
+      notifyState.state.desc = desc;
+    }
   }
 };
+const customState = {
+  state: reactive({
+    show: false,
+    desc: '',
+    type: 'primary',
+    duration: 3000
+  }),
+  methods: {
+    cellClick(type: string, desc: string, duration: number) {
+      customState.state.show = true;
+      customState.state.type = type;
+      customState.state.desc = desc;
+      customState.state.duration = duration;
+    }
+  }
+};
+const show = ref(false);
+const showNotify = () => {
+  show.value = true;
+  setTimeout(() => {
+    show.value = false;
+  }, 2000);
+};
 </script>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/switch/index.vue b/packages/nutui-taro-demo/src/feedback/pages/switch/index.vue
index 635e5b0517..0aa306d16f 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/switch/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/switch/index.vue
@@ -3,22 +3,22 @@
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-switch v-model="checked1" />
+      <nut-switch v-model="data.checked1" />
     </nut-cell>
 
     <h2>禁用状态</h2>
     <nut-cell>
-      <nut-switch v-model="checked2" disable />
+      <nut-switch v-model="data.checked2" disable />
     </nut-cell>
 
     <h2>加载状态</h2>
     <nut-cell>
-      <nut-switch v-model="checked3" loading activeColor="red" />
+      <nut-switch v-model="data.checked3" loading activeColor="red" />
     </nut-cell>
 
     <h2>change事件</h2>
     <nut-cell>
-      <nut-switch v-model="checked4" @change="change" />
+      <nut-switch v-model="data.checked4" @change="change" />
     </nut-cell>
 
     <h2>异步控制</h2>
@@ -28,63 +28,48 @@
 
     <h2>自定义颜色</h2>
     <nut-cell>
-      <nut-switch v-model="checked6" active-color="blue" />
+      <nut-switch v-model="data.checked6" active-color="blue" />
     </nut-cell>
 
     <h2>支持文字</h2>
     <nut-cell>
-      <nut-switch v-model="checked7" active-text="开" inactive-text="关" />
+      <nut-switch v-model="data.checked7" active-text="开" inactive-text="关" />
     </nut-cell>
 
     <h2>自定义加载图标</h2>
     <nut-cell>
-      <nut-switch v-model="checked8" loading><Loading name="loading" /></nut-switch>
+      <nut-switch v-model="data.checked8" loading><Loading name="loading" /></nut-switch>
     </nut-cell>
   </div>
 </template>
 
-<script lang="ts">
-import { ref, reactive, toRefs, getCurrentInstance } from 'vue';
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import { Loading } from '@nutui/icons-vue-taro';
-export default {
-  components: { Loading, Header },
-  setup() {
-    const env = Taro.getEnv();
-    let { proxy } = getCurrentInstance() as any;
-    const data = reactive({
-      checked1: true,
-      checked2: true,
-      checked3: true,
-      checked4: true,
-      checked6: true,
-      checked7: true,
-      checked8: true
-    });
-    const checkedAsync = ref(true);
-    const loadingAsync = ref(false);
+const env = Taro.getEnv();
+const data = reactive({
+  checked1: true,
+  checked2: true,
+  checked3: true,
+  checked4: true,
+  checked6: true,
+  checked7: true,
+  checked8: true
+});
+const checkedAsync = ref(true);
+const loadingAsync = ref(false);
 
-    const change = (value: boolean, event: Event) => {
-      console.log(`value：${value}`);
-    };
-    const changeAsync = (value: boolean, event: Event) => {
-      console.log(`2秒后异步触发 ${value}`);
-      loadingAsync.value = true;
-      setTimeout(() => {
-        checkedAsync.value = value;
-        loadingAsync.value = false;
-      }, 2000);
-    };
-
-    return {
-      ...toRefs(data),
-      checkedAsync,
-      loadingAsync,
-      change,
-      changeAsync,
-      env
-    };
-  }
+const change = (value: boolean) => {
+  console.log(`value：${value}`);
+};
+const changeAsync = (value: boolean) => {
+  console.log(`2秒后异步触发 ${value}`);
+  loadingAsync.value = true;
+  setTimeout(() => {
+    checkedAsync.value = value;
+    loadingAsync.value = false;
+  }, 2000);
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/toast/index.vue b/packages/nutui-taro-demo/src/feedback/pages/toast/index.vue
index d3537a5d32..6ac1770101 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/toast/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/toast/index.vue
@@ -35,53 +35,40 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const page = {
-      state: reactive({
-        msg: 'toast',
-        type: 'text',
-        show: false,
-        cover: false,
-        title: '',
-        bottom: '',
-        center: true
-      }),
+const env = Taro.getEnv();
+const page = {
+  state: reactive({
+    msg: 'toast',
+    type: 'text',
+    show: false,
+    cover: false,
+    title: '',
+    bottom: '',
+    center: true
+  }),
 
-      methods: {
-        openToast: (
-          type: string,
-          msg: string,
-          cover: boolean = false,
-          title: string,
-          bottom: string,
-          center: boolean = true
-        ) => {
-          page.state.show = true;
-          page.state.msg = msg;
-          page.state.type = type;
-          page.state.cover = cover;
-          page.state.title = title;
-          page.state.bottom = bottom;
-          page.state.center = center;
-        },
-        onClosed: () => console.log('closed')
-      }
-    };
-    return {
-      page,
-      env
-    };
+  methods: {
+    openToast: (
+      type: string,
+      msg: string = '',
+      cover: boolean = false,
+      title: string = '',
+      bottom: string = '',
+      center: boolean = true
+    ) => {
+      page.state.show = true;
+      page.state.msg = msg;
+      page.state.type = type;
+      page.state.cover = cover;
+      page.state.title = title;
+      page.state.bottom = bottom;
+      page.state.center = center;
+    },
+    onClosed: () => console.log('closed')
   }
 };
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/actionsheet/demo.vue b/src/packages/__VUE/actionsheet/demo.vue
index d6b803e2c3..798c5447b2 100644
--- a/src/packages/__VUE/actionsheet/demo.vue
+++ b/src/packages/__VUE/actionsheet/demo.vue
@@ -56,6 +56,8 @@
 
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
+import NutActionSheet from './index.vue';
+import NutCell from '../cell/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('action-sheet');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
diff --git a/src/packages/__VUE/audio/demo.vue b/src/packages/__VUE/audio/demo.vue
index e63a61b2a4..843c871c7e 100644
--- a/src/packages/__VUE/audio/demo.vue
+++ b/src/packages/__VUE/audio/demo.vue
@@ -74,8 +74,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, ref, onMounted, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import NutAudio from './index.vue';
+import NutAudioOperate from '../audiooperate/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('audio');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -96,71 +98,43 @@ const initTranslate = () =>
     }
   });
 
-export default defineComponent({
-  components: {
-    Voice,
-    PlayDoubleBack,
-    PlayDoubleForward,
-    PlayStart,
-    PlayStop
-  },
-  props: {},
-  setup() {
-    initTranslate();
-    const audioDemo = ref({
-      second: 0
-    });
-    const playing = ref(false);
-    const duration = ref<string>('');
-    const data = reactive({
-      muted: false,
-      autoplay: false
-    });
-
-    const fastBack = () => {
-      console.log('倒退');
-    };
-
-    const forward = (progress: number) => {
-      console.log('快进', '当前时间' + progress);
-    };
-
-    const changeStatus = (status: boolean) => {
-      console.log('当前播放状态', status);
-      playing.value = status;
-    };
-
-    const ended = () => {
-      console.log('播放结束');
-    };
-
-    const changeProgress = (val: number) => {
-      console.log('改变进度条', val);
-    };
-
-    const onCanplay = (e: Event) => {
-      duration.value = audioDemo.value.second.toFixed();
-      console.log(e, duration.value);
-    };
-
-    onMounted(() => {
-      console.log(audioDemo.value);
-    });
-
-    return {
-      ...toRefs(data),
-      playing,
-      fastBack,
-      forward,
-      changeStatus,
-      audioDemo,
-      ended,
-      duration,
-      changeProgress,
-      translate,
-      onCanplay
-    };
-  }
+initTranslate();
+const audioDemo = ref({
+  second: 0
+});
+const playing = ref(false);
+const duration = ref<string>('');
+const muted = ref(false);
+const autoplay = ref(false);
+
+const fastBack = () => {
+  console.log('倒退');
+};
+
+const forward = (progress: number) => {
+  console.log('快进', '当前时间' + progress);
+};
+
+const changeStatus = (status: boolean) => {
+  console.log('当前播放状态', status);
+  playing.value = status;
+};
+
+const ended = () => {
+  console.log('播放结束');
+};
+
+const changeProgress = (val: number) => {
+  console.log('改变进度条', val);
+};
+
+const onCanplay = (e: Event) => {
+  duration.value = audioDemo.value.second.toFixed();
+  console.log(e, duration.value);
+};
+
+onMounted(() => {
+  console.log(audioDemo.value);
 });
 </script>
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/backtop/demo.vue b/src/packages/__VUE/backtop/demo.vue
index f8b1f2a5b5..0e8d3794c0 100644
--- a/src/packages/__VUE/backtop/demo.vue
+++ b/src/packages/__VUE/backtop/demo.vue
@@ -1,30 +1,7 @@
 <template>
   <div id="elId" class="demo">
     <h2>{{ translate('title') }}</h2>
-    <div class="text-data">{{ translate('content') }}1</div>
-    <div class="text-data">{{ translate('content') }}2</div>
-    <div class="text-data">{{ translate('content') }}3</div>
-    <div class="text-data">{{ translate('content') }}4</div>
-    <div class="text-data">{{ translate('content') }}5</div>
-    <div class="text-data">{{ translate('content') }}6</div>
-    <div class="text-data">{{ translate('content') }}7</div>
-    <div class="text-data">{{ translate('content') }}8</div>
-    <div class="text-data">{{ translate('content') }}9</div>
-    <div class="text-data">{{ translate('content') }}10</div>
-    <div class="text-data">{{ translate('content') }}11</div>
-    <div class="text-data">{{ translate('content') }}12</div>
-    <div class="text-data">{{ translate('content') }}13</div>
-    <div class="text-data">{{ translate('content') }}14</div>
-    <div class="text-data">{{ translate('content') }}15</div>
-    <div class="text-data">{{ translate('content') }}16</div>
-    <div class="text-data">{{ translate('content') }}17</div>
-    <div class="text-data">{{ translate('content') }}18</div>
-    <div class="text-data">{{ translate('content') }}19</div>
-    <div class="text-data">{{ translate('content') }}20</div>
-    <div class="text-data">{{ translate('content') }}21</div>
-    <div class="text-data">{{ translate('content') }}22</div>
-    <div class="text-data">{{ translate('content') }}23</div>
-    <div class="text-data">{{ translate('content') }}24</div>
+    <div v-for="(_, index) in 24" :key="index" class="text-data">{{ translate('content') + index }}</div>
     <nut-backtop el-id="elId" :distance="100" :bottom="110" @click="handleClick">
       <view class="backtop-demo">
         <Top width="12px" height="12px" class="nut-backtop-main"></Top>
@@ -35,8 +12,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import NutBacktop from './index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('backtop');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -46,20 +23,10 @@ const initTranslate = () =>
     'zh-CN': { title: '基础用法', clg: '触发返回顶部', content: '我是测试数据', backText: '顶部' },
     'en-US': { title: 'Basic Usage', clg: 'backtop', content: 'test data', backText: 'Top' }
   });
-export default defineComponent({
-  components: { Top },
-  setup() {
-    initTranslate();
-    const handleClick = () => {
-      console.log(translate('clg'));
-    };
-
-    return {
-      handleClick,
-      translate
-    };
-  }
-});
+initTranslate();
+const handleClick = () => {
+  console.log(translate('clg'));
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/backtop/doc.taro.md b/src/packages/__VUE/backtop/doc.taro.md
index 6cf19f4b06..c7e2be20d6 100644
--- a/src/packages/__VUE/backtop/doc.taro.md
+++ b/src/packages/__VUE/backtop/doc.taro.md
@@ -16,19 +16,22 @@ app.use(Backtop);
 
 ### 基础用法
 
-```html
-<view class="demo">
-  <nut-backtop>
-    <template #content>
-      <div v-for="(item, index) in 24" class="test">{{index}}</div>
-    </template>
-  </nut-backtop>
-</view>
+```vue
+<template>
+  <view class="demo">
+    <nut-backtop>
+      <template #content>
+        <div v-for="(item, index) in 24" class="test">{{ index }}</div>
+      </template>
+    </nut-backtop>
+  </view>
+</template>
+
 <style>
-  .test {
-    padding: 12px 0 12px 20px;
-    border-top: 1px solid #eee;
-  }
+.test {
+  padding: 12px 0 12px 20px;
+  border-top: 1px solid #eee;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/dialog/demo.vue b/src/packages/__VUE/dialog/demo.vue
index 4c36dc2eaf..626bd8efbb 100644
--- a/src/packages/__VUE/dialog/demo.vue
+++ b/src/packages/__VUE/dialog/demo.vue
@@ -35,11 +35,14 @@
     </nut-cell-group>
   </div>
 </template>
-<script lang="ts">
-import { createVNode, ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { createVNode, ref } from 'vue';
+import NutDialog from './index.vue';
+import { showDialog } from './index';
+import NutCell from '../cell/index.vue';
+import NutCellGroup from '../cellgroup/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('dialog');
-import { showDialog } from '@/packages/nutui.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({
@@ -80,123 +83,102 @@ const initTranslate = () =>
       content4: 'Click confirm to close it in 1 second'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const visible = ref(false);
-    const visible1 = ref(false);
+initTranslate();
+const visible = ref(false);
+const visible1 = ref(false);
 
-    const onCancel = () => {
-      console.log('event cancel');
-    };
-    const onOk = () => {
-      console.log('event ok');
-    };
+const onCancel = () => {
+  console.log('event cancel');
+};
+const onOk = () => {
+  console.log('event ok');
+};
 
-    const baseClick = (): void => {
-      showDialog({
-        title: translate('basic'),
-        content: createVNode('span', { style: { color: 'red' } }, translate('content3')),
-        onCancel,
-        onOk
-      });
-    };
-
-    const transparentClick = (): void => {
-      showDialog({
-        overlayStyle: { background: 'rgba(0,0,0,0)' },
-        title: translate('transparent'),
-        content: 'Content',
-        onCancel,
-        onOk
-      });
-    };
+const baseClick = (): void => {
+  showDialog({
+    title: translate('basic'),
+    content: createVNode('span', { style: { color: 'red' } }, translate('content3')),
+    onCancel,
+    onOk
+  });
+};
 
-    const htmlClick = (): void => {
-      showDialog({
-        title: translate('html'),
-        content:
-          "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
-        onCancel,
-        onOk
-      });
-    };
+const transparentClick = (): void => {
+  showDialog({
+    overlayStyle: { background: 'rgba(0,0,0,0)' },
+    title: translate('transparent'),
+    content: 'Content',
+    onCancel,
+    onOk
+  });
+};
 
-    const beforeCloseClick = (): void => {
-      showDialog({
-        title: translate('beforeClose'),
-        content: translate('content4'),
-        onCancel,
-        onOk,
-        beforeClose: (action: string) => {
-          return new Promise((r) => {
-            setTimeout(() => {
-              r(action == 'ok');
-            }, 1000);
-          });
-        }
-      });
-    };
+const htmlClick = (): void => {
+  showDialog({
+    title: translate('html'),
+    content:
+      "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
+    onCancel,
+    onOk
+  });
+};
 
-    const noTitleClick = () => {
-      showDialog({
-        content: translate('noTitle'),
-        onCancel,
-        onOk
-      });
-    };
-    const tipsClick = () => {
-      showDialog({
-        title: translate('tips'),
-        content: translate('content'),
-        noCancelBtn: true,
-        onCancel,
-        onOk
+const beforeCloseClick = (): void => {
+  showDialog({
+    title: translate('beforeClose'),
+    content: translate('content4'),
+    onCancel,
+    onOk,
+    beforeClose: (action: string) => {
+      return new Promise((r) => {
+        setTimeout(() => {
+          r(action == 'ok');
+        }, 1000);
       });
-    };
-    const verticalClick = () => {
-      showDialog({
-        title: translate('tips'),
-        content: translate('content1'),
-        footerDirection: 'vertical',
-        onCancel,
-        onOk
-      });
-    };
+    }
+  });
+};
 
-    const componentClick = () => {
-      visible.value = true;
-    };
-    const componentvVrticalClick = () => {
-      visible1.value = true;
-    };
+const noTitleClick = () => {
+  showDialog({
+    content: translate('noTitle'),
+    onCancel,
+    onOk
+  });
+};
+const tipsClick = () => {
+  showDialog({
+    title: translate('tips'),
+    content: translate('content'),
+    noCancelBtn: true,
+    onCancel,
+    onOk
+  });
+};
+const verticalClick = () => {
+  showDialog({
+    title: translate('tips'),
+    content: translate('content1'),
+    footerDirection: 'vertical',
+    onCancel,
+    onOk
+  });
+};
 
-    const teleportClick = (teleport: string) => {
-      showDialog({
-        teleport,
-        title: 'teleport to ' + teleport,
-        content: translate('content2'),
-        noCancelBtn: true,
-        onCancel
-      });
-    };
+const componentClick = () => {
+  visible.value = true;
+};
+const componentvVrticalClick = () => {
+  visible1.value = true;
+};
 
-    return {
-      visible,
-      visible1,
-      baseClick,
-      transparentClick,
-      htmlClick,
-      beforeCloseClick,
-      noTitleClick,
-      componentClick,
-      componentvVrticalClick,
-      tipsClick,
-      verticalClick,
-      teleportClick,
-      translate
-    };
-  }
-});
+const teleportClick = (teleport: string) => {
+  showDialog({
+    teleport,
+    title: 'teleport to ' + teleport,
+    content: translate('content2'),
+    noCancelBtn: true,
+    onCancel
+  });
+};
 </script>
-<style lang="scss"></style>
diff --git a/src/packages/__VUE/dialog/doc.en-US.md b/src/packages/__VUE/dialog/doc.en-US.md
index f455388547..6a04cdb507 100644
--- a/src/packages/__VUE/dialog/doc.en-US.md
+++ b/src/packages/__VUE/dialog/doc.en-US.md
@@ -8,7 +8,7 @@ The popup box component supports function call and component call.
 
 ### Install
 
-```javascript
+```js
 import { createApp, createVNode } from 'vue';
 import { Dialog } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ app.use(Dialog);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Function Use">
     <nut-cell title="Basic Usage" @click="baseClick"></nut-cell>
@@ -32,95 +32,82 @@ app.use(Dialog);
     <nut-cell title="Bottom button vertical use" @click="verticalClick"></nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref, createVNode } from 'vue';
-  import { showDialog } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/dialog/style';
-  export default {
-    setup() {
-      const onCancel = () => {
-        console.log('event cancel');
-      };
-      const onOk = () => {
-        console.log('event ok');
-      };
-      const baseClick = (): void => {
-        showDialog({
-          title: 'Basic spring frame',
-          content: createVNode('span', { style: { color: 'red' } }, 'I can be a custom component'),
-          onCancel,
-          onOk
-        });
-      };
-      const transparentClick = (): void => {
-        showDialog({
-          overlayStyle: { background: 'rgba(0,0,0,0)' },
-          title: 'Transparent Dialog',
-          content: 'Content',
-          onCancel,
-          onOk
-        });
-      };
-      const htmlClick = (): void => {
-        showDialog({
-          title: 'Use html',
-          content:
-            "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
-          onCancel,
-          onOk
-        });
-      };
-      const beforeCloseClick = (): void => {
-        showDialog({
-          title: 'Before Close',
-          content: 'Click confirm to close it in 1 second',
-          onCancel,
-          onOk,
-          beforeClose: (action: string) => {
-            return new Promise((r) => {
-              setTimeout(() => {
-                r(action == 'ok');
-              }, 1000);
-            });
-          }
-        });
-      };
-      const noTitleClick = () => {
-        showDialog({
-          content: 'Content',
-          onCancel,
-          onOk
-        });
-      };
-      const tipsClick = () => {
-        showDialog({
-          title: 'Title',
-          content: 'Function call and component call are supported.',
-          noCancelBtn: true,
-          onCancel,
-          onOk
-        });
-      };
-      const verticalClick = () => {
-        showDialog({
-          title: 'Title',
-          content: 'Support vertical arrangement of bottom buttons.',
-          footerDirection: 'vertical',
-          onCancel,
-          onOk
-        });
-      };
-      return {
-        baseClick,
-        transparentClick,
-        htmlClick,
-        beforeCloseClick,
-        noTitleClick,
-        tipsClick,
-        verticalClick
-      };
+<script setup>
+import { ref, createVNode } from 'vue';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
+const onCancel = () => {
+  console.log('event cancel');
+};
+const onOk = () => {
+  console.log('event ok');
+};
+const baseClick = (): void => {
+  showDialog({
+    title: 'Basic spring frame',
+    content: createVNode('span', { style: { color: 'red' } }, 'I can be a custom component'),
+    onCancel,
+    onOk
+  });
+};
+const transparentClick = (): void => {
+  showDialog({
+    overlayStyle: { background: 'rgba(0,0,0,0)' },
+    title: 'Transparent Dialog',
+    content: 'Content',
+    onCancel,
+    onOk
+  });
+};
+const htmlClick = (): void => {
+  showDialog({
+    title: 'Use html',
+    content:
+      "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
+    onCancel,
+    onOk
+  });
+};
+const beforeCloseClick = (): void => {
+  showDialog({
+    title: 'Before Close',
+    content: 'Click confirm to close it in 1 second',
+    onCancel,
+    onOk,
+    beforeClose: (action: string) => {
+      return new Promise((r) => {
+        setTimeout(() => {
+          r(action == 'ok');
+        }, 1000);
+      });
     }
-  };
+  });
+};
+const noTitleClick = () => {
+  showDialog({
+    content: 'Content',
+    onCancel,
+    onOk
+  });
+};
+const tipsClick = () => {
+  showDialog({
+    title: 'Title',
+    content: 'Function call and component call are supported.',
+    noCancelBtn: true,
+    onCancel,
+    onOk
+  });
+};
+const verticalClick = () => {
+  showDialog({
+    title: 'Title',
+    content: 'Support vertical arrangement of bottom buttons.',
+    footerDirection: 'vertical',
+    onCancel,
+    onOk
+  });
+};
 </script>
 ```
 
@@ -130,7 +117,7 @@ app.use(Dialog);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Template use">
     <nut-cell title="Template use" @click="componentClick"></nut-cell>
@@ -152,21 +139,16 @@ app.use(Dialog);
     </nut-dialog>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const visible1 = ref(false);
-      const componentClick = () => {
-        visible.value = true;
-      };
-      const componentvVrticalClick = () => {
-        visible1.value = true;
-      };
-      return { visible, visible1, componentClick, componentvVrticalClick };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const visible1 = ref(false);
+const componentClick = () => {
+  visible.value = true;
+};
+const componentvVrticalClick = () => {
+  visible1.value = true;
+};
 </script>
 ```
 
@@ -176,7 +158,7 @@ app.use(Dialog);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Teleport use, mount to the specified element node">
     <nut-cell title="body element node" @click="teleportClick('body')"></nut-cell>
@@ -184,28 +166,21 @@ app.use(Dialog);
     <nut-cell title="demo class element node" @click="teleportClick('.demo')"></nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { showDialog } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/dialog/style';
-  export default {
-    setup() {
-      const onCancel = () => {
-        console.log('event cancel');
-      };
-      const teleportClick = (teleport: string) => {
-        showDialog({
-          teleport,
-          title: 'teleport to ' + teleport,
-          content: 'Open the developer tool and take a look at the Elements tab',
-          noCancelBtn: true,
-          onCancel
-        });
-      };
-      return {
-        teleportClick
-      };
-    }
-  };
+<script setup>
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
+const onCancel = () => {
+  console.log('event cancel');
+};
+const teleportClick = (teleport: string) => {
+  showDialog({
+    teleport,
+    title: 'teleport to ' + teleport,
+    content: 'Open the developer tool and take a look at the Elements tab',
+    noCancelBtn: true,
+    onCancel
+  });
+};
 </script>
 ```
 
diff --git a/src/packages/__VUE/dialog/doc.md b/src/packages/__VUE/dialog/doc.md
index 1c2c661e15..9dd50436f3 100644
--- a/src/packages/__VUE/dialog/doc.md
+++ b/src/packages/__VUE/dialog/doc.md
@@ -8,7 +8,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp, createVNode } from 'vue';
 import { Dialog } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ app.use(Dialog);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="函数式调用">
     <nut-cell title="基础弹框" @click="baseClick"></nut-cell>
@@ -32,95 +32,82 @@ app.use(Dialog);
     <nut-cell title="底部按钮 垂直调用" @click="verticalClick"></nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref, createVNode } from 'vue';
-  import { showDialog } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/dialog/style';
-  export default {
-    setup() {
-      const onCancel = () => {
-        console.log('event cancel');
-      };
-      const onOk = () => {
-        console.log('event ok');
-      };
-      const baseClick = (): void => {
-        showDialog({
-          title: '基础弹框',
-          content: createVNode('span', { style: { color: 'red' } }, '我可以是一个自定义组件'),
-          onCancel,
-          onOk
-        });
-      };
-      const transparentClick = (): void => {
-        showDialog({
-          overlayStyle: { background: 'rgba(0,0,0,0)' },
-          title: '透明弹框',
-          content: 'Content',
-          onCancel,
-          onOk
-        });
-      };
-      const htmlClick = (): void => {
-        showDialog({
-          title: '支持富文本 html',
-          content:
-            "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
-          onCancel,
-          onOk
-        });
-      };
-      const beforeCloseClick = (): void => {
-        showDialog({
-          title: '异步关闭',
-          content: '点击确认后，1秒后关闭',
-          onCancel,
-          onOk,
-          beforeClose: (action: string) => {
-            return new Promise((r) => {
-              setTimeout(() => {
-                r(action == 'ok');
-              }, 1000);
-            });
-          }
-        });
-      };
-      const noTitleClick = () => {
-        showDialog({
-          content: '无标题弹框',
-          onCancel,
-          onOk
-        });
-      };
-      const tipsClick = () => {
-        showDialog({
-          title: '温馨提示',
-          content: '支持函数调用和组件调用两种方式。',
-          noCancelBtn: true,
-          onCancel,
-          onOk
-        });
-      };
-      const verticalClick = () => {
-        showDialog({
-          title: '温馨提示',
-          content: '支持底部按钮纵向排列。',
-          footerDirection: 'vertical',
-          onCancel,
-          onOk
-        });
-      };
-      return {
-        baseClick,
-        transparentClick,
-        htmlClick,
-        beforeCloseClick,
-        noTitleClick,
-        tipsClick,
-        verticalClick
-      };
+<script setup>
+import { ref, createVNode } from 'vue';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
+const onCancel = () => {
+  console.log('event cancel');
+};
+const onOk = () => {
+  console.log('event ok');
+};
+const baseClick = (): void => {
+  showDialog({
+    title: '基础弹框',
+    content: createVNode('span', { style: { color: 'red' } }, '我可以是一个自定义组件'),
+    onCancel,
+    onOk
+  });
+};
+const transparentClick = (): void => {
+  showDialog({
+    overlayStyle: { background: 'rgba(0,0,0,0)' },
+    title: '透明弹框',
+    content: 'Content',
+    onCancel,
+    onOk
+  });
+};
+const htmlClick = (): void => {
+  showDialog({
+    title: '支持富文本 html',
+    content:
+      "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
+    onCancel,
+    onOk
+  });
+};
+const beforeCloseClick = (): void => {
+  showDialog({
+    title: '异步关闭',
+    content: '点击确认后，1秒后关闭',
+    onCancel,
+    onOk,
+    beforeClose: (action: string) => {
+      return new Promise((r) => {
+        setTimeout(() => {
+          r(action == 'ok');
+        }, 1000);
+      });
     }
-  };
+  });
+};
+const noTitleClick = () => {
+  showDialog({
+    content: '无标题弹框',
+    onCancel,
+    onOk
+  });
+};
+const tipsClick = () => {
+  showDialog({
+    title: '温馨提示',
+    content: '支持函数调用和组件调用两种方式。',
+    noCancelBtn: true,
+    onCancel,
+    onOk
+  });
+};
+const verticalClick = () => {
+  showDialog({
+    title: '温馨提示',
+    content: '支持底部按钮纵向排列。',
+    footerDirection: 'vertical',
+    onCancel,
+    onOk
+  });
+};
 </script>
 ```
 
@@ -130,7 +117,7 @@ app.use(Dialog);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="标签式使用">
     <nut-cell title="标签式使用" @click="componentClick"></nut-cell>
@@ -152,21 +139,16 @@ app.use(Dialog);
     </nut-dialog>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const visible = ref(false);
-      const visible1 = ref(false);
-      const componentClick = () => {
-        visible.value = true;
-      };
-      const componentvVrticalClick = () => {
-        visible1.value = true;
-      };
-      return { visible, visible1, componentClick, componentvVrticalClick };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const visible1 = ref(false);
+const componentClick = () => {
+  visible.value = true;
+};
+const componentvVrticalClick = () => {
+  visible1.value = true;
+};
 </script>
 ```
 
@@ -176,7 +158,7 @@ app.use(Dialog);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Teleport 使用，挂载到指定节点">
     <nut-cell title="body element node" @click="teleportClick('body')"></nut-cell>
@@ -184,28 +166,21 @@ app.use(Dialog);
     <nut-cell title="demo class element node" @click="teleportClick('.demo')"></nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { showDialog } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/dialog/style';
-  export default {
-    setup() {
-      const onCancel = () => {
-        console.log('event cancel');
-      };
-      const teleportClick = (teleport: string) => {
-        showDialog({
-          teleport,
-          title: 'teleport to ' + teleport,
-          content: '打开开发者工具看一下 Elements Tab',
-          noCancelBtn: true,
-          onCancel
-        });
-      };
-      return {
-        teleportClick
-      };
-    }
-  };
+<script setup>
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
+const onCancel = () => {
+  console.log('event cancel');
+};
+const teleportClick = (teleport: string) => {
+  showDialog({
+    teleport,
+    title: 'teleport to ' + teleport,
+    content: '打开开发者工具看一下 Elements Tab',
+    noCancelBtn: true,
+    onCancel
+  });
+};
 </script>
 ```
 
diff --git a/src/packages/__VUE/dialog/doc.taro.md b/src/packages/__VUE/dialog/doc.taro.md
index 1488d61bdc..cfe80db064 100644
--- a/src/packages/__VUE/dialog/doc.taro.md
+++ b/src/packages/__VUE/dialog/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Dialog } from '@nutui/nutui-taro';
 
@@ -16,112 +16,97 @@ app.use(Dialog);
 
 ### 使用方式
 
-```html
-<nut-cell title="基础弹框" @click="baseClick"></nut-cell>
-<nut-dialog title="基础弹框" content="这是基础弹框。" v-model:visible="visible1" @cancel="onCancel" @ok="onOk" />
-
-<nut-cell title="无标题弹框" @click="noTitleClick"></nut-cell>
-<nut-dialog content="这是无标题弹框。" v-model:visible="visible2" @cancel="onCancel" @ok="onOk" />
-
-<nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
-<nut-dialog
-  no-cancel-btn
-  title="温馨提示"
-  content="这是提示弹框。"
-  v-model:visible="visible3"
-  @cancel="onCancel"
-  @ok="onOk"
-/>
-
-<nut-cell title="底部按钮 垂直调用" @click="verticalClick"></nut-cell>
-<nut-dialog
-  footer-direction="vertical"
-  teleport="#app"
-  title="温馨提示"
-  content="这是提示弹框。"
-  v-model:visible="visible5"
-/>
-
-<nut-cell title="异步关闭" @click="componentClick"></nut-cell>
-<nut-dialog title="异步关闭" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />
-```
-
-```javascript
+:::
+
+```vue
+<template>
+  <nut-cell title="基础弹框" @click="baseClick"></nut-cell>
+  <nut-dialog title="基础弹框" content="这是基础弹框。" v-model:visible="visible1" @cancel="onCancel" @ok="onOk" />
+
+  <nut-cell title="无标题弹框" @click="noTitleClick"></nut-cell>
+  <nut-dialog content="这是无标题弹框。" v-model:visible="visible2" @cancel="onCancel" @ok="onOk" />
+
+  <nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
+  <nut-dialog
+    no-cancel-btn
+    title="温馨提示"
+    content="这是提示弹框。"
+    v-model:visible="visible3"
+    @cancel="onCancel"
+    @ok="onOk"
+  />
+
+  <nut-cell title="底部按钮 垂直调用" @click="verticalClick"></nut-cell>
+  <nut-dialog
+    footer-direction="vertical"
+    teleport="#app"
+    title="温馨提示"
+    content="这是提示弹框。"
+    v-model:visible="visible5"
+  />
+
+  <nut-cell title="异步关闭" @click="componentClick"></nut-cell>
+  <nut-dialog title="异步关闭" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />
+</template>
+
+<script setup>
 import { ref } from 'vue';
-export default {
-  setup() {
-    const visible1 = ref(false);
-    const visible2 = ref(false);
-    const visible3 = ref(false);
-    const visible4 = ref(false);
-    const visible5 = ref(false);
-    const closeContent = ref('');
-    const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
-    const countDown = (second: number) => `倒计时 ${second} 秒`;
-
-    const onCancel = () => {
-      console.log('event cancel');
-    };
-    const onOk = () => {
-      console.log('event ok');
-    };
-    const onOkAsync = () => {
-      sleep()
-        .then(() => {
-          closeContent.value = countDown(2);
-          return sleep();
-        })
-        .then(() => {
-          closeContent.value = countDown(1);
-          return sleep();
-        })
-        .then(() => {
-          closeContent.value = countDown(0);
-        })
-        .then(() => {
-          visible4.value = false;
-        });
-    };
-
-    const baseClick = (): void => {
-      visible1.value = true;
-    };
-    const noTitleClick = () => {
-      visible2.value = true;
-    };
-    const tipsClick = () => {
-      visible3.value = true;
-    };
-
-    const componentClick = () => {
-      closeContent.value = `点击确定时3s后关闭`;
-      visible4.value = true;
-    };
-
-    const verticalClick = () => {
-      visible5.value = true;
-    };
-
-    return {
-      visible1,
-      visible2,
-      visible3,
-      visible4,
-      visible5,
-      onCancel,
-      onOk,
-      closeContent,
-      onOkAsync,
-      baseClick,
-      noTitleClick,
-      componentClick,
-      tipsClick,
-      verticalClick
-    };
-  }
+const visible1 = ref(false);
+const visible2 = ref(false);
+const visible3 = ref(false);
+const visible4 = ref(false);
+const visible5 = ref(false);
+const closeContent = ref('');
+const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
+const countDown = (second: number) => `倒计时 ${second} 秒`;
+
+const onCancel = () => {
+  console.log('event cancel');
+};
+const onOk = () => {
+  console.log('event ok');
+};
+const onOkAsync = () => {
+  sleep()
+    .then(() => {
+      closeContent.value = countDown(2);
+      return sleep();
+    })
+    .then(() => {
+      closeContent.value = countDown(1);
+      return sleep();
+    })
+    .then(() => {
+      closeContent.value = countDown(0);
+    })
+    .then(() => {
+      visible4.value = false;
+    });
+};
+
+const baseClick = (): void => {
+  visible1.value = true;
+};
+const noTitleClick = () => {
+  visible2.value = true;
 };
+const tipsClick = () => {
+  visible3.value = true;
+};
+
+const componentClick = () => {
+  closeContent.value = `点击确定时3s后关闭`;
+  visible4.value = true;
+};
+
+const verticalClick = () => {
+  visible5.value = true;
+};
+</script>
 ```
 
+:::
+
 ## API
 
 ### Props
diff --git a/src/packages/__VUE/drag/demo.vue b/src/packages/__VUE/drag/demo.vue
index d404cf36d3..4d4b527263 100644
--- a/src/packages/__VUE/drag/demo.vue
+++ b/src/packages/__VUE/drag/demo.vue
@@ -26,8 +26,9 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import NutDrag from './index.vue';
+import NutButton from '../button/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('drag');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -54,22 +55,13 @@ const initTranslate = () =>
       limitBoundaries: 'Limit Boundaries'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    function right() {
-      return document.documentElement.clientWidth - 300 - 9;
-    }
-    function bottom() {
-      return document.documentElement.clientHeight - 559;
-    }
-    return {
-      right,
-      bottom,
-      translate
-    };
-  }
-});
+initTranslate();
+const right = () => {
+  return document.documentElement.clientWidth - 300 - 9;
+};
+const bottom = () => {
+  return document.documentElement.clientHeight - 559;
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/drag/doc.en-US.md b/src/packages/__VUE/drag/doc.en-US.md
index 912d618972..282f6d0ad5 100644
--- a/src/packages/__VUE/drag/doc.en-US.md
+++ b/src/packages/__VUE/drag/doc.en-US.md
@@ -6,7 +6,7 @@ Implement draggable arbitrary elements
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Drag } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Drag);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-drag>
     <nut-button type="primary">Button</nut-button>
@@ -32,7 +32,7 @@ app.use(Drag);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
     <nut-button type="primary">Button</nut-button>
@@ -46,7 +46,7 @@ app.use(Drag);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-drag direction="x" :attract="true">
     <nut-button type="primary">Button</nut-button>
@@ -60,39 +60,31 @@ app.use(Drag);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="drag-boundary"></div>
   <nut-drag :boundary="{ top: 100, left: 9, bottom: bottom(), right: right() }" :style="{ top: '100px', left: '50px' }">
     <nut-button type="primary">Button</nut-button>
   </nut-drag>
 </template>
-<script>
-  export default {
-    setup() {
-      function right() {
-        return document.documentElement.clientWidth - 300 - 9;
-      }
-      function bottom() {
-        return document.documentElement.clientHeight - 300;
-      }
-      return {
-        right,
-        bottom
-      };
-    }
-  };
+<script setup>
+const right = () => {
+  return document.documentElement.clientWidth - 300 - 9;
+};
+const bottom = () => {
+  return document.documentElement.clientHeight - 300;
+};
 </script>
 
 <style>
-  .drag-boundary {
-    position: absolute;
-    top: 100px;
-    left: 8px;
-    width: 300px;
-    height: 200px;
-    border: 1px solid red;
-  }
+.drag-boundary {
+  position: absolute;
+  top: 100px;
+  left: 8px;
+  width: 300px;
+  height: 200px;
+  border: 1px solid red;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/drag/doc.md b/src/packages/__VUE/drag/doc.md
index 482712aabd..006bc4c9fb 100644
--- a/src/packages/__VUE/drag/doc.md
+++ b/src/packages/__VUE/drag/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Drag } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Drag);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-drag>
     <nut-button type="primary">触摸移动</nut-button>
@@ -32,7 +32,7 @@ app.use(Drag);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
     <nut-button type="primary">只能X轴拖拽</nut-button>
@@ -46,7 +46,7 @@ app.use(Drag);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-drag direction="x" :attract="true">
     <nut-button type="primary">拖动我</nut-button>
@@ -60,39 +60,31 @@ app.use(Drag);
 
 :::demo
 
-```html
+```vue
 <template>
   <div class="drag-boundary"></div>
   <nut-drag :boundary="{ top: 100, left: 9, bottom: bottom(), right: right() }" :style="{ top: '100px', left: '50px' }">
     <nut-button type="primary">限制拖拽边界</nut-button>
   </nut-drag>
 </template>
-<script>
-  export default {
-    setup() {
-      function right() {
-        return document.documentElement.clientWidth - 300 - 9;
-      }
-      function bottom() {
-        return document.documentElement.clientHeight - 300;
-      }
-      return {
-        right,
-        bottom
-      };
-    }
-  };
+<script setup>
+const right = () => {
+  return document.documentElement.clientWidth - 300 - 9;
+};
+const bottom = () => {
+  return document.documentElement.clientHeight - 300;
+};
 </script>
 
 <style>
-  .drag-boundary {
-    position: absolute;
-    top: 100px;
-    left: 8px;
-    width: 300px;
-    height: 200px;
-    border: 1px solid red;
-  }
+.drag-boundary {
+  position: absolute;
+  top: 100px;
+  left: 8px;
+  width: 300px;
+  height: 200px;
+  border: 1px solid red;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/drag/doc.taro.md b/src/packages/__VUE/drag/doc.taro.md
index 9b694b2da8..89c4bca35f 100644
--- a/src/packages/__VUE/drag/doc.taro.md
+++ b/src/packages/__VUE/drag/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Drag } from '@nutui/nutui-taro';
 
@@ -16,28 +16,32 @@ app.use(Drag);
 
 ### 基础用法
 
-```html
-<nut-drag>
-  <div class="touch-dom">可点击，可拖拽</div>
-</nut-drag>
-```
-
-### 限制拖拽方向
+:::demo
 
-```html
-<nut-drag direction="x">
-  <div class="touch-dom">只能在X轴拖动</div>
-</nut-drag>
+```vue
+<template>
+  <nut-drag>
+    <nut-button type="primary">触摸移动</nut-button>
+  </nut-drag>
+</template>
 ```
 
+:::
+
 ### 限制拖拽方向
 
-```html
-<nut-drag direction="y">
-  <div class="touch-dom">只能在Y轴拖动</div>
-</nut-drag>
+:::demo
+
+```vue
+<template>
+  <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
+    <nut-button type="primary">只能X轴拖拽</nut-button>
+  </nut-drag>
+</template>
 ```
 
+:::
+
 ## API
 
 ### Props
diff --git a/src/packages/__VUE/infiniteloading/demo.vue b/src/packages/__VUE/infiniteloading/demo.vue
index 7a15a76943..e9677adc2b 100644
--- a/src/packages/__VUE/infiniteloading/demo.vue
+++ b/src/packages/__VUE/infiniteloading/demo.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="demo nut-infiniteloading-demo">
-    <nut-tabs v-model="tabsValue" @change="chagetabs">
+    <nut-tabs v-model="data.tabsValue" @change="chagetabs">
       <nut-tab-pane :title="translate('basic')">
         <ul class="infiniteUl">
-          <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
-            <li v-for="(item, index) in defultList" :key="index" class="infiniteLi">{{ item }}</li>
+          <nut-infinite-loading v-model="data.infinityValue" :has-more="hasMore" @load-more="loadMore">
+            <li v-for="(item, index) in data.defaultList" :key="index" class="infiniteLi">{{ item }}</li>
           </nut-infinite-loading>
         </ul>
       </nut-tab-pane>
@@ -12,13 +12,13 @@
       <nut-tab-pane :title="translate('customTxt')">
         <ul class="infiniteUl">
           <nut-infinite-loading
-            v-model="infinityValue2"
+            v-model="data.infinityValue2"
             load-txt="Loading..."
             :load-more-txt="translate('none')"
             :has-more="customHasMore"
             @load-more="customLoadMore"
           >
-            <li v-for="(item, index) in customList" :key="index" class="infiniteLi">{{ item }}</li>
+            <li v-for="(item, index) in data.customList" :key="index" class="infiniteLi">{{ item }}</li>
           </nut-infinite-loading>
         </ul>
       </nut-tab-pane>
@@ -26,8 +26,11 @@
   </div>
 </template>
 
-<script lang="ts">
-import { onMounted, ref, reactive, toRefs, defineComponent } from 'vue';
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue';
+import NutInfiniteLoading from './index.vue';
+import NutTabs from '../tabs/index.vue';
+import NutTabPane from '../tabpane/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('infinite-loading');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -50,98 +53,81 @@ const initTranslate = () =>
     }
   });
 
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const letter: any[] = [
-      'A',
-      'B',
-      'C',
-      'D',
-      'E',
-      'F',
-      'G',
-      'H',
-      'IJ',
-      'K',
-      'L',
-      'M',
-      'N',
-      'O',
-      'P',
-      'Q',
-      'R',
-      'S',
-      'T',
-      'U',
-      'V',
-      'W',
-      'X',
-      'Y',
-      'Z'
-    ];
-
-    const hasMore = ref(true);
-    const customHasMore = ref(true);
-    const refreshHasMore = ref(true);
-
-    const data = reactive({
-      tabsValue: 0,
-      infinityValue: false,
-      infinityValue2: false,
-      defultList: [],
-      customList: [],
-      refreshList: []
-    });
-
-    let cycle = 0;
-    let cycle2 = 0;
-
-    const loadMore = () => {
-      setTimeout(() => {
-        data.defultList = data.defultList.concat(letter);
-        cycle++;
-        if (cycle > 2) hasMore.value = false;
-        data.infinityValue = false;
-      }, 1000);
-    };
-
-    const customLoadMore = () => {
-      setTimeout(() => {
-        data.customList = data.customList.concat(letter);
-        cycle2++;
-
-        console.log(cycle2, data.customList);
-        if (cycle2 > 2) customHasMore.value = false;
-
-        data.infinityValue2 = false;
-      }, 1000);
-    };
-
-    const chagetabs = () => {
-      data.defultList = [].concat(letter);
-      data.customList = [].concat(letter);
-      data.infinityValue2 = false;
-      data.infinityValue = false;
-      customHasMore.value = true;
-      hasMore.value = true;
-    };
-    onMounted(() => {
-      chagetabs();
-    });
-
-    return {
-      loadMore,
-      hasMore,
-      customHasMore,
-      customLoadMore,
-      refreshHasMore,
-      translate,
-      ...toRefs(data),
-      chagetabs
-    };
-  }
+initTranslate();
+const letter: string[] = [
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'IJ',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z'
+];
+
+const hasMore = ref(true);
+const customHasMore = ref(true);
+
+const data = reactive({
+  tabsValue: 0,
+  infinityValue: false,
+  infinityValue2: false,
+  defaultList: [] as string[],
+  customList: [] as string[],
+  refreshList: []
+});
+
+let cycle = 0;
+let cycle2 = 0;
+
+const loadMore = () => {
+  setTimeout(() => {
+    data.defaultList = data.defaultList.concat(letter);
+    cycle++;
+    if (cycle > 2) hasMore.value = false;
+    data.infinityValue = false;
+  }, 1000);
+};
+
+const customLoadMore = () => {
+  setTimeout(() => {
+    data.customList = data.customList.concat(letter);
+    cycle2++;
+
+    console.log(cycle2, data.customList);
+    if (cycle2 > 2) customHasMore.value = false;
+
+    data.infinityValue2 = false;
+  }, 1000);
+};
+
+const chagetabs = () => {
+  data.defaultList = letter.slice();
+  data.customList = letter.slice();
+  data.infinityValue2 = false;
+  data.infinityValue = false;
+  customHasMore.value = true;
+  hasMore.value = true;
+};
+onMounted(() => {
+  chagetabs();
 });
 </script>
 
diff --git a/src/packages/__VUE/notify/demo.vue b/src/packages/__VUE/notify/demo.vue
index aaa33aa141..d80f9c9325 100644
--- a/src/packages/__VUE/notify/demo.vue
+++ b/src/packages/__VUE/notify/demo.vue
@@ -23,10 +23,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
+import NutNotify from './index.vue';
+import { showNotify } from './index';
+import NutCell from '../cell/index.vue';
+import NutCellGroup from '../cellgroup/index.vue';
 import { createComponent } from '@/packages/utils/create';
-import { showNotify } from '../../nutui.vue';
-import { ref, defineComponent } from 'vue';
 const { translate } = createComponent('notify');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -58,59 +61,40 @@ const initTranslate = () =>
       cusBgNotify: 'Customize background and font colors'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const baseNotify = (msg: string) => {
-      showNotify.text(msg, {
-        onClose: () => {
-          console.log('close');
-        },
-        onClick: () => {
-          console.log('click');
-        }
-      });
-    };
-    const primaryNotify = (msg: string) => {
-      showNotify.primary(msg, { duration: 1000 });
-    };
-    const successNotify = (msg: string) => {
-      showNotify.success(msg);
-    };
-    const errorNotify = (msg: string) => {
-      showNotify.danger(msg);
-    };
-    const warningNotify = (msg: string) => {
-      showNotify.warn(msg);
-    };
-    const cusBgNotify = (msg: string) => {
-      showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
-    };
-    const timeNotify = (msg: string) => {
-      showNotify.text(msg, { duration: 1000 });
-    };
-    const positionNotify = (msg: string) => {
-      showNotify.text(msg, { position: 'bottom' });
-    };
-    const show = ref(false);
-    const onClick = () => {
-      show.value = true;
-    };
-    return {
-      baseNotify,
-      primaryNotify,
-      successNotify,
-      errorNotify,
-      warningNotify,
-      cusBgNotify,
-      timeNotify,
-      positionNotify,
-      show,
-      onClick,
-      translate
-    };
-  }
-});
+initTranslate();
+const baseNotify = (msg: string) => {
+  showNotify.text(msg, {
+    onClose: () => {
+      console.log('close');
+    },
+    onClick: () => {
+      console.log('click');
+    }
+  });
+};
+const primaryNotify = (msg: string) => {
+  showNotify.primary(msg, { duration: 1000 });
+};
+const successNotify = (msg: string) => {
+  showNotify.success(msg);
+};
+const errorNotify = (msg: string) => {
+  showNotify.danger(msg);
+};
+const warningNotify = (msg: string) => {
+  showNotify.warn(msg);
+};
+const cusBgNotify = (msg: string) => {
+  showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+};
+const timeNotify = (msg: string) => {
+  showNotify.text(msg, { duration: 1000 });
+};
+const positionNotify = (msg: string) => {
+  showNotify.text(msg, { position: 'bottom' });
+};
+const show = ref(false);
+const onClick = () => {
+  show.value = true;
+};
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/notify/doc.en-US.md b/src/packages/__VUE/notify/doc.en-US.md
index 7b6e72b5e9..9a12c39f75 100644
--- a/src/packages/__VUE/notify/doc.en-US.md
+++ b/src/packages/__VUE/notify/doc.en-US.md
@@ -6,7 +6,7 @@ Show message tips at the top of the page
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Notify } from '@nutui/nutui';
 
@@ -18,31 +18,24 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell is-Link @click="baseNotify('Basic Usage')">Basic Usage</nut-cell>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showNotify } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/notify/style';
-  export default {
-    setup() {
-      const baseNotify = (msg: string) => {
-        showNotify.text(msg, {
-          onClose: () => {
-            console.log('close');
-          },
-          onClick: () => {
-            console.log('click');
-          }
-        });
-      };
-      return {
-        baseNotify
-      };
+<script setup>
+import { ref } from 'vue';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
+const baseNotify = (msg) => {
+  showNotify.text(msg, {
+    onClose: () => {
+      console.log('close');
+    },
+    onClick: () => {
+      console.log('click');
     }
-  };
+  });
+};
 </script>
 ```
 
@@ -52,7 +45,7 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Notify Type">
     <nut-cell is-Link @click="primaryNotify('Primary Notify')">Primary Notify</nut-cell>
@@ -61,32 +54,22 @@ app.use(Notify);
     <nut-cell is-Link @click="warningNotify('Warning Notify')">Warning Notify</nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showNotify } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/notify/style';
-  export default {
-    setup() {
-      const primaryNotify = (msg: string) => {
-        showNotify.primary(msg);
-      };
-      const successNotify = (msg: string) => {
-        showNotify.success(msg);
-      };
-      const errorNotify = (msg: string) => {
-        showNotify.danger(msg);
-      };
-      const warningNotify = (msg: string) => {
-        showNotify.warn(msg);
-      };
-      return {
-        primaryNotify,
-        successNotify,
-        errorNotify,
-        warningNotify
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
+const primaryNotify = (msg) => {
+  showNotify.primary(msg);
+};
+const successNotify = (msg) => {
+  showNotify.success(msg);
+};
+const errorNotify = (msg) => {
+  showNotify.danger(msg);
+};
+const warningNotify = (msg) => {
+  showNotify.warn(msg);
+};
 </script>
 ```
 
@@ -96,7 +79,7 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Custom Style">
     <nut-cell is-Link @click="cusBgNotify('Customize background and font colors')"
@@ -110,28 +93,19 @@ app.use(Notify);
     <nut-cell is-Link @click="positionNotify('Custom Postion')">Custom Postion</nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showNotify } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/notify/style';
-  export default {
-    setup() {
-      const cusBgNotify = (msg: string) => {
-        showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
-      };
-      const timeNotify = (msg: string) => {
-        showNotify.text(msg, { duration: 10000 });
-      };
-      const positionNotify = (msg: string) => {
-        showNotify.text(msg, { position: 'bottom' });
-      };
-      return {
-        cusBgNotify,
-        timeNotify,
-        positionNotify
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
+const cusBgNotify = (msg) => {
+  showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+};
+const timeNotify = (msg) => {
+  showNotify.text(msg, { duration: 10000 });
+};
+const positionNotify = (msg) => {
+  showNotify.text(msg, { position: 'bottom' });
+};
 </script>
 ```
 
@@ -141,7 +115,7 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="Template use">
     <nut-cell is-Link @click="onClick">Template use</nut-cell>
@@ -150,22 +124,14 @@ app.use(Notify);
     </nut-notify>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showNotify } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/notify/style';
-  export default {
-    setup() {
-      const show = ref(false);
-      const onClick = () => {
-        show.value = true;
-      };
-      return {
-        show,
-        onClick
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
+const show = ref(false);
+const onClick = () => {
+  show.value = true;
+};
 </script>
 ```
 
diff --git a/src/packages/__VUE/notify/doc.md b/src/packages/__VUE/notify/doc.md
index 08b952e58b..643ff80a8a 100644
--- a/src/packages/__VUE/notify/doc.md
+++ b/src/packages/__VUE/notify/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Notify } from '@nutui/nutui';
 
@@ -18,31 +18,24 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell is-Link @click="baseNotify('基础用法')">基础用法</nut-cell>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showNotify } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/notify/style';
-  export default {
-    setup() {
-      const baseNotify = (msg: string) => {
-        showNotify.text(msg, {
-          onClose: () => {
-            console.log('close');
-          },
-          onClick: () => {
-            console.log('click');
-          }
-        });
-      };
-      return {
-        baseNotify
-      };
+<script setup>
+import { ref } from 'vue';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
+const baseNotify = (msg) => {
+  showNotify.text(msg, {
+    onClose: () => {
+      console.log('close');
+    },
+    onClick: () => {
+      console.log('click');
     }
-  };
+  });
+};
 </script>
 ```
 
@@ -52,7 +45,7 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="通知类型">
     <nut-cell is-Link @click="primaryNotify('主要通知')">主要通知</nut-cell>
@@ -61,32 +54,22 @@ app.use(Notify);
     <nut-cell is-Link @click="warningNotify('警告通知')">警告通知</nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showNotify } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/notify/style';
-  export default {
-    setup() {
-      const primaryNotify = (msg: string) => {
-        showNotify.primary(msg);
-      };
-      const successNotify = (msg: string) => {
-        showNotify.success(msg);
-      };
-      const errorNotify = (msg: string) => {
-        showNotify.danger(msg);
-      };
-      const warningNotify = (msg: string) => {
-        showNotify.warn(msg);
-      };
-      return {
-        primaryNotify,
-        successNotify,
-        errorNotify,
-        warningNotify
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
+const primaryNotify = (msg) => {
+  showNotify.primary(msg);
+};
+const successNotify = (msg) => {
+  showNotify.success(msg);
+};
+const errorNotify = (msg) => {
+  showNotify.danger(msg);
+};
+const warningNotify = (msg) => {
+  showNotify.warn(msg);
+};
 </script>
 ```
 
@@ -96,7 +79,7 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="自定义背景色和字体颜色">
     <nut-cell is-Link @click="cusBgNotify('自定义背景色和字体颜色')">自定义背景色和字体颜色</nut-cell>
@@ -108,28 +91,19 @@ app.use(Notify);
     <nut-cell is-Link @click="positionNotify('自定义位置')">自定义位置</nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showNotify } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/notify/style';
-  export default {
-    setup() {
-      const cusBgNotify = (msg: string) => {
-        showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
-      };
-      const timeNotify = (msg: string) => {
-        showNotify.text(msg, { duration: 10000 });
-      };
-      const positionNotify = (msg: string) => {
-        showNotify.text(msg, { position: 'bottom' });
-      };
-      return {
-        cusBgNotify,
-        timeNotify,
-        positionNotify
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
+const cusBgNotify = (msg) => {
+  showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+};
+const timeNotify = (msg) => {
+  showNotify.text(msg, { duration: 10000 });
+};
+const positionNotify = (msg) => {
+  showNotify.text(msg, { position: 'bottom' });
+};
 </script>
 ```
 
@@ -139,7 +113,7 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="组件调用">
     <nut-cell is-Link @click="onClick">组件调用</nut-cell>
@@ -148,22 +122,14 @@ app.use(Notify);
     </nut-notify>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  import { showNotify } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/notify/style';
-  export default {
-    setup() {
-      const show = ref(false);
-      const onClick = () => {
-        show.value = true;
-      };
-      return {
-        show,
-        onClick
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
+const show = ref(false);
+const onClick = () => {
+  show.value = true;
+};
 </script>
 ```
 
diff --git a/src/packages/__VUE/notify/doc.taro.md b/src/packages/__VUE/notify/doc.taro.md
index d0f530c303..177cf5c67b 100644
--- a/src/packages/__VUE/notify/doc.taro.md
+++ b/src/packages/__VUE/notify/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Notify } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group :title="baseState.state.desc">
     <nut-cell is-Link @click="baseState.methods.cellClick">基础用法</nut-cell>
@@ -30,31 +30,22 @@ app.use(Notify);
     />
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const onClosed = () => console.log('closed');
-      const onClick = () => console.log('click');
-
-      const baseState = {
-        state: reactive({
-          show: false,
-          desc: '基础用法'
-        }),
-        methods: {
-          cellClick() {
-            baseState.state.show = true;
-          }
-        }
-      };
-      return {
-        baseState,
-        onClosed,
-        onClick
-      };
+<script setup>
+import { reactive } from 'vue';
+const onClosed = () => console.log('closed');
+const onClick = () => console.log('click');
+
+const baseState = {
+  state: reactive({
+    show: false,
+    desc: '基础用法'
+  }),
+  methods: {
+    cellClick() {
+      baseState.state.show = true;
     }
-  };
+  }
+};
 </script>
 ```
 
@@ -64,7 +55,7 @@ app.use(Notify);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell-group title="通知类型">
     <nut-notify
@@ -74,57 +65,47 @@ app.use(Notify);
       v-model:visible="notifyState.state.show"
       :msg="notifyState.state.desc"
     />
-    <nut-cell is-Link @click="notifyState.methods.cellClick('primary','主要通知')">主要通知</nut-cell>
-    <nut-cell is-Link @click="notifyState.methods.cellClick('success','成功通知')">成功通知</nut-cell>
-    <nut-cell is-Link @click="notifyState.methods.cellClick('danger','危险通知')">危险通知</nut-cell>
-    <nut-cell is-Link @click="notifyState.methods.cellClick('warning','警告通知')">警告通知</nut-cell>
+    <nut-cell is-Link @click="notifyState.methods.cellClick('primary', '主要通知')">主要通知</nut-cell>
+    <nut-cell is-Link @click="notifyState.methods.cellClick('success', '成功通知')">成功通知</nut-cell>
+    <nut-cell is-Link @click="notifyState.methods.cellClick('danger', '危险通知')">危险通知</nut-cell>
+    <nut-cell is-Link @click="notifyState.methods.cellClick('warning', '警告通知')">警告通知</nut-cell>
   </nut-cell-group>
 </template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const onClosed = () => console.log('closed');
-      const onClick = () => console.log('click');
-
-      const notifyState = {
-        state: reactive({
-          show: false,
-          desc: '',
-          type: 'primary'
-        }),
-        methods: {
-          cellClick(type: string, desc: string) {
-            notifyState.state.show = true;
-            notifyState.state.type = type;
-            notifyState.state.desc = desc;
-          }
-        }
-      };
-      const customState = {
-        state: reactive({
-          show: false,
-          desc: '',
-          type: 'primary',
-          duration: 3000
-        }),
-        methods: {
-          cellClick(type: string, desc: string, duration: number) {
-            customState.state.show = true;
-            customState.state.type = type;
-            customState.state.desc = desc;
-            customState.state.duration = duration;
-          }
-        }
-      };
-      return {
-        notifyState,
-        customState,
-        onClosed,
-        onClick
-      };
+<script setup>
+import { reactive } from 'vue';
+const onClosed = () => console.log('closed');
+const onClick = () => console.log('click');
+
+const notifyState = {
+  state: reactive({
+    show: false,
+    desc: '',
+    type: 'primary'
+  }),
+  methods: {
+    cellClick(type: string, desc: string) {
+      notifyState.state.show = true;
+      notifyState.state.type = type;
+      notifyState.state.desc = desc;
     }
-  };
+  }
+};
+const customState = {
+  state: reactive({
+    show: false,
+    desc: '',
+    type: 'primary',
+    duration: 3000
+  }),
+  methods: {
+    cellClick(type: string, desc: string, duration: number) {
+      customState.state.show = true;
+      customState.state.type = type;
+      customState.state.desc = desc;
+      customState.state.duration = duration;
+    }
+  }
+};
 </script>
 ```
 
diff --git a/src/packages/__VUE/pullrefresh/demo.vue b/src/packages/__VUE/pullrefresh/demo.vue
index 4a8067657c..ff2a050f52 100644
--- a/src/packages/__VUE/pullrefresh/demo.vue
+++ b/src/packages/__VUE/pullrefresh/demo.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo">
-    <nut-tabs v-model="tabsValue">
+    <nut-tabs v-model="data.tabsValue">
       <nut-tab-pane :title="translate('basic')">
         <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
           <div class="pull-block">{{ translate('content') }}</div>
@@ -23,7 +23,7 @@
       <nut-tab-pane :title="translate('listenerTxt')">
         <div class="parentpage">
           <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
-            <div v-for="item in refreshList2" :key="item" class="pull-letter">
+            <div v-for="item in data.refreshList2" :key="item" class="pull-letter">
               <div>{{ item }}</div>
             </div>
           </nut-pull-refresh>
@@ -33,10 +33,12 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, reactive, toRefs, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import NutPullRefresh from './index.vue';
+import NutTabs from '../tabs/index.vue';
+import NutTabPane from '../tabpane/index.vue';
 import { createComponent } from '@/packages/utils/create';
-
 const { translate } = createComponent('pull-refresh');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '@/packages/nutui.vue';
@@ -67,68 +69,54 @@ const initTranslate = () =>
     }
   });
 
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-
-    const letter: any[] = [
-      'A',
-      'B',
-      'C',
-      'D',
-      'E',
-      'F',
-      'G',
-      'H',
-      'IJ',
-      'K',
-      'L',
-      'M',
-      'N',
-      'O',
-      'P',
-      'Q',
-      'R',
-      'S',
-      'T',
-      'U',
-      'V',
-      'W',
-      'X',
-      'Y',
-      'Z'
-    ];
-
-    const refresh = ref(false);
-    const refresh2 = ref(false);
-
-    const data = reactive({
-      tabsValue: 0,
-      customList: [],
-      refreshList: new Array(10).fill(11),
-
-      refreshList2: ([] as Array<any>).concat(letter)
-    });
-
-    const refreshFun = () => {
-      setTimeout(() => {
-        refresh.value = false;
-        refresh2.value = false;
+initTranslate();
+
+const letter: any[] = [
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'IJ',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z'
+];
+
+const refresh = ref(false);
+const refresh2 = ref(false);
+
+const data = reactive({
+  tabsValue: 0,
+  customList: [],
+  refreshList: new Array(10).fill(11),
+  refreshList2: ([] as Array<any>).concat(letter)
+});
 
-        showToast.text('刷新成功！');
-      }, 3000);
-    };
+const refreshFun = () => {
+  setTimeout(() => {
+    refresh.value = false;
+    refresh2.value = false;
 
-    return {
-      refreshFun,
-      refresh,
-      refresh2,
-      translate,
-      ...toRefs(data)
-    };
-  }
-});
+    showToast.text('刷新成功！');
+  }, 3000);
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/swipe/demo.vue b/src/packages/__VUE/swipe/demo.vue
index 58f00a776d..bafad1d796 100644
--- a/src/packages/__VUE/swipe/demo.vue
+++ b/src/packages/__VUE/swipe/demo.vue
@@ -78,6 +78,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import NutSwipe from './index.vue';
+import NutSwipeGroup from '../swipegroup/index.vue';
+import NutCell from '../cell/index.vue';
+import NutButton from '../button/index.vue';
+import NutInputNumber from '../inputnumber/index.vue';
+import NutSwitch from '../switch/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('swipe');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
diff --git a/src/packages/__VUE/switch/demo.vue b/src/packages/__VUE/switch/demo.vue
index bc0b68303e..3ce531f6a6 100644
--- a/src/packages/__VUE/switch/demo.vue
+++ b/src/packages/__VUE/switch/demo.vue
@@ -2,7 +2,7 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked1" />
+      <nut-switch v-model="data.checked1" />
     </nut-cell>
 
     <h2>{{ translate('title1') }}</h2>
@@ -16,17 +16,17 @@
 
     <h2>{{ translate('title2') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked2" disable />
+      <nut-switch v-model="data.checked2" disable />
     </nut-cell>
 
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked3" loading active-color="red" />
+      <nut-switch v-model="data.checked3" loading active-color="red" />
     </nut-cell>
 
     <h2>{{ translate('title4') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked4" @change="change" />
+      <nut-switch v-model="data.checked4" @change="change" />
     </nut-cell>
 
     <h2>{{ translate('title5') }}</h2>
@@ -36,13 +36,13 @@
 
     <h2>{{ translate('title6') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked6" active-color="blue" />
+      <nut-switch v-model="data.checked6" active-color="blue" />
     </nut-cell>
 
     <h2>{{ translate('title7') }}</h2>
     <nut-cell>
       <nut-switch
-        v-model="checked7"
+        v-model="data.checked7"
         :active-text="translate('text1')"
         :inactive-text="translate('text2')"
         class="switch-demo1"
@@ -51,7 +51,7 @@
 
     <h2>{{ translate('title8') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked8" loading>
+      <nut-switch v-model="data.checked8" loading>
         <template #icon>
           <Loading name="loading" />
         </template>
@@ -60,8 +60,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, reactive, toRefs, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import NutSwitch from './index.vue';
+import NutCell from '../cell/index.vue';
 import { createComponent } from '@/packages/utils/create';
 import { Loading } from '@nutui/icons-vue';
 import { showToast } from '@/packages/nutui.vue';
@@ -96,51 +98,31 @@ const initTranslate = () =>
       text2: 'Closed'
     }
   });
-export default defineComponent({
-  components: { Loading },
-  setup() {
-    initTranslate();
-    const data = reactive({
-      checked1: true,
-      checked2: true,
-      checked3: true,
-      checked4: true,
-      checked6: true,
-      checked7: true,
-      checked8: true
-    });
-    const checkedAsync = ref(true);
-    const loadingAsync = ref(false);
-
-    // const checkedStr = ref('开');
+initTranslate();
+const data = reactive({
+  checked1: true,
+  checked2: true,
+  checked3: true,
+  checked4: true,
+  checked6: true,
+  checked7: true,
+  checked8: true
+});
+const checkedAsync = ref(true);
+const loadingAsync = ref(false);
 
-    const change = (value: boolean) => {
-      showToast.text(`value：${value}`);
-    };
+// const checkedStr = ref('开');
 
-    const changeAsync = (value: boolean) => {
-      showToast.text(`after 2 second： ${value}`);
-      loadingAsync.value = true;
-      setTimeout(() => {
-        checkedAsync.value = value;
-        loadingAsync.value = false;
-      }, 2000);
-    };
+const change = (value: boolean) => {
+  showToast.text(`value：${value}`);
+};
 
-    return {
-      ...toRefs(data),
-      checkedAsync,
-      // checkedStr,
-      loadingAsync,
-      change,
-      changeAsync,
-      translate
-    };
-  }
-});
+const changeAsync = (value: boolean) => {
+  showToast.text(`after 2 second： ${value}`);
+  loadingAsync.value = true;
+  setTimeout(() => {
+    checkedAsync.value = value;
+    loadingAsync.value = false;
+  }, 2000);
+};
 </script>
-<style lang="scss" scoped>
-.switch-demo1 {
-  // width: 50px;
-}
-</style>
diff --git a/src/packages/__VUE/toast/demo.vue b/src/packages/__VUE/toast/demo.vue
index 91024d2d15..1cd6ecf3b5 100644
--- a/src/packages/__VUE/toast/demo.vue
+++ b/src/packages/__VUE/toast/demo.vue
@@ -20,12 +20,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onUnmounted } from 'vue';
+import { showToast } from './index';
+import NutCell from '../cell/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('toast');
-import { showToast } from '@/packages/nutui.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { onUnmounted, defineComponent } from 'vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -53,66 +54,48 @@ const initTranslate = () =>
       toastTransparent: 'Loading Transparent Cover'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const textToast = (msg: string) => {
-      showToast.text(msg);
-    };
-    const titleToast = (msg: string) => {
-      showToast.text(msg, {
-        title: translate('toastTitle')
-      });
-    };
-    const successToast = (msg: string) => {
-      showToast.success(msg);
-    };
-    const errorToast = (msg: string) => {
-      showToast.fail(msg);
-    };
-    const warningToast = (msg: string) => {
-      showToast.warn(msg);
-    };
-    const loadingToast = (msg: string) => {
-      showToast.loading(msg);
-    };
-    let t: any;
-    const NoToast = (msg: string) => {
-      t = showToast.text(msg, {
-        duration: 0
-      });
-    };
-
-    onUnmounted(() => {
-      t && t.hide();
-    });
+initTranslate();
+const textToast = (msg: string) => {
+  showToast.text(msg);
+};
+const titleToast = (msg: string) => {
+  showToast.text(msg, {
+    title: translate('toastTitle')
+  });
+};
+const successToast = (msg: string) => {
+  showToast.success(msg);
+};
+const errorToast = (msg: string) => {
+  showToast.fail(msg);
+};
+const warningToast = (msg: string) => {
+  showToast.warn(msg);
+};
+const loadingToast = (msg: string) => {
+  showToast.loading(msg);
+};
+let t: any;
+const NoToast = (msg: string) => {
+  t = showToast.text(msg, {
+    duration: 0
+  });
+};
 
-    const BottomToast = (msg: string) => {
-      showToast.text(msg, {
-        id: 'taset11',
-        center: false,
-        bottom: '10%'
-      });
-    };
-    const NoLoading = (msg: string) => {
-      showToast.loading(msg, {
-        cover: true
-      });
-    };
-    return {
-      textToast,
-      titleToast,
-      successToast,
-      errorToast,
-      warningToast,
-      loadingToast,
-      NoToast,
-      NoLoading,
-      BottomToast,
-      translate
-    };
-  }
+onUnmounted(() => {
+  t && t.hide();
 });
-</script>
 
-<style lang="scss" scoped></style>
+const BottomToast = (msg: string) => {
+  showToast.text(msg, {
+    id: 'taset11',
+    center: false,
+    bottom: '10%'
+  });
+};
+const NoLoading = (msg: string) => {
+  showToast.loading(msg, {
+    cover: true
+  });
+};
+</script>
diff --git a/src/packages/__VUE/toast/doc.en-US.md b/src/packages/__VUE/toast/doc.en-US.md
index 228e0174ed..8dbb487f06 100644
--- a/src/packages/__VUE/toast/doc.en-US.md
+++ b/src/packages/__VUE/toast/doc.en-US.md
@@ -6,7 +6,7 @@ for light tips.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Toast } from '@nutui/nutui';
 
@@ -18,23 +18,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Text" is-link @click="textToast('text message~')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.text(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.text(msg);
+};
 </script>
 ```
 
@@ -44,25 +37,18 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast Title" is-link @click="textToast('title message~')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.text(msg, {
-          title: 'title'
-        });
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.text(msg, {
+    title: 'Toast Title'
+  });
+};
 </script>
 ```
 
@@ -72,23 +58,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast Success" is-link @click="textToast('Success')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.success(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.success(msg);
+};
 </script>
 ```
 
@@ -98,23 +77,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast Fail" is-link @click="textToast('Fail')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.fail(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.fail(msg);
+};
 </script>
 ```
 
@@ -124,23 +96,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast Warn" is-link @click="textToast('Warn')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.warn(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.warn(msg);
+};
 </script>
 ```
 
@@ -150,23 +115,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast Loading" is-link @click="textToast('Loading')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.loading(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.loading(msg);
+};
 </script>
 ```
 
@@ -176,25 +134,18 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast Not Disappear" is-link @click="textToast('Toast Not Disappear')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.text(msg, {
-          duration: 0
-        });
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.text(msg, {
+    duration: 0
+  });
+};
 </script>
 ```
 
@@ -204,26 +155,19 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Custom Bottom Height" is-link @click="textToast('Custom Bottom Height')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.text(msg, {
-          center: false,
-          bottom: '10%'
-        });
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.text(msg, {
+    center: false,
+    bottom: '10%'
+  });
+};
 </script>
 ```
 
@@ -233,25 +177,18 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Loading with transparent cover" is-link @click="textToast('Loading')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.loading(msg, {
-          cover: true
-        });
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.loading(msg, {
+    cover: true
+  });
+};
 </script>
 ```
 
@@ -259,7 +196,7 @@ app.use(Toast);
 
 ### Support import and use in JS modules
 
-```javascript
+```js
 import { showToast } from '@nutui/nutui';
 import '@nutui/nutui/dist/packages/toast/style';
 showToast.text('use in js module');
diff --git a/src/packages/__VUE/toast/doc.md b/src/packages/__VUE/toast/doc.md
index b3e84e6ee0..895fc41701 100644
--- a/src/packages/__VUE/toast/doc.md
+++ b/src/packages/__VUE/toast/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Toast } from '@nutui/nutui';
 
@@ -18,23 +18,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Text 文字提示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.text(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.text(msg);
+};
 </script>
 ```
 
@@ -44,25 +37,18 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast 标题展示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.text(msg, {
-          title: '标题文字'
-        });
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.text(msg, {
+    title: '标题文字'
+  });
+};
 </script>
 ```
 
@@ -72,23 +58,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast 成功提示" is-link @click="textToast('成功提示')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.success(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.success(msg);
+};
 </script>
 ```
 
@@ -98,23 +77,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast 失败提示" is-link @click="textToast('失败提示')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.fail(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.fail(msg);
+};
 </script>
 ```
 
@@ -124,23 +96,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast 警告提示" is-link @click="textToast('警告提示')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.warn(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.warn(msg);
+};
 </script>
 ```
 
@@ -150,23 +115,16 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast 加载提示" is-link @click="textToast('加载中')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.loading(msg);
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.loading(msg);
+};
 </script>
 ```
 
@@ -176,25 +134,18 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast不消失" is-link @click="textToast('Toast不消失')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.text(msg, {
-          duration: 0
-        });
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.text(msg, {
+    duration: 0
+  });
+};
 </script>
 ```
 
@@ -204,26 +155,19 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Toast 自定义底部高度" is-link @click="textToast('自定义距离')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.text(msg, {
-          center: false,
-          bottom: '10%'
-        });
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.text(msg, {
+    center: false,
+    bottom: '10%'
+  });
+};
 </script>
 ```
 
@@ -233,25 +177,18 @@ app.use(Toast);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-cell title="Loading带透明罩" is-link @click="textToast('加载中')"></nut-cell>
 </template>
-<script>
-  import { showToast } from '@nutui/nutui';
-  import '@nutui/nutui/dist/packages/toast/style';
-  export default {
-    setup() {
-      const textToast = (msg) => {
-        showToast.loading(msg, {
-          cover: true
-        });
-      };
-      return {
-        textToast
-      };
-    }
-  };
+<script setup>
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
+const textToast = (msg) => {
+  showToast.loading(msg, {
+    cover: true
+  });
+};
 </script>
 ```
 
@@ -259,7 +196,7 @@ app.use(Toast);
 
 ### 支持在 JS 模块中导入使用
 
-```javascript
+```js
 import { showToast } from '@nutui/nutui';
 import '@nutui/nutui/dist/packages/toast/style';
 showToast.text('在js模块中使用');
diff --git a/src/packages/__VUE/toast/doc.taro.md b/src/packages/__VUE/toast/doc.taro.md
index d12b03cfbb..d231af07b9 100644
--- a/src/packages/__VUE/toast/doc.taro.md
+++ b/src/packages/__VUE/toast/doc.taro.md
@@ -8,7 +8,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Toast } from '@nutui/nutui-taro';
 
@@ -18,66 +18,54 @@ app.use(Toast);
 
 ### 基础用法
 
-```html
-<nut-toast
-  :msg="page.state.msg"
-  v-model:visible="page.state.show"
-  :type="page.state.type"
-  @closed="page.methods.onClosed"
-  :cover="page.state.cover"
-/>
-<nut-cell title="Text 文字提示" is-link @click="page.methods.openToast('text','网络失败，请稍后再试~')"></nut-cell>
-<nut-cell
-  title="Title 标题文字"
-  is-link
-  @click="page.methods.openToast('text', '网络失败，请稍后再试~',false,'标题文字')"
-></nut-cell>
-<nut-cell
-  title="Text 自定义位置"
-  is-link
-  @click="page.methods.openToast('text', '自定义位置',false,'','20%',false)"
-></nut-cell>
-<nut-cell title="Success 成功提示" is-link @click="page.methods.openToast('success','成功提示')"></nut-cell>
-<nut-cell title="Error 失败提示" is-link @click="page.methods.openToast('fail','失败提示')"></nut-cell>
-<nut-cell title="Warning 警告提示" is-link @click="page.methods.openToast('warn','警告提示')"></nut-cell>
-<nut-cell title="Loading 加载提示" is-link @click="page.methods.openToast('loading','加载中')"></nut-cell>
-<nut-cell title="Loading 带白色背景遮罩" is-link @click="page.methods.openToast('loading','加载中',true)"></nut-cell>
-```
-
-```javascript
+:::
+
+```vue
+<template>
+  <nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" @closed="onClosed" :cover="state.cover" />
+  <nut-cell title="Text 文字提示" is-link @click="openToast('text', '网络失败，请稍后再试~')"></nut-cell>
+  <nut-cell
+    title="Title 标题文字"
+    is-link
+    @click="openToast('text', '网络失败，请稍后再试~', false, '标题文字')"
+  ></nut-cell>
+  <nut-cell
+    title="Text 自定义位置"
+    is-link
+    @click="openToast('text', '自定义位置', false, '', '20%', false)"
+  ></nut-cell>
+  <nut-cell title="Success 成功提示" is-link @click="openToast('success', '成功提示')"></nut-cell>
+  <nut-cell title="Error 失败提示" is-link @click="openToast('fail', '失败提示')"></nut-cell>
+  <nut-cell title="Warning 警告提示" is-link @click="openToast('warn', '警告提示')"></nut-cell>
+  <nut-cell title="Loading 加载提示" is-link @click="openToast('loading', '加载中')"></nut-cell>
+  <nut-cell title="Loading 带白色背景遮罩" is-link @click="openToast('loading', '加载中', true)"></nut-cell>
+</template>
+<script setup>
 import { reactive } from 'vue';
-export default {
-  setup() {
-    const page = {
-      state: reactive({
-        msg: 'toast',
-        type: 'text',
-        show: false,
-        cover: false,
-        title: '',
-        bottom: '',
-        center: true
-      }),
-      methods: {
-        openToast: (type: string, msg: string, cover: boolean = false) => {
-          page.state.show = true;
-          page.state.msg = msg;
-          page.state.type = type;
-          page.state.cover = cover;
-          page.state.title = title;
-          page.state.bottom = bottom;
-          page.state.center = center;
-        },
-        onClosed: () => console.log('closed')
-      }
-    };
-    return {
-      page
-    };
-  }
+const state = reactive({
+  msg: 'toast',
+  type: 'text',
+  show: false,
+  cover: false,
+  title: '',
+  bottom: '',
+  center: true
+});
+const openToast = (type, msg, cover = false) => {
+  state.show = true;
+  state.msg = msg;
+  state.type = type;
+  state.cover = cover;
+  state.title = title;
+  state.bottom = bottom;
+  state.center = center;
 };
+const onClosed = () => console.log('closed');
+</script>
 ```
 
+:::
+
 ## API
 
 ### Props