Repository: Tencent/tdesign-mobile-vue
Pull request #466 (2022-11-07 14:26:00)

docs(list): update docs and demo
### 🤔 这个 PR 的性质是？

- [x] 文档改进
- [x] 演示代码改进


### 🔗 相关 Issue

#413 

### 📝 更新日志

-docs(list): 更新组件list示例文档和组件demo, 升级语法糖




Patch:
diff --git a/src/action-sheet/demos/grid-multiple.vue b/src/action-sheet/demos/grid-multiple.vue
deleted file mode 100644
index a0df4e6e..00000000
--- a/src/action-sheet/demos/grid-multiple.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<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 316db1fb..f9500136 100644
--- a/src/action-sheet/demos/grid.vue
+++ b/src/action-sheet/demos/grid.vue
@@ -1,45 +1,79 @@
 <template>
-  <div class="action-sheet-demo">
-    <t-button block variant="outline" size="large" @click="visible = true">宫格型</t-button>
+  <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>
-  <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';
+<script lang="ts">
+import { defineComponent } 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' },
-]);
-const visible = ref(false);
-const count = ref(8);
-
-const handleSelected = (selected: ActionSheetItem, selectedIndex: number) => {
-  console.log(selected, selectedIndex);
-};
-const handleCancel = (): void => {
-  console.log('cancel');
-};
+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})`,
+      };
+    },
+  },
+});
 </script>
 
-<style lang="less" scoped>
-.action-sheet-demo {
-  margin-bottom: 16px;
+<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>
diff --git a/src/action-sheet/demos/list.vue b/src/action-sheet/demos/list.vue
index e20f9274..04e6b630 100644
--- a/src/action-sheet/demos/list.vue
+++ b/src/action-sheet/demos/list.vue
@@ -1,30 +1,50 @@
 <template>
-  <div class="action-sheet-demo">
-    <t-button block variant="outline" size="large" @click="visible = true">列表型</t-button>
+  <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>
-  <t-action-sheet v-model="visible" :items="items" @selected="handleSelected" @cancel="handleCancel" />
 </template>
 
-<script lang="ts" setup>
-import { ref } from 'vue';
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { ActionSheetItem } from '../type';
 
-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');
-};
+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');
+    },
+  },
+});
 </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 44637947..9493c390 100644
--- a/src/action-sheet/demos/mobile.vue
+++ b/src/action-sheet/demos/mobile.vue
@@ -1,19 +1,107 @@
 <template>
-  <div class="tdesign-mobile-demo" :style="{ 'background-color': '#fff', height: '100vh' }">
+  <div class="tdesign-mobile-demo">
     <h1 class="title">ActionSheet 动作面板</h1>
-    <p class="summary">底部弹起的模态面板，包含与当前情境相关的多个选项。</p>
-    <tdesign-demo-block title="01 类型" summary="列表型">
-      <ListDemo />
-      <GridDemo />
-      <GridMultipleDemo />
+    <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>
     </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" setup>
-import ListDemo from './list.vue';
-import GridDemo from './grid.vue';
-import GridMultipleDemo from './grid-multiple.vue';
+<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>
 
 <style lang="less">
diff --git a/src/list/demos/mobile.vue b/src/list/demos/mobile.vue
index 4cf7df3e..b395edb1 100644
--- a/src/list/demos/mobile.vue
+++ b/src/list/demos/mobile.vue
@@ -78,7 +78,6 @@ const onChangeTab = (val: any) => {
     }
   }
   .t-button {
-    background: #ffffff;
     margin: 0 16px 16px 16px;
     width: calc(100% - 32px);
   }


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 e02ef582..352775da 100644
--- a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,29 +1,72 @@
 // Vitest Snapshot v1
 
-exports[`ActionSheet > ActionSheet gridMultipleVue demo works fine 1`] = `
+exports[`ActionSheet > ActionSheet gridVue demo works fine 1`] = `
 <div
-  data-v-app=""
+  class="action-sheet-base"
 >
-  
   <div
-    class="action-sheet-demo"
-    data-v-1719f7aa=""
+    class="t-cell t-cell--middle t-cell--bordered"
   >
-    <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"
+    <div
+      class="t-cell__left-icon"
     >
-      <!---->
-      <span
-        class="t-button__text"
+      <!--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>
-    </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"
+        >
+          
+          每页显示4个
+          
+        </span>
+      </button>
+      
+    </div>
+    <!--v-if-->
   </div>
   <!--teleport start-->
   <div
@@ -333,283 +376,223 @@ exports[`ActionSheet > ActionSheet gridMultipleVue 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__menu"
+                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>
               
-            </div>
-            <div
-              class="t-action-sheet__indicator"
+            </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__indicator-item on"
-              />
+                class="t-action-sheet__cell-text"
+              >
+                失效按钮
+              </div>
+              
+            </button>
+            <button
+              class="t-action-sheet__cell"
+            >
+              
               <div
-                class="t-action-sheet__indicator-item"
-              />
+                class="t-action-sheet__cell-text"
+                style="color: red;"
+              >
+                告警按钮
+              </div>
               
-            </div>
+            </button>
+            
           </div>
           
-          <!--v-if-->
+          <div
+            class="t-action-sheet__separation"
+          />
           <button
             class="t-action-sheet__action"
           >
@@ -622,35 +605,6 @@ exports[`ActionSheet > ActionSheet gridMultipleVue demo works fine 1`] = `
     </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"
@@ -688,283 +642,142 @@ exports[`ActionSheet > ActionSheet gridVue demo works fine 1`] = `
       >
         
         <div
-          class="t-action-sheet__panel t-action-sheet__panel-grid"
+          class="t-action-sheet__panel t-action-sheet__panel-list"
         >
           <!-- @ts-ignore -->
           <div
-            class="t-action-sheet__menu-wrapper"
+            class="t-action-sheet__menu"
           >
-            <div
-              class="t-action-sheet__menu-slider"
-              style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
+            
+            <button
+              class="t-action-sheet__cell"
             >
               
               <div
-                class="t-action-sheet__menu"
+                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"
+            >
+              
+              <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;"
+              >
+                告警按钮
+              </div>
+              
+            </button>
+            
+          </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"
+    >
+      <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"
+                style="color: rgb(0, 82, 217);"
+              >
+                确定
               </div>
               
-            </div>
-            <!--v-if-->
+            </button>
+            <button
+              class="t-action-sheet__cell"
+            >
+              
+              <div
+                class="t-action-sheet__cell-text"
+                style="color: red;"
+              >
+                删除
+              </div>
+              
+            </button>
+            
           </div>
           
-          <!--v-if-->
+          <div
+            class="t-action-sheet__separation"
+          />
           <button
             class="t-action-sheet__action"
           >
@@ -977,34 +790,105 @@ exports[`ActionSheet > ActionSheet gridVue demo works fine 1`] = `
     </transition-stub>
   </div>
   <!--teleport end-->
-  
 </div>
 `;
 
-exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
+exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
 <div
   data-v-app=""
 >
   
   <div
-    class="action-sheet-demo"
-    data-v-443785fb=""
+    class="tdesign-mobile-demo"
   >
-    <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"
+    <h1
+      class="title"
     >
-      <!---->
-      <span
-        class="t-button__text"
+      ActionSheet 动作面板
+    </h1>
+    <p
+      class="summary"
+    >
+      从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。
+    </p>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
       >
-        
         列表型
-        
-      </span>
-    </button>
+      </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>
   </div>
   <!--teleport start-->
   <div
@@ -1115,1138 +999,696 @@ exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
     </transition-stub>
   </div>
   <!--teleport end-->
-  
-</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>
+  <!--teleport start-->
   <div
-    class="tdesign-mobile-demo-block"
+    class="t-popup t-action-sheet"
   >
-    <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="fade"
+      persisted="false"
     >
       <transition-stub
         appear="false"
         css="true"
-        name="fade"
-        persisted="false"
+        name="t-overlay"
+        persisted="true"
       >
-        <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
-            class="t-overlay"
-            style="z-index: 1000; transition-duration: 300ms; display: none;"
-          >
-            
-            
-          </div>
-        </transition-stub>
+          
+          
+        </div>
       </transition-stub>
-      <transition-stub
-        appear="false"
-        css="true"
-        name="slide-bottom"
-        persisted="true"
+    </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-popup--content t-popup--content-bottom"
-          style="display: none;"
+          class="t-action-sheet__panel t-action-sheet__panel-list"
         >
-          
+          <!-- @ts-ignore -->
           <div
-            class="t-action-sheet__panel t-action-sheet__panel-list"
+            class="t-action-sheet__menu"
           >
-            <!-- @ts-ignore -->
-            <div
-              class="t-action-sheet__menu"
+            
+            <button
+              class="t-action-sheet__cell"
             >
               
-              <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"
-                  style="color: rgb(0, 82, 217);"
-                >
-                  自定义按钮
-                </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"
               >
-                
-                <div
-                  class="t-action-sheet__cell-text"
-                  style="color: rgb(227, 77, 89);"
-                >
-                  告警按钮
-                </div>
-                
-              </button>
+                默认按钮
+              </div>
               
-            </div>
-            
-            <div
-              class="t-action-sheet__separation"
-            />
+            </button>
             <button
-              class="t-action-sheet__action"
+              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"
+              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: rgb(227, 77, 89);"
+              >
+                告警按钮
+              </div>
+              
             </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="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>
+          <!--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"
+    >
       <transition-stub
         appear="false"
         css="true"
-        name="slide-bottom"
+        name="t-overlay"
         persisted="true"
       >
         <div
-          class="t-popup--content t-popup--content-bottom"
-          style="display: none;"
+          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-grid"
+        >
+          <!-- @ts-ignore -->
           <div
-            class="t-action-sheet__panel t-action-sheet__panel-grid"
+            class="t-action-sheet__menu-wrapper"
           >
-            <!-- @ts-ignore -->
             <div
-              class="t-action-sheet__menu-wrapper"
+              class="t-action-sheet__menu-slider"
+              style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
             >
+              
               <div
-                class="t-action-sheet__menu-slider"
-                style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
+                class="t-action-sheet__menu"
               >
-                
                 <div
-                  class="t-action-sheet__menu"
+                  class="t-grid"
                 >
+                  
+                  
                   <div
-                    class="t-grid"
+                    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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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>
           
-        </div>
-      </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="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;"
+          <!--v-if-->
+          <button
+            class="t-action-sheet__action"
           >
-            
-            
-          </div>
-        </transition-stub>
-      </transition-stub>
+            取消
+          </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="slide-bottom"
+        name="t-overlay"
         persisted="true"
       >
         <div
-          class="t-popup--content t-popup--content-bottom"
-          style="display: none;"
+          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-grid"
+        >
+          <!-- @ts-ignore -->
           <div
-            class="t-action-sheet__panel t-action-sheet__panel-grid"
+            class="t-action-sheet__menu-wrapper"
           >
-            <!-- @ts-ignore -->
             <div
-              class="t-action-sheet__menu-wrapper"
+              class="t-action-sheet__menu-slider"
+              style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
             >
+              
               <div
-                class="t-action-sheet__menu-slider"
-                style="transform: translate3d(0px, 0, 0); transition: transform 300ms;"
+                class="t-action-sheet__menu"
               >
-                
                 <div
-                  class="t-action-sheet__menu"
+                  class="t-grid"
                 >
+                  
+                  
                   <div
-                    class="t-grid"
+                    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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
+                    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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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"
-                      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-item__image-box"
                     >
-                      <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>
+                      <!--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"
-                      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-item__text"
+                      style="padding-left: 0px;"
                     >
                       <div
-                        class="t-grid-item__image-box"
+                        class="t-grid-item__title"
+                        style="padding-top: 8px; margin-bottom: 4px;"
                       >
-                        <!--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__description"
                       >
-                        <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>
-      </transition-stub>
-    </div>
-    <!--teleport end-->
-    
-    
+        
+      </div>
+    </transition-stub>
   </div>
+  <!--teleport end-->
+  
 </div>
 `;
diff --git a/src/action-sheet/__test__/demo.test.jsx b/src/action-sheet/__test__/demo.test.jsx
index 3c3cb975..0935fd31 100644
--- a/src/action-sheet/__test__/demo.test.jsx
+++ b/src/action-sheet/__test__/demo.test.jsx
@@ -3,13 +3,11 @@
  */
 
 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,