diff --git a/packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue
index 656f251d40..4f64b0b684 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue
@@ -1,75 +1,62 @@
 <template>
   <div class="demo actionsheet" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
-    <h2>基础用法</h2>
-    <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible1')">
-      <span><label>基础用法</label></span>
-      <div v-html="state.val1"></div>
-    </nut-cell>
-    <nut-cell :showIcon="true" :isLink="true" @click="switchActionSheet('isVisible2')">
-      <span><label>展示取消按钮</label></span>
-      <div v-html="state.val2"></div>
-    </nut-cell>
-    <nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
-      <span><label>展示描述信息</label></span>
-      <div v-html="state.val3"></div>
-    </nut-cell>
-    <h2>选项状态</h2>
 
-    <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
-      <span><label>选项状态</label></span>
-      <div v-html="state.val4"></div>
+    <h2>基础用法</h2>
+    <nut-cell is-link @click="switchActionSheet('isVisible1')">
+      <div>基础用法</div>
+      <div>{{ state.val1 }}</div>
     </nut-cell>
+    <nut-action-sheet v-model:visible="state.isVisible1" :menu-items="menuItemsOne" @choose="chooseItem" />
 
-    <h2>自定义</h2>
-
-    <nut-cell :isLink="true" @click="switchActionSheet('isVisible5')">
-      <span><label>自定义内容</label></span>
-      <div></div>
+    <nut-cell is-link @click="switchActionSheet('isVisible2')">
+      <div>展示取消按钮</div>
+      <div>{{ state.val2 }}</div>
     </nut-cell>
-
-    <!-- demo 基础用法 -->
-    <nut-action-sheet
-      :safe-area-inset-bottom="true"
-      v-model:visible="state.isVisible1"
-      :menu-items="menuItemsOne"
-      @choose="chooseItem"
-    >
-    </nut-action-sheet>
-    <!-- demo(带取消按钮） -->
     <nut-action-sheet
       v-model:visible="state.isVisible2"
       cancel-txt="取消"
       :menu-items="menuItemsOne"
       @choose="chooseItemTwo"
-    >
-    </nut-action-sheet>
-    <!-- 展示描述信息 -->
+    />
+
+    <nut-cell is-link @click="switchActionSheet('isVisible3')">
+      <div>展示描述信息</div>
+      <div>{{ state.val3 }}</div>
+    </nut-cell>
     <nut-action-sheet
       v-model:visible="state.isVisible3"
       title="标题"
-      :description="state.desc"
+      description="这是一段描述信息"
       :menu-items="menuItemsTwo"
       @choose="chooseItemThree"
       cancel-txt="取消"
-    >
-    </nut-action-sheet>
-    <!-- demo 选项状态-->
+    />
+
+    <h2>选项状态</h2>
+    <nut-cell is-link @click="switchActionSheet('isVisible4')">
+      <div>选项状态</div>
+      <div>{{ state.val4 }}</div>
+    </nut-cell>
     <nut-action-sheet
       v-model:visible="state.isVisible4"
       cancel-txt="取消"
       :menu-items="menuItemsThree"
       @choose="chooseItemFour"
-      :choose-tag-value="state.chooseTagValue"
-    ></nut-action-sheet>
-    <!-- 自定义面板-->
+      choose-tag-value="选中选项"
+    />
+
+    <h2>自定义内容</h2>
+    <nut-cell is-link @click="switchActionSheet('isVisible5')">
+      <div>自定义内容</div>
+    </nut-cell>
     <nut-action-sheet v-model:visible="state.isVisible5" title="标题">
       <div class="custom-content">自定义内容</div>
     </nut-action-sheet>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
@@ -80,96 +67,73 @@ interface Item {
   disable?: boolean;
   loading?: boolean;
 }
-export default {
-  props: {},
-  components: {
-    Header
+const env = Taro.getEnv();
+const state = reactive({
+  isVisible1: false,
+  isVisible2: false,
+  isVisible3: false,
+  isVisible4: false,
+  isVisible5: false,
+  val1: '',
+  val2: '',
+  val3: '',
+  val4: ''
+});
+const menuItemsOne: Item[] = [
+  {
+    name: '选项一'
   },
-  setup() {
-    const env = Taro.getEnv();
-    const state = reactive({
-      isVisible1: false,
-      isVisible2: false,
-      isVisible3: false,
-      isVisible4: false,
-      isVisible5: false,
-      val1: '',
-      val2: '',
-      val3: '',
-      val4: '',
-      desc: '这是一段描述信息',
-      chooseTagValue: '选中选项'
-    });
-    const menuItemsOne: Item[] = [
-      {
-        name: '选项一'
-      },
-      {
-        name: '选项二'
-      },
-      {
-        name: '选项三'
-      }
-    ];
-    const menuItemsTwo: Item[] = [
-      {
-        name: '选项一'
-      },
-      {
-        name: '选项二'
-      },
-      {
-        name: '选项三',
-        color: 'red',
-        subname: '描述信息'
-      }
-    ];
-    const menuItemsThree: Item[] = [
-      {
-        name: '选中选项'
-      },
-      {
-        name: '禁用选项',
-        disable: true
-      },
-      {
-        name: '加载选项',
-        loading: true
-      }
-    ];
-    const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4') => {
-      state[param] = !state[param];
-    };
-
-    const chooseItem = (itemParams: any) => {
-      console.log(itemParams, 'itemParams');
-      state.val1 = itemParams.name;
-    };
-
-    function chooseItemTwo(itemParams: Item) {
-      state.val2 = itemParams.name;
-    }
-    function chooseItemThree(itemParams: Item) {
-      state.val3 = itemParams.name;
-    }
-    function chooseItemFour(itemParams: Item) {
-      state.val4 = itemParams.name;
-    }
-
-    return {
-      state,
-      menuItemsOne,
-      menuItemsTwo,
-      menuItemsThree,
-      chooseItem,
-      chooseItemTwo,
-      chooseItemThree,
-      chooseItemFour,
-      switchActionSheet,
-      env
-    };
+  {
+    name: '选项二'
+  },
+  {
+    name: '选项三'
+  }
+];
+const menuItemsTwo: Item[] = [
+  {
+    name: '选项一'
+  },
+  {
+    name: '选项二'
+  },
+  {
+    name: '选项三',
+    color: 'red',
+    subname: '描述信息'
   }
+];
+const menuItemsThree: Item[] = [
+  {
+    name: '选中选项'
+  },
+  {
+    name: '禁用选项',
+    disable: true
+  },
+  {
+    name: '加载选项',
+    loading: true
+  }
+];
+const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4' | 'isVisible5') => {
+  state[param] = !state[param];
+};
+
+const chooseItem = (itemParams: any) => {
+  console.log(itemParams, 'itemParams');
+  state.val1 = itemParams.name;
 };
+
+function chooseItemTwo(itemParams: Item) {
+  state.val2 = itemParams.name;
+}
+function chooseItemThree(itemParams: Item) {
+  state.val3 = itemParams.name;
+}
+function chooseItemFour(itemParams: Item) {
+  state.val4 = itemParams.name;
+}
 </script>
 
 <style lang="scss">
diff --git a/src/packages/__VUE/actionsheet/demo.vue b/src/packages/__VUE/actionsheet/demo.vue
index f93207c818..1118a81a86 100644
--- a/src/packages/__VUE/actionsheet/demo.vue
+++ b/src/packages/__VUE/actionsheet/demo.vue
@@ -1,59 +1,27 @@
 <template>
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
-    <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible1')">
-      <span
-        ><label>{{ translate('basic') }}</label></span
-      >
-      <div v-html="state.val1"></div>
+    <nut-cell is-link @click="switchActionSheet('isVisible1')">
+      <div>{{ translate('basic') }}</div>
+      <div>{{ state.val1 }}</div>
     </nut-cell>
-    <nut-cell :showIcon="true" :isLink="true" @click="switchActionSheet('isVisible2')">
-      <span
-        ><label>{{ translate('showCancelButton') }}</label></span
-      >
-      <div v-html="state.val2"></div>
-    </nut-cell>
-    <nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
-      <span
-        ><label>{{ translate('showDescription') }}</label></span
-      >
-      <div v-html="state.val3"></div>
-    </nut-cell>
-    <h2>{{ translate('optionStatus') }}</h2>
+    <nut-action-sheet v-model:visible="state.isVisible1" :menu-items="menuItemsOne" @choose="chooseItem" />
 
-    <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
-      <span
-        ><label>{{ translate('optionStatus') }}</label></span
-      >
-      <div v-html="state.val4"></div>
+    <nut-cell is-link @click="switchActionSheet('isVisible2')">
+      <div>{{ translate('showCancelButton') }}</div>
+      <div>{{ state.val2 }}</div>
     </nut-cell>
-
-    <h2>{{ translate('customContent') }}</h2>
-
-    <nut-cell :isLink="true" @click="switchActionSheet('isVisible5')">
-      <span
-        ><label>{{ translate('customContent') }}</label></span
-      >
-      <div></div>
-    </nut-cell>
-
-    <!-- demo 基础用法 -->
-    <nut-action-sheet
-      :safe-area-inset-bottom="true"
-      v-model:visible="state.isVisible1"
-      :menu-items="menuItemsOne"
-      @choose="chooseItem"
-    >
-    </nut-action-sheet>
-    <!-- demo(带取消按钮） -->
     <nut-action-sheet
       v-model:visible="state.isVisible2"
       :cancel-txt="translate('cancelTxt')"
       :menu-items="menuItemsOne"
       @choose="chooseItemTwo"
-    >
-    </nut-action-sheet>
-    <!-- 展示描述信息 -->
+    />
+
+    <nut-cell is-link @click="switchActionSheet('isVisible3')">
+      <div>{{ translate('showDescription') }}</div>
+      <div>{{ state.val3 }}</div>
+    </nut-cell>
     <nut-action-sheet
       v-model:visible="state.isVisible3"
       :title="translate('title')"
@@ -61,25 +29,33 @@
       :menu-items="menuItemsTwo"
       @choose="chooseItemThree"
       :cancel-txt="translate('cancelTxt')"
-    >
-    </nut-action-sheet>
-    <!-- demo 选项状态-->
+    />
+
+    <h2>{{ translate('optionStatus') }}</h2>
+    <nut-cell is-link @click="switchActionSheet('isVisible4')">
+      <div>{{ translate('optionStatus') }}</div>
+      <div>{{ state.val4 }}</div>
+    </nut-cell>
     <nut-action-sheet
       v-model:visible="state.isVisible4"
       :cancel-txt="translate('cancelTxt')"
       :menu-items="menuItemsThree"
       @choose="chooseItemFour"
       :choose-tag-value="chooseTagValue"
-    ></nut-action-sheet>
-    <!-- 自定义面板-->
+    />
+
+    <h2>{{ translate('customContent') }}</h2>
+    <nut-cell is-link @click="switchActionSheet('isVisible5')">
+      <div>{{ translate('customContent') }}</div>
+    </nut-cell>
     <nut-action-sheet v-model:visible="state.isVisible5" :title="translate('title')">
       <div class="custom-content">{{ translate('customContent') }}</div>
     </nut-action-sheet>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('action-sheet');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -127,102 +103,77 @@ interface Item {
   disable?: boolean;
   loading?: boolean;
 }
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const state = reactive({
-      isVisible1: false,
-      isVisible2: false,
-      isVisible3: false,
-      isVisible4: false,
-      isVisible5: false,
-      val1: '',
-      val2: '',
-      val3: '',
-      val4: ''
-    });
-    const chooseTagValue = computed(() => translate('checkOption'));
-    const desc = computed(() => translate('showDesc'));
-    const menuItemsOne = computed(() => [
-      {
-        name: translate('optionOne')
-      },
-      {
-        name: translate('optionTwo')
-      },
-      {
-        name: translate('optionThree')
-      }
-    ]);
-    const menuItemsTwo = computed(() => [
-      {
-        name: translate('optionOne')
-      },
-      {
-        name: translate('optionTwo')
-      },
-      {
-        name: translate('optionThree'),
-        color: 'red',
-        subname: translate('desc')
-      }
-    ]);
-    const menuItemsThree = computed(() => [
-      {
-        name: translate('checkOption')
-      },
-      {
-        name: translate('disableOption'),
-        disable: true
-      },
-      {
-        name: translate('loadOptions'),
-        loading: true
-      }
-    ]);
-    const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4') => {
-      state[param] = !state[param];
-    };
-
-    const chooseItem = (itemParams: any) => {
-      state.val1 = itemParams.name;
-    };
+initTranslate();
+const state = reactive({
+  isVisible1: false,
+  isVisible2: false,
+  isVisible3: false,
+  isVisible4: false,
+  isVisible5: false,
+  val1: '',
+  val2: '',
+  val3: '',
+  val4: ''
+});
+const chooseTagValue = computed(() => translate('checkOption'));
+const desc = computed(() => translate('showDesc'));
+const menuItemsOne = computed(() => [
+  {
+    name: translate('optionOne')
+  },
+  {
+    name: translate('optionTwo')
+  },
+  {
+    name: translate('optionThree')
+  }
+]);
+const menuItemsTwo = computed(() => [
+  {
+    name: translate('optionOne')
+  },
+  {
+    name: translate('optionTwo')
+  },
+  {
+    name: translate('optionThree'),
+    color: 'red',
+    subname: translate('desc')
+  }
+]);
+const menuItemsThree = computed(() => [
+  {
+    name: translate('checkOption')
+  },
+  {
+    name: translate('disableOption'),
+    disable: true
+  },
+  {
+    name: translate('loadOptions'),
+    loading: true
+  }
+]);
+const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4' | 'isVisible5') => {
+  state[param] = !state[param];
+};
 
-    function chooseItemTwo(itemParams: Item) {
-      state.val2 = itemParams.name;
-    }
-    function chooseItemThree(itemParams: Item) {
-      state.val3 = itemParams.name;
-    }
-    function chooseItemFour(itemParams: Item) {
-      state.val4 = itemParams.name;
-    }
+const chooseItem = (itemParams: any) => {
+  state.val1 = itemParams.name;
+};
 
-    return {
-      state,
-      menuItemsOne,
-      menuItemsTwo,
-      menuItemsThree,
-      chooseTagValue,
-      desc,
-      translate,
-      chooseItem,
-      chooseItemTwo,
-      chooseItemThree,
-      chooseItemFour,
-      switchActionSheet
-    };
-  }
-});
+function chooseItemTwo(itemParams: Item) {
+  state.val2 = itemParams.name;
+}
+function chooseItemThree(itemParams: Item) {
+  state.val3 = itemParams.name;
+}
+function chooseItemFour(itemParams: Item) {
+  state.val4 = itemParams.name;
+}
 </script>
 
 <style lang="scss" scoped>
-.custom-wrap {
-  padding: 110px 0;
-  text-align: center;
-}
-
 .nut-cell {
   justify-content: space-between;
 }
diff --git a/src/packages/__VUE/actionsheet/doc.en-US.md b/src/packages/__VUE/actionsheet/doc.en-US.md
index 0d70ccb561..cd30535044 100644
--- a/src/packages/__VUE/actionsheet/doc.en-US.md
+++ b/src/packages/__VUE/actionsheet/doc.en-US.md
@@ -6,7 +6,7 @@ Action menu panel that pops up from the bottom.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { ActionSheet } from '@nutui/nutui';
 
@@ -18,48 +18,35 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>Basic Usage</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>Basic Usage</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo Basic Usage -->
-  <nut-action-sheet v-model:visible="state.isVisible" :menu-items="menuItems" @choose="chooseItem"> </nut-action-sheet>
+  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" @choose="choose" />
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: 'option one'
-        },
-        {
-          name: 'option two'
-        },
-        {
-          name: 'option three'
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'option one'
+  },
+  {
+    name: 'optione two'
+  },
+  {
+    name: 'option three'
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -69,49 +56,36 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>Show Cancel Button</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>Show Cancel Button</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo Show Cancel Button -->
-  <nut-action-sheet v-model:visible="state.isVisible" :menu-items="menuItems" cancel-txt="cancel" @choose="chooseItem">
+  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" cancel-txt="取消" @choose="choose">
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: 'option one'
-        },
-        {
-          name: 'option two'
-        },
-        {
-          name: 'option three'
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'option one'
+  },
+  {
+    name: 'option two'
+  },
+  {
+    name: 'option three'
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -121,56 +95,43 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>Show Description</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>Show Description</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo Show Description -->
   <nut-action-sheet
-    v-model:visible="state.isVisible"
+    v-model:visible="visible"
     cancel-txt="cancel"
     description="This is a presentation"
     :menu-items="menuItems"
-    @choose="chooseItem"
+    @choose="choose"
   >
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: 'option one'
-        },
-        {
-          name: 'option two'
-        },
-        {
-          name: 'option three',
-          subname: 'Description'
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'option one'
+  },
+  {
+    name: 'option two'
+  },
+  {
+    name: 'option three',
+    subname: 'Description'
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -180,53 +141,40 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>Option Status</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>Option Status</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo Option Status -->
   <nut-action-sheet
-    v-model:visible="state.isVisible"
+    v-model:visible="visible"
     :menu-items="menuItems"
     choose-tag-value="Shading Options"
-    @choose="chooseItem"
+    @choose="choose"
     cancel-txt="cancel"
   >
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: 'Shading Options'
-        },
-        {
-          name: 'Disable option',
-          disable: true
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'Shading Options'
+  },
+  {
+    name: 'Disable option',
+    disable: true
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -236,37 +184,27 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>Custom Content</label></span>
+  <nut-cell is-link @click="click">
+    <div>Custom Content</div>
   </nut-cell>
-  <nut-action-sheet v-model:visible="state.isVisible" title="title">
+  <nut-action-sheet v-model:visible="visible" title="标题">
     <div class="custom-content">Custom Content</div>
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      return {
-        state,
-        switchActionSheet
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const click = (param) => {
+  visible.value = !visible.value;
+};
 </script>
 <style>
-  .custom-content {
-    padding: 10px 10px 160px;
-  }
+.custom-content {
+  padding: 10px 10px 160px;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/actionsheet/doc.md b/src/packages/__VUE/actionsheet/doc.md
index b80be3f3bd..95434d6c5e 100644
--- a/src/packages/__VUE/actionsheet/doc.md
+++ b/src/packages/__VUE/actionsheet/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { ActionSheet } from '@nutui/nutui';
 
@@ -18,48 +18,35 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>基础用法</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>基础用法</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo 基础用法 -->
-  <nut-action-sheet v-model:visible="state.isVisible" :menu-items="menuItems" @choose="chooseItem"> </nut-action-sheet>
+  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" @choose="choose" />
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        },
-        {
-          name: '选项三'
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: '选项一'
+  },
+  {
+    name: '选项二'
+  },
+  {
+    name: '选项三'
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -69,49 +56,36 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>展示取消按钮</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>展示取消按钮</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo 展示取消按钮 -->
-  <nut-action-sheet v-model:visible="state.isVisible" :menu-items="menuItems" cancel-txt="取消" @choose="chooseItem">
+  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" cancel-txt="取消" @choose="choose">
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        },
-        {
-          name: '选项三'
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: '选项一'
+  },
+  {
+    name: '选项二'
+  },
+  {
+    name: '选项三'
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -121,56 +95,43 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>展示描述信息</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>展示描述信息</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo 展示描述信息 -->
   <nut-action-sheet
-    v-model:visible="state.isVisible"
+    v-model:visible="visible"
     cancel-txt="取消"
     description="这是一段展示信息"
     :menu-items="menuItems"
-    @choose="chooseItem"
+    @choose="choose"
   >
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        },
-        {
-          name: '选项三',
-          subname: '描述信息'
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: '选项一'
+  },
+  {
+    name: '选项二'
+  },
+  {
+    name: '选项三',
+    subname: '描述信息'
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -180,53 +141,40 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>选项状态</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>选项状态</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo 选项状态 -->
   <nut-action-sheet
-    v-model:visible="state.isVisible"
+    v-model:visible="visible"
     :menu-items="menuItems"
     choose-tag-value="着色选项"
-    @choose="chooseItem"
+    @choose="choose"
     cancel-txt="取消"
   >
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: '着色选项'
-        },
-        {
-          name: '禁用选项',
-          disable: true
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: '着色选项'
+  },
+  {
+    name: '禁用选项',
+    disable: true
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -236,37 +184,27 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>自定义内容</label></span>
+  <nut-cell is-link @click="click">
+    <div>自定义内容</div>
   </nut-cell>
-  <nut-action-sheet v-model:visible="state.isVisible" title="标题">
+  <nut-action-sheet v-model:visible="visible" title="标题">
     <div class="custom-content">自定义内容</div>
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      return {
-        state,
-        switchActionSheet
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const click = (param) => {
+  visible.value = !visible.value;
+};
 </script>
 <style>
-  .custom-content {
-    padding: 10px 10px 160px;
-  }
+.custom-content {
+  padding: 10px 10px 160px;
+}
 </style>
 ```
 
diff --git a/src/packages/__VUE/actionsheet/doc.taro.md b/src/packages/__VUE/actionsheet/doc.taro.md
index 09931affa6..7500b82698 100644
--- a/src/packages/__VUE/actionsheet/doc.taro.md
+++ b/src/packages/__VUE/actionsheet/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { ActionSheet } from '@nutui/nutui-taro';
 
@@ -18,49 +18,35 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible1')">
-    <span><label>基础用法</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>基础用法</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo 基础用法 -->
-  <nut-action-sheet v-model:visible="state.isVisible1" :menu-items="menuItemsOne" @choose="chooseItem">
-  </nut-action-sheet>
+  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" @choose="choose" />
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible1: false,
-        val: ''
-      });
-      const menuItemsOne = [
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        },
-        {
-          name: '选项三'
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible1 = !state.isVisible1;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItemsOne,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: '选项一'
+  },
+  {
+    name: '选项二'
+  },
+  {
+    name: '选项三'
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -70,49 +56,36 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>展示取消按钮</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>展示取消按钮</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo 展示取消按钮 -->
-  <nut-action-sheet v-model:visible="state.isVisible" :menu-items="menuItems" cancel-txt="取消" @choose="chooseItem">
+  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" cancel-txt="取消" @choose="choose">
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        },
-        {
-          name: '选项三'
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: '选项一'
+  },
+  {
+    name: '选项二'
+  },
+  {
+    name: '选项三'
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -122,56 +95,43 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>展示描述信息</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>展示描述信息</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo 展示描述信息 -->
   <nut-action-sheet
-    v-model:visible="state.isVisible"
+    v-model:visible="visible"
     cancel-txt="取消"
     description="这是一段展示信息"
     :menu-items="menuItems"
-    @choose="chooseItem"
+    @choose="choose"
   >
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        },
-        {
-          name: '选项三',
-          subname: '描述信息'
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: '选项一'
+  },
+  {
+    name: '选项二'
+  },
+  {
+    name: '选项三',
+    subname: '描述信息'
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -181,53 +141,40 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>选项状态</label></span>
-    <div v-html="state.val"></div>
+  <nut-cell is-link @click="click">
+    <div>选项状态</div>
+    <div>{{ val }}</div>
   </nut-cell>
-  <!-- demo 选项状态 -->
   <nut-action-sheet
-    v-model:visible="state.isVisible"
+    v-model:visible="visible"
     :menu-items="menuItems"
     choose-tag-value="着色选项"
-    @choose="chooseItem"
+    @choose="choose"
     cancel-txt="取消"
   >
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const menuItems = [
-        {
-          name: '着色选项'
-        },
-        {
-          name: '禁用选项',
-          disable: true
-        }
-      ];
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      const chooseItem = (itemParams) => {
-        state.val = itemParams.name;
-      };
-      return {
-        state,
-        switchActionSheet,
-        menuItems,
-        chooseItem
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: '着色选项'
+  },
+  {
+    name: '禁用选项',
+    disable: true
+  }
+];
+const click = (param) => {
+  visible.value = !visible.value;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
 </script>
 ```
 
@@ -237,37 +184,27 @@ app.use(ActionSheet);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible')">
-    <span><label>自定义内容</label></span>
+  <nut-cell is-link @click="click">
+    <div>自定义内容</div>
   </nut-cell>
-  <nut-action-sheet v-model:visible="state.isVisible" title="标题">
+  <nut-action-sheet v-model:visible="visible" title="标题">
     <div class="custom-content">自定义内容</div>
   </nut-action-sheet>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        isVisible: false,
-        val: ''
-      });
-      const switchActionSheet = (param) => {
-        state.isVisible = !state.isVisible;
-      };
-      return {
-        state,
-        switchActionSheet
-      };
-    }
-  };
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+const val = ref('');
+const click = (param) => {
+  visible.value = !visible.value;
+};
 </script>
 <style>
-  .custom-content {
-    padding: 10px 10px 160px;
-  }
+.custom-content {
+  padding: 10px 10px 160px;
+}
 </style>
 ```