Merge pull request #121 from Dengzygx/feat/actionsheet

feat: 使用Grid组件实现ActionSheet
Tencent · May 30, 2022 · e402c4d · e402c4d
2 parents e3b70d4 + a7feb67
commit e402c4d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 39 deletions.
diff --git a/site/docs.config.js b/site/docs.config.js
@@ -305,12 +305,12 @@ export default {
           path: '/mobile-vue/components/pull-down-refresh',
           component: () => import('@/pull-down-refresh/pull-down-refresh.md'),
         },
-        // {
-        //   title: 'ActionSheet 动作面板',
-        //   name: 'action-sheet',
-        //   path: '/mobile-vue/components/actionsheet',
-        //   component: () => import('@/action-sheet/action-sheet.md'),
-        // },
+        {
+          title: 'ActionSheet 动作面板',
+          name: 'action-sheet',
+          path: '/mobile-vue/components/actionsheet',
+          component: () => import('@/action-sheet/action-sheet.md'),
+        },
         {
           title: 'Toast 轻提示',
           name: 'toast',

diff --git a/src/action-sheet/demos/grid.vue b/src/action-sheet/demos/grid.vue
@@ -14,10 +14,6 @@
       @selected="handleSelected"
       @cancel="handleCancel"
     >
-      <template #cell="slotProps">
-        <div :style="meunIconStyle(slotProps.item.icon)"></div>
-        <div>{{ slotProps.item.label }}</div>
-      </template>
     </t-action-sheet>
   </div>
 </template>

diff --git a/src/action-sheet/demos/mobile.vue b/src/action-sheet/demos/mobile.vue
@@ -31,12 +31,6 @@
     @selected="handleSelected"
     @cancel="handleCancel"
   >
-    <template #cell>
-      <div class="action-sheet-grid-demo">
-        <app-icon size="28px" />
-        <div>文字</div>
-      </div>
-    </template>
   </t-action-sheet>
   <t-action-sheet
     v-model="visible3"
@@ -46,22 +40,14 @@
     @selected="handleSelected"
     @cancel="handleCancel"
   >
-    <template #cell="{ item }">
-      <div class="action-sheet-grid-demo">
-        <app-icon size="28px" />
-        <div>{{ item.label }}</div>
-      </div>
-    </template>
   </t-action-sheet>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { AppIcon } from 'tdesign-icons-vue-next';
 import { ActionSheetItem } from '../type';
 
 export default defineComponent({
-  components: { AppIcon },
   data() {
     return {
       visible: false,

diff --git a/src/action-sheet/menu-grid.vue b/src/action-sheet/menu-grid.vue
@@ -8,20 +8,9 @@
       @touchend="handleTouchend"
     >
       <div v-for="(Items, i) in actionItems" :key="i" :class="`${name}__menu`">
-        <div :class="`${name}__menu-page`">
-          <button
-            v-for="(item, index) in Items"
-            :key="index"
-            :class="`${name}__cell`"
-            :disabled="item.disabled"
-            @click="handleSelected(index)"
-          >
-            <slot name="cell" :item="item">
-              <div v-if="item.icon" :class="`${name}__cell-icon`" :style="{ backgroundImage: `url(${item.icon})` }" />
-              <div :class="`${name}__cell-text`" :style="{ color: item.color }">{{ item.label }}</div>
-            </slot>
-          </button>
-        </div>
+        <t-grid :column="gridColumn">
+          <t-grid-item v-for="(item, index) in Items" :key="index" :text="item.label" :image="item.icon" />
+        </t-grid>
       </div>
     </div>
     <div v-if="pageNum > 1" :class="`${name}__indicator`">
@@ -40,13 +29,14 @@
 <script lang="ts">
 import { ref, SetupContext, defineComponent, computed } from 'vue';
 import config from '../config';
-import { ActionSheetItem } from './type';
+import { Grid as TGrid, GridItem as TGridItem } from '../grid';
 
 const { prefix } = config;
 
 const name = `${prefix}-action-sheet`;
 
 export default defineComponent({
+  components: { TGrid, TGridItem },
   props: {
     items: {
       type: Array,
@@ -71,6 +61,7 @@ export default defineComponent({
       transform: `translate3d(${moveOffset.value}px, 0, 0)`,
       transition: useTransition.value ? 'transform 300ms' : 'all',
     }));
+    const gridColumn = computed(() => Math.ceil(props.count / 2));
     const pageNum = computed(() => Math.ceil(props.items.length / props.count));
     // 分页数据处理
     const actionItems = computed(() => {
@@ -136,6 +127,7 @@ export default defineComponent({
 
     return {
       name: ref(name),
+      gridColumn,
       pageNum,
       actionItems,
       currentIndex,