Repository: Tencent/tdesign-mobile-vue
Pull request #462 (2022-11-04 03:32:31)

docs(action-sheet): update doc and demo
### 🤔 这个 PR 的性质是？

- [x] 文档改进
- [x] 演示代码改进


### 🔗 相关 Issue

#413 

### 📝 更新日志

- docs(action-sheet): 更新示例代码


Patch:
diff --git a/src/action-sheet/demos/grid-multiple.vue b/src/action-sheet/demos/grid-multiple.vue
new file mode 100644
index 00000000..a0df4e6e
--- /dev/null
+++ b/src/action-sheet/demos/grid-multiple.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="action-sheet-demo">
+    <t-button block variant="outline" size="large" @click="visible = true">宫格型-多页</t-button>
+  </div>
+  <t-action-sheet
+    v-model="visible"
+    type="grid"
+    :items="items"
+    :count="count"
+    @selected="handleSelected"
+    @cancel="handleCancel"
+  >
+  </t-action-sheet>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ActionSheetItem } from '../type';
+
+const items = ref([
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+]);
+const visible = ref(false);
+const count = ref(8);
+
+const handleSelected = (selected: ActionSheetItem, selectedIndex: number) => {
+  console.log(selected, selectedIndex);
+};
+const handleCancel = (): void => {
+  console.log('cancel');
+};
+</script>
+
+<style lang="less" scoped>
+.action-sheet-demo {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/action-sheet/demos/grid.vue b/src/action-sheet/demos/grid.vue
index f9500136..316db1fb 100644
--- a/src/action-sheet/demos/grid.vue
+++ b/src/action-sheet/demos/grid.vue
@@ -1,79 +1,45 @@
 <template>
-  <div class="action-sheet-base">
-    <t-cell>
-      <t-button variant="outline" size="large" @click="handleShowGrid(8)">显示</t-button>
-    </t-cell>
-    <t-cell>
-      <t-button variant="outline" size="large" @click="handleShowGrid(4)">每页显示4个</t-button>
-    </t-cell>
-    <t-action-sheet
-      v-model="visible"
-      type="grid"
-      :items="items"
-      :count="count"
-      @selected="handleSelected"
-      @cancel="handleCancel"
-    >
-    </t-action-sheet>
+  <div class="action-sheet-demo">
+    <t-button block variant="outline" size="large" @click="visible = true">宫格型</t-button>
   </div>
+  <t-action-sheet
+    v-model="visible"
+    type="grid"
+    :items="items"
+    :count="count"
+    @selected="handleSelected"
+    @cancel="handleCancel"
+  >
+  </t-action-sheet>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import { ActionSheetItem } from '../type';
 
-export default defineComponent({
-  data() {
-    return {
-      visible: false,
-      items: [
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-      ],
-      count: 8,
-    };
-  },
-  methods: {
-    handleSelected(selected: ActionSheetItem, selectedIndex: number) {
-      console.log(selected, selectedIndex);
-    },
-    handleCancel() {
-      console.log('cancel');
-    },
-    handleShowGrid(count: number) {
-      this.count = count;
-      this.visible = true;
-    },
-    meunIconStyle(bg: string) {
-      return {
-        width: '36px',
-        height: '36px',
-        'margin-bottom': '4px',
-        'background-size': 'contain',
-        'background-position': 'center',
-        'background-repeat': 'no-repeat',
-        backgroundImage: `url(${bg})`,
-      };
-    },
-  },
-});
+const items = ref([
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+  { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
+]);
+const visible = ref(false);
+const count = ref(8);
+
+const handleSelected = (selected: ActionSheetItem, selectedIndex: number) => {
+  console.log(selected, selectedIndex);
+};
+const handleCancel = (): void => {
+  console.log('cancel');
+};
 </script>
 
-<style lang="less">
-.action-sheet-base {
-  .meun-icon {
-    width: 36px;
-    height: 36px;
-    margin-bottom: 4px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
+<style lang="less" scoped>
+.action-sheet-demo {
+  margin-bottom: 16px;
 }
 </style>
diff --git a/src/action-sheet/demos/list.vue b/src/action-sheet/demos/list.vue
index 04e6b630..e20f9274 100644
--- a/src/action-sheet/demos/list.vue
+++ b/src/action-sheet/demos/list.vue
@@ -1,50 +1,30 @@
 <template>
-  <div class="action-sheet-base">
-    <t-cell>
-      <t-button variant="outline" size="large" @click="visible = true">显示</t-button>
-    </t-cell>
-    <t-cell>
-      <t-button variant="outline" size="large" @click="visible1 = true">隐藏取消选项</t-button>
-    </t-cell>
-    <t-cell>
-      <t-button variant="outline" size="large" @click="visible2 = true">自定义颜色</t-button>
-    </t-cell>
-    <t-action-sheet v-model="visible" :items="items" @selected="handleSelected" @cancel="handleCancel" />
-    <t-action-sheet
-      v-model="visible1"
-      :items="items"
-      :show-cancel="false"
-      @selected="handleSelected"
-      @cancel="handleCancel"
-    />
-    <t-action-sheet v-model="visible2" :items="items1" @selected="handleSelected" @cancel="handleCancel" />
+  <div class="action-sheet-demo">
+    <t-button block variant="outline" size="large" @click="visible = true">列表型</t-button>
   </div>
+  <t-action-sheet v-model="visible" :items="items" @selected="handleSelected" @cancel="handleCancel" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import { ActionSheetItem } from '../type';
 
-export default defineComponent({
-  data() {
-    return {
-      visible: false,
-      visible1: false,
-      visible2: false,
-      items: ['按钮一', '按钮二', { label: '失效按钮', disabled: true }, { label: '告警按钮', color: 'red' }],
-      items1: [
-        { label: '确定', color: '#0052d9' },
-        { label: '删除', color: 'red' },
-      ],
-    };
-  },
-  methods: {
-    handleSelected(selected: ActionSheetItem, selectedIndex: number) {
-      console.log(selected, selectedIndex);
-    },
-    handleCancel() {
-      console.log('cancel');
-    },
-  },
-});
+const visible = ref(false);
+const items = [
+  '默认按钮',
+  { label: '自定义按钮', color: '#0052D9' },
+  { label: '失效按钮', disabled: true },
+  { label: '告警按钮', color: '#E34D59' },
+];
+const handleSelected = (selected: ActionSheetItem, selectedIndex: number) => {
+  console.log(selected, selectedIndex);
+};
+const handleCancel = (): void => {
+  console.log('cancel');
+};
 </script>
+<style lang="less" scoped>
+.action-sheet-demo {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/action-sheet/demos/mobile.vue b/src/action-sheet/demos/mobile.vue
index 9493c390..44637947 100644
--- a/src/action-sheet/demos/mobile.vue
+++ b/src/action-sheet/demos/mobile.vue
@@ -1,107 +1,19 @@
 <template>
-  <div class="tdesign-mobile-demo">
+  <div class="tdesign-mobile-demo" :style="{ 'background-color': '#fff', height: '100vh' }">
     <h1 class="title">ActionSheet 动作面板</h1>
-    <p class="summary">从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。</p>
-    <tdesign-demo-block title="类型" summary="列表型">
-      <div class="action-sheet-demo">
-        <t-button block variant="outline" size="large" @click="visible = true">列表型</t-button>
-      </div>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="宫格型">
-      <div class="action-sheet-demo">
-        <t-button block variant="outline" size="large" @click="handleShowGridLine(6)">宫格型-单页宫格</t-button>
-        <t-button block variant="outline" size="large" @click="handleShowGrid(6)">宫格型-多页宫格</t-button>
-      </div>
+    <p class="summary">底部弹起的模态面板，包含与当前情境相关的多个选项。</p>
+    <tdesign-demo-block title="01 类型" summary="列表型">
+      <ListDemo />
+      <GridDemo />
+      <GridMultipleDemo />
     </tdesign-demo-block>
   </div>
-
-  <t-action-sheet v-model="visible" :items="items" @selected="handleSelected" @cancel="handleCancel" />
-  <t-action-sheet
-    v-model="visible1"
-    :items="items"
-    :show-cancel="false"
-    @selected="handleSelected"
-    @cancel="handleCancel"
-  />
-  <t-action-sheet
-    v-model="visible2"
-    type="grid"
-    :items="items2"
-    :count="count"
-    @selected="handleSelected"
-    @cancel="handleCancel"
-  >
-  </t-action-sheet>
-  <t-action-sheet
-    v-model="visible3"
-    type="grid"
-    :items="items3"
-    :count="count"
-    @selected="handleSelected"
-    @cancel="handleCancel"
-  >
-  </t-action-sheet>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { ActionSheetItem } from '../type';
-
-export default defineComponent({
-  data() {
-    return {
-      visible: false,
-      visible1: false,
-      visible2: false,
-      visible3: false,
-      items: [
-        '默认按钮',
-        { label: '自定义按钮', color: '#0052D9' },
-        { label: '失效按钮', disabled: true },
-        { label: '告警按钮', color: '#E34D59' },
-      ],
-      items1: [
-        { label: '确定', color: '#0052d9' },
-        { label: '删除', color: 'red' },
-      ],
-      items2: [
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-      ],
-      items3: [
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-        { label: '文字', icon: 'https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png' },
-      ],
-      count: 8,
-    };
-  },
-  methods: {
-    handleSelected(selected: ActionSheetItem, selectedIndex: number) {
-      console.log(selected, selectedIndex);
-    },
-    handleCancel(): void {
-      console.log('cancel');
-    },
-    handleShowGridLine(count: number) {
-      this.count = count;
-      this.visible2 = true;
-    },
-    handleShowGrid(count: number) {
-      this.count = count;
-      this.visible3 = true;
-    },
-  },
-});
+<script lang="ts" setup>
+import ListDemo from './list.vue';
+import GridDemo from './grid.vue';
+import GridMultipleDemo from './grid-multiple.vue';
 </script>
 
 <style lang="less">


Test patch:
diff --git a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
index 352775da..e02ef582 100644
--- a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,72 +1,29 @@
 // Vitest Snapshot v1
 
-exports[`ActionSheet > ActionSheet gridVue demo works fine 1`] = `
+exports[`ActionSheet > ActionSheet gridMultipleVue demo works fine 1`] = `
 <div
-  class="action-sheet-base"
+  data-v-app=""
 >
+  
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
-  >
-    <div
-      class="t-cell__left-icon"
-    >
-      <!--v-if-->
-      <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__note"
-    >
-      
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
-        role="button"
-      >
-        <!---->
-        <span
-          class="t-button__text"
-        >
-          
-          显示
-          
-        </span>
-      </button>
-      
-    </div>
-    <!--v-if-->
-  </div>
-  <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="action-sheet-demo"
+    data-v-1719f7aa=""
   >
-    <div
-      class="t-cell__left-icon"
-    >
-      <!--v-if-->
-      <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__note"
+    <button
+      aria-disabled="false"
+      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      data-v-1719f7aa=""
+      role="button"
     >
-      
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
-        role="button"
+      <!---->
+      <span
+        class="t-button__text"
       >
-        <!---->
-        <span
-          class="t-button__text"
-        >
-          
-          每页显示4个
-          
-        </span>
-      </button>
-      
-    </div>
-    <!--v-if-->
+        
+        宫格型-多页
+        
+      </span>
+    </button>
   </div>
   <!--teleport start-->
   <div
@@ -376,334 +333,324 @@ exports[`ActionSheet > ActionSheet gridVue demo works fine 1`] = `
                   
                 </div>
               </div>
-              
-            </div>
-            <!--v-if-->
-          </div>
-          
-          <!--v-if-->
-          <button
-            class="t-action-sheet__action"
-          >
-            取消
-          </button>
-          
-        </div>
-        
-      </div>
-    </transition-stub>
-  </div>
-  <!--teleport end-->
-</div>
-`;
-
-exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
-<div
-  class="action-sheet-base"
->
-  <div
-    class="t-cell t-cell--middle t-cell--bordered"
-  >
-    <div
-      class="t-cell__left-icon"
-    >
-      <!--v-if-->
-      <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__note"
-    >
-      
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
-        role="button"
-      >
-        <!---->
-        <span
-          class="t-button__text"
-        >
-          
-          显示
-          
-        </span>
-      </button>
-      
-    </div>
-    <!--v-if-->
-  </div>
-  <div
-    class="t-cell t-cell--middle t-cell--bordered"
-  >
-    <div
-      class="t-cell__left-icon"
-    >
-      <!--v-if-->
-      <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__note"
-    >
-      
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
-        role="button"
-      >
-        <!---->
-        <span
-          class="t-button__text"
-        >
-          
-          隐藏取消选项
-          
-        </span>
-      </button>
-      
-    </div>
-    <!--v-if-->
-  </div>
-  <div
-    class="t-cell t-cell--middle t-cell--bordered"
-  >
-    <div
-      class="t-cell__left-icon"
-    >
-      <!--v-if-->
-      <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__note"
-    >
-      
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
-        role="button"
-      >
-        <!---->
-        <span
-          class="t-button__text"
-        >
-          
-          自定义颜色
-          
-        </span>
-      </button>
-      
-    </div>
-    <!--v-if-->
-  </div>
-  <!--teleport start-->
-  <div
-    class="t-popup t-action-sheet"
-  >
-    <transition-stub
-      appear="false"
-      css="true"
-      name="fade"
-      persisted="false"
-    >
-      <transition-stub
-        appear="false"
-        css="true"
-        name="t-overlay"
-        persisted="true"
-      >
-        <div
-          class="t-overlay"
-          style="z-index: 1000; transition-duration: 300ms; display: none;"
-        >
-          
-          
-        </div>
-      </transition-stub>
-    </transition-stub>
-    <transition-stub
-      appear="false"
-      css="true"
-      name="slide-bottom"
-      persisted="true"
-    >
-      <div
-        class="t-popup--content t-popup--content-bottom"
-        style="display: none;"
-      >
-        
-        <div
-          class="t-action-sheet__panel t-action-sheet__panel-list"
-        >
-          <!-- @ts-ignore -->
-          <div
-            class="t-action-sheet__menu"
-          >
-            
-            <button
-              class="t-action-sheet__cell"
-            >
-              
-              <div
-                class="t-action-sheet__cell-text"
-              >
-                按钮一
-              </div>
-              
-            </button>
-            <button
-              class="t-action-sheet__cell"
-            >
-              
-              <div
-                class="t-action-sheet__cell-text"
-              >
-                按钮二
-              </div>
-              
-            </button>
-            <button
-              class="t-action-sheet__cell"
-              disabled=""
-            >
-              
-              <div
-                class="t-action-sheet__cell-text"
-              >
-                失效按钮
-              </div>
-              
-            </button>
-            <button
-              class="t-action-sheet__cell"
-            >
-              
               <div
-                class="t-action-sheet__cell-text"
-                style="color: red;"
+                class="t-action-sheet__menu"
               >
-                告警按钮
-              </div>
-              
-            </button>
-            
-          </div>
-          
-          <div
-            class="t-action-sheet__separation"
-          />
-          <button
-            class="t-action-sheet__action"
-          >
-            取消
-          </button>
-          
-        </div>
-        
-      </div>
-    </transition-stub>
-  </div>
-  <!--teleport end-->
-  <!--teleport start-->
-  <div
-    class="t-popup t-action-sheet"
-  >
-    <transition-stub
-      appear="false"
-      css="true"
-      name="fade"
-      persisted="false"
-    >
-      <transition-stub
-        appear="false"
-        css="true"
-        name="t-overlay"
-        persisted="true"
-      >
-        <div
-          class="t-overlay"
-          style="z-index: 1000; transition-duration: 300ms; display: none;"
-        >
-          
-          
-        </div>
-      </transition-stub>
-    </transition-stub>
-    <transition-stub
-      appear="false"
-      css="true"
-      name="slide-bottom"
-      persisted="true"
-    >
-      <div
-        class="t-popup--content t-popup--content-bottom"
-        style="display: none;"
-      >
-        
-        <div
-          class="t-action-sheet__panel t-action-sheet__panel-list"
-        >
-          <!-- @ts-ignore -->
-          <div
-            class="t-action-sheet__menu"
-          >
-            
-            <button
-              class="t-action-sheet__cell"
-            >
-              
-              <div
-                class="t-action-sheet__cell-text"
-              >
-                按钮一
-              </div>
-              
-            </button>
-            <button
-              class="t-action-sheet__cell"
-            >
-              
-              <div
-                class="t-action-sheet__cell-text"
-              >
-                按钮二
+                <div
+                  class="t-grid"
+                >
+                  
+                  
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  
+                  
+                </div>
               </div>
               
-            </button>
-            <button
-              class="t-action-sheet__cell"
-              disabled=""
+            </div>
+            <div
+              class="t-action-sheet__indicator"
             >
               
               <div
-                class="t-action-sheet__cell-text"
-              >
-                失效按钮
-              </div>
-              
-            </button>
-            <button
-              class="t-action-sheet__cell"
-            >
-              
+                class="t-action-sheet__indicator-item on"
+              />
               <div
-                class="t-action-sheet__cell-text"
-                style="color: red;"
-              >
-                告警按钮
-              </div>
+                class="t-action-sheet__indicator-item"
+              />
               
-            </button>
-            
+            </div>
           </div>
+          
           <!--v-if-->
+          <button
+            class="t-action-sheet__action"
+          >
+            取消
+          </button>
+          
         </div>
         
       </div>
     </transition-stub>
   </div>
   <!--teleport end-->
+  
+</div>
+`;
+
+exports[`ActionSheet > ActionSheet gridVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="action-sheet-demo"
+    data-v-06f7cca3=""
+  >
+    <button
+      aria-disabled="false"
+      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      data-v-06f7cca3=""
+      role="button"
+    >
+      <!---->
+      <span
+        class="t-button__text"
+      >
+        
+        宫格型
+        
+      </span>
+    </button>
+  </div>
   <!--teleport start-->
   <div
     class="t-popup t-action-sheet"
@@ -741,43 +688,283 @@ exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
       >
         
         <div
-          class="t-action-sheet__panel t-action-sheet__panel-list"
+          class="t-action-sheet__panel t-action-sheet__panel-grid"
         >
           <!-- @ts-ignore -->
           <div
-            class="t-action-sheet__menu"
+            class="t-action-sheet__menu-wrapper"
           >
-            
-            <button
-              class="t-action-sheet__cell"
-            >
-              
-              <div
-                class="t-action-sheet__cell-text"
-                style="color: rgb(0, 82, 217);"
-              >
-                确定
-              </div>
-              
-            </button>
-            <button
-              class="t-action-sheet__cell"
+            <div
+              class="t-action-sheet__menu-slider"
+              style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
             >
               
               <div
-                class="t-action-sheet__cell-text"
-                style="color: red;"
+                class="t-action-sheet__menu"
               >
-                删除
+                <div
+                  class="t-grid"
+                >
+                  
+                  
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-grid-item"
+                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                  >
+                    <div
+                      class="t-grid-item__image-box"
+                    >
+                      <!--v-if-->
+                      <img
+                        class="t-grid-item__image"
+                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                        style="width: 32px; height: 32px;"
+                      />
+                    </div>
+                    <div
+                      class="t-grid-item__text"
+                      style="padding-left: 0px;"
+                    >
+                      <div
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
+                      >
+                        文字
+                      </div>
+                      <div
+                        class="t-grid-item__description"
+                      >
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  
+                  
+                </div>
               </div>
               
-            </button>
-            
+            </div>
+            <!--v-if-->
           </div>
           
-          <div
-            class="t-action-sheet__separation"
-          />
+          <!--v-if-->
           <button
             class="t-action-sheet__action"
           >
@@ -790,105 +977,34 @@ exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
     </transition-stub>
   </div>
   <!--teleport end-->
+  
 </div>
 `;
 
-exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
+exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
 <div
   data-v-app=""
 >
   
   <div
-    class="tdesign-mobile-demo"
+    class="action-sheet-demo"
+    data-v-443785fb=""
   >
-    <h1
-      class="title"
-    >
-      ActionSheet 动作面板
-    </h1>
-    <p
-      class="summary"
-    >
-      从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。
-    </p>
-    <div
-      class="tdesign-mobile-demo-block"
+    <button
+      aria-disabled="false"
+      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      data-v-443785fb=""
+      role="button"
     >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        类型
-      </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
+      <!---->
+      <span
+        class="t-button__text"
       >
+        
         列表型
-      </p>
-      
-      <div
-        class="action-sheet-demo"
-      >
-        <button
-          aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-          role="button"
-        >
-          <!---->
-          <span
-            class="t-button__text"
-          >
-            
-            列表型
-            
-          </span>
-        </button>
-      </div>
-      
-    </div>
-    <div
-      class="tdesign-mobile-demo-block"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        宫格型
-      </p>
-      
-      <div
-        class="action-sheet-demo"
-      >
-        <button
-          aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-          role="button"
-        >
-          <!---->
-          <span
-            class="t-button__text"
-          >
-            
-            宫格型-单页宫格
-            
-          </span>
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-          role="button"
-        >
-          <!---->
-          <span
-            class="t-button__text"
-          >
-            
-            宫格型-多页宫格
-            
-          </span>
-        </button>
-      </div>
-      
-    </div>
+        
+      </span>
+    </button>
   </div>
   <!--teleport start-->
   <div
@@ -999,696 +1115,1138 @@ exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
     </transition-stub>
   </div>
   <!--teleport end-->
-  <!--teleport start-->
+  
+</div>
+`;
+
+exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+  style="background-color: rgb(255, 255, 255); height: 100vh;"
+>
+  <h1
+    class="title"
+  >
+    ActionSheet 动作面板
+  </h1>
+  <p
+    class="summary"
+  >
+    底部弹起的模态面板，包含与当前情境相关的多个选项。
+  </p>
   <div
-    class="t-popup t-action-sheet"
+    class="tdesign-mobile-demo-block"
   >
-    <transition-stub
-      appear="false"
-      css="true"
-      name="fade"
-      persisted="false"
+    <h2
+      class="tdesign-mobile-demo-block__title"
+    >
+      01 类型
+    </h2>
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      列表型
+    </p>
+    
+    
+    <div
+      class="action-sheet-demo"
+      data-v-443785fb=""
+    >
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+        data-v-443785fb=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          列表型
+          
+        </span>
+      </button>
+    </div>
+    <!--teleport start-->
+    <div
+      class="t-popup t-action-sheet"
     >
       <transition-stub
         appear="false"
         css="true"
-        name="t-overlay"
-        persisted="true"
+        name="fade"
+        persisted="false"
       >
-        <div
-          class="t-overlay"
-          style="z-index: 1000; transition-duration: 300ms; display: none;"
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-overlay"
+          persisted="true"
         >
-          
-          
-        </div>
+          <div
+            class="t-overlay"
+            style="z-index: 1000; transition-duration: 300ms; display: none;"
+          >
+            
+            
+          </div>
+        </transition-stub>
       </transition-stub>
-    </transition-stub>
-    <transition-stub
-      appear="false"
-      css="true"
-      name="slide-bottom"
-      persisted="true"
-    >
-      <div
-        class="t-popup--content t-popup--content-bottom"
-        style="display: none;"
+      <transition-stub
+        appear="false"
+        css="true"
+        name="slide-bottom"
+        persisted="true"
       >
-        
         <div
-          class="t-action-sheet__panel t-action-sheet__panel-list"
+          class="t-popup--content t-popup--content-bottom"
+          style="display: none;"
         >
-          <!-- @ts-ignore -->
+          
           <div
-            class="t-action-sheet__menu"
+            class="t-action-sheet__panel t-action-sheet__panel-list"
           >
-            
-            <button
-              class="t-action-sheet__cell"
+            <!-- @ts-ignore -->
+            <div
+              class="t-action-sheet__menu"
             >
               
-              <div
-                class="t-action-sheet__cell-text"
+              <button
+                class="t-action-sheet__cell"
               >
-                默认按钮
-              </div>
-              
-            </button>
-            <button
-              class="t-action-sheet__cell"
-            >
-              
-              <div
-                class="t-action-sheet__cell-text"
-                style="color: rgb(0, 82, 217);"
+                
+                <div
+                  class="t-action-sheet__cell-text"
+                >
+                  默认按钮
+                </div>
+                
+              </button>
+              <button
+                class="t-action-sheet__cell"
               >
-                自定义按钮
-              </div>
-              
-            </button>
-            <button
-              class="t-action-sheet__cell"
-              disabled=""
-            >
-              
-              <div
-                class="t-action-sheet__cell-text"
+                
+                <div
+                  class="t-action-sheet__cell-text"
+                  style="color: rgb(0, 82, 217);"
+                >
+                  自定义按钮
+                </div>
+                
+              </button>
+              <button
+                class="t-action-sheet__cell"
+                disabled=""
               >
-                失效按钮
-              </div>
-              
-            </button>
-            <button
-              class="t-action-sheet__cell"
-            >
-              
-              <div
-                class="t-action-sheet__cell-text"
-                style="color: rgb(227, 77, 89);"
+                
+                <div
+                  class="t-action-sheet__cell-text"
+                >
+                  失效按钮
+                </div>
+                
+              </button>
+              <button
+                class="t-action-sheet__cell"
               >
-                告警按钮
-              </div>
+                
+                <div
+                  class="t-action-sheet__cell-text"
+                  style="color: rgb(227, 77, 89);"
+                >
+                  告警按钮
+                </div>
+                
+              </button>
               
-            </button>
+            </div>
             
-          </div>
-          <!--v-if-->
-        </div>
-        
-      </div>
-    </transition-stub>
-  </div>
-  <!--teleport end-->
-  <!--teleport start-->
-  <div
-    class="t-popup t-action-sheet"
-  >
-    <transition-stub
-      appear="false"
-      css="true"
-      name="fade"
-      persisted="false"
+            <div
+              class="t-action-sheet__separation"
+            />
+            <button
+              class="t-action-sheet__action"
+            >
+              取消
+            </button>
+            
+          </div>
+          
+        </div>
+      </transition-stub>
+    </div>
+    <!--teleport end-->
+    
+    
+    <div
+      class="action-sheet-demo"
+      data-v-06f7cca3=""
+    >
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+        data-v-06f7cca3=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          宫格型
+          
+        </span>
+      </button>
+    </div>
+    <!--teleport start-->
+    <div
+      class="t-popup t-action-sheet"
     >
       <transition-stub
         appear="false"
         css="true"
-        name="t-overlay"
-        persisted="true"
+        name="fade"
+        persisted="false"
       >
-        <div
-          class="t-overlay"
-          style="z-index: 1000; transition-duration: 300ms; display: none;"
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-overlay"
+          persisted="true"
         >
-          
-          
-        </div>
+          <div
+            class="t-overlay"
+            style="z-index: 1000; transition-duration: 300ms; display: none;"
+          >
+            
+            
+          </div>
+        </transition-stub>
       </transition-stub>
-    </transition-stub>
-    <transition-stub
-      appear="false"
-      css="true"
-      name="slide-bottom"
-      persisted="true"
-    >
-      <div
-        class="t-popup--content t-popup--content-bottom"
-        style="display: none;"
+      <transition-stub
+        appear="false"
+        css="true"
+        name="slide-bottom"
+        persisted="true"
       >
-        
         <div
-          class="t-action-sheet__panel t-action-sheet__panel-grid"
+          class="t-popup--content t-popup--content-bottom"
+          style="display: none;"
         >
-          <!-- @ts-ignore -->
+          
           <div
-            class="t-action-sheet__menu-wrapper"
+            class="t-action-sheet__panel t-action-sheet__panel-grid"
           >
+            <!-- @ts-ignore -->
             <div
-              class="t-action-sheet__menu-slider"
-              style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
+              class="t-action-sheet__menu-wrapper"
             >
-              
               <div
-                class="t-action-sheet__menu"
+                class="t-action-sheet__menu-slider"
+                style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
               >
+                
                 <div
-                  class="t-grid"
+                  class="t-action-sheet__menu"
                 >
-                  
-                  
                   <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                    class="t-grid"
                   >
+                    
+                    
                     <div
-                      class="t-grid-item__image-box"
-                    >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
-                    </div>
-                    <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
-                    <div
-                      class="t-grid-item__image-box"
-                    >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
-                    </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
-                    <div
-                      class="t-grid-item__image-box"
-                    >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
-                    </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
-                    <div
-                      class="t-grid-item__image-box"
-                    >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
-                    </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
+                    
+                    
                   </div>
-                  
-                  
                 </div>
+                
               </div>
-              
+              <!--v-if-->
             </div>
+            
             <!--v-if-->
+            <button
+              class="t-action-sheet__action"
+            >
+              取消
+            </button>
+            
           </div>
           
-          <!--v-if-->
-          <button
-            class="t-action-sheet__action"
-          >
-            取消
-          </button>
-          
         </div>
-        
-      </div>
-    </transition-stub>
-  </div>
-  <!--teleport end-->
-  <!--teleport start-->
-  <div
-    class="t-popup t-action-sheet"
-  >
-    <transition-stub
-      appear="false"
-      css="true"
-      name="fade"
-      persisted="false"
+      </transition-stub>
+    </div>
+    <!--teleport end-->
+    
+    
+    <div
+      class="action-sheet-demo"
+      data-v-1719f7aa=""
+    >
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+        data-v-1719f7aa=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          宫格型-多页
+          
+        </span>
+      </button>
+    </div>
+    <!--teleport start-->
+    <div
+      class="t-popup t-action-sheet"
     >
       <transition-stub
         appear="false"
         css="true"
-        name="t-overlay"
+        name="fade"
+        persisted="false"
+      >
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-overlay"
+          persisted="true"
+        >
+          <div
+            class="t-overlay"
+            style="z-index: 1000; transition-duration: 300ms; display: none;"
+          >
+            
+            
+          </div>
+        </transition-stub>
+      </transition-stub>
+      <transition-stub
+        appear="false"
+        css="true"
+        name="slide-bottom"
         persisted="true"
       >
         <div
-          class="t-overlay"
-          style="z-index: 1000; transition-duration: 300ms; display: none;"
+          class="t-popup--content t-popup--content-bottom"
+          style="display: none;"
         >
           
-          
-        </div>
-      </transition-stub>
-    </transition-stub>
-    <transition-stub
-      appear="false"
-      css="true"
-      name="slide-bottom"
-      persisted="true"
-    >
-      <div
-        class="t-popup--content t-popup--content-bottom"
-        style="display: none;"
-      >
-        
-        <div
-          class="t-action-sheet__panel t-action-sheet__panel-grid"
-        >
-          <!-- @ts-ignore -->
           <div
-            class="t-action-sheet__menu-wrapper"
+            class="t-action-sheet__panel t-action-sheet__panel-grid"
           >
+            <!-- @ts-ignore -->
             <div
-              class="t-action-sheet__menu-slider"
-              style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
+              class="t-action-sheet__menu-wrapper"
             >
-              
               <div
-                class="t-action-sheet__menu"
+                class="t-action-sheet__menu-slider"
+                style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
               >
+                
                 <div
-                  class="t-grid"
+                  class="t-action-sheet__menu"
                 >
-                  
-                  
                   <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                    class="t-grid"
                   >
+                    
+                    
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
+                    
+                    
                   </div>
+                </div>
+                <div
+                  class="t-action-sheet__menu"
+                >
                   <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
+                    class="t-grid"
                   >
+                    
+                    
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="t-grid-item"
-                    style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
-                  >
                     <div
-                      class="t-grid-item__image-box"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
-                      <!--v-if-->
-                      <img
-                        class="t-grid-item__image"
-                        src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
-                        style="width: 32px; height: 32px;"
-                      />
+                      <div
+                        class="t-grid-item__image-box"
+                      >
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
+                      </div>
+                      <div
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
+                      >
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="t-grid-item__text"
-                      style="padding-left: 0px;"
+                      class="t-grid-item"
+                      style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;"
                     >
                       <div
-                        class="t-grid-item__title"
-                        style="padding-top: 8px; margin-bottom: 4px;"
+                        class="t-grid-item__image-box"
                       >
-                        文字
+                        <!--v-if-->
+                        <img
+                          class="t-grid-item__image"
+                          src="https://sola.gtimg.cn/aoi/sola/20210202154301_WqMVBt9mQS.png"
+                          style="width: 32px; height: 32px;"
+                        />
                       </div>
                       <div
-                        class="t-grid-item__description"
+                        class="t-grid-item__text"
+                        style="padding-left: 0px;"
                       >
-                        <!---->
+                        <div
+                          class="t-grid-item__title"
+                          style="padding-top: 8px; margin-bottom: 4px;"
+                        >
+                          文字
+                        </div>
+                        <div
+                          class="t-grid-item__description"
+                        >
+                          <!---->
+                        </div>
                       </div>
                     </div>
+                    
+                    
                   </div>
-                  
-                  
                 </div>
+                
+              </div>
+              <div
+                class="t-action-sheet__indicator"
+              >
+                
+                <div
+                  class="t-action-sheet__indicator-item on"
+                />
+                <div
+                  class="t-action-sheet__indicator-item"
+                />
+                
               </div>
-              
             </div>
+            
             <!--v-if-->
+            <button
+              class="t-action-sheet__action"
+            >
+              取消
+            </button>
+            
           </div>
           
-          <!--v-if-->
-          <button
-            class="t-action-sheet__action"
-          >
-            取消
-          </button>
-          
         </div>
-        
-      </div>
-    </transition-stub>
+      </transition-stub>
+    </div>
+    <!--teleport end-->
+    
+    
   </div>
-  <!--teleport end-->
-  
 </div>
 `;
diff --git a/src/action-sheet/__test__/demo.test.jsx b/src/action-sheet/__test__/demo.test.jsx
index 0935fd31..3c3cb975 100644
--- a/src/action-sheet/__test__/demo.test.jsx
+++ b/src/action-sheet/__test__/demo.test.jsx
@@ -3,11 +3,13 @@
  */
 
 import { mount } from '@vue/test-utils';
+import gridMultipleVue from '@/action-sheet/demos/grid-multiple.vue';
 import gridVue from '@/action-sheet/demos/grid.vue';
 import listVue from '@/action-sheet/demos/list.vue';
 import mobileVue from '@/action-sheet/demos/mobile.vue';
 
 const mapper = {
+  gridMultipleVue,
   gridVue,
   listVue,
   mobileVue,