fix(action-sheet): modify mobile problem

opentiny · Dec 24, 2024 · 94bbfe0 · 94bbfe0
1 parent 8d0429d
commit 94bbfe0
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 10 deletions.
diff --git a/examples/sites/demos/apis/actionsheet.js b/examples/sites/demos/apis/actionsheet.js
@@ -37,6 +37,17 @@ export default {
           },
           mode: ['mobile'],
           mobileDemo: 'ellipsis'
+        },
+        {
+          name: 'content-position',
+          type: 'Boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示action插槽',
+            'en-US': 'Whether to display action slots '
+          },
+          mode: ['mobile'],
+          mobileDemo: 'slot-action'
         }
       ],
       events: [
@@ -70,12 +81,22 @@ export default {
           name: 'action',
           defaultValue: '',
           desc: {
-            'zh-CN': '<p>自定义操作项内容</p>',
+            'zh-CN': '<p>action插槽</p>',
             'en-US': 'Click'
           },
           mode: ['mobile'],
           mobileDemo: 'slot-action'
         },
+        {
+          name: 'item',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>item插槽</p>',
+            'en-US': 'Click'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'slot-item'
+        },
         {
           mode: []
         }

diff --git a/examples/sites/demos/mobile/app/actionsheet/clickfn.vue b/examples/sites/demos/mobile/app/actionsheet/clickfn.vue
@@ -11,7 +11,6 @@
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
       @click="clickItem"
-      content-position
     ></tiny-action-sheet>
   </div>
 </template>

diff --git a/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue b/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue
@@ -11,7 +11,6 @@
       ellipsis
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
-      content-position
     ></tiny-action-sheet>
   </div>
 </template>

diff --git a/examples/sites/demos/mobile/app/actionsheet/slot-action.vue b/examples/sites/demos/mobile/app/actionsheet/slot-action.vue
@@ -12,7 +12,13 @@
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
       content-position
-    ></tiny-action-sheet>
+    >
+      <template #item="data">
+        <div>
+          {{ data.item.label }}
+        </div>
+      </template>
+    </tiny-action-sheet>
   </div>
 </template>
 

diff --git a/examples/sites/demos/mobile/app/actionsheet/slot-item.vue b/examples/sites/demos/mobile/app/actionsheet/slot-item.vue
@@ -10,7 +10,6 @@
       :menus="menus"
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
-      content-position
     >
       <template #item="data">
         <div>

diff --git a/examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js b/examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js
@@ -29,7 +29,7 @@ export default {
     {
       demoId: 'slot-item',
       name: {
-        'zh-CN': '插槽',
+        'zh-CN': '数据插槽',
         'en-US': 'events'
       },
       desc: {
@@ -41,7 +41,7 @@ export default {
     {
       demoId: 'slot-action',
       name: {
-        'zh-CN': '插槽',
+        'zh-CN': 'action插槽',
         'en-US': 'events'
       },
       desc: {

diff --git a/packages/theme-mobile/src/action-sheet/index.less b/packages/theme-mobile/src/action-sheet/index.less
@@ -19,9 +19,8 @@
 .@{action-sheet-prefix-cls} {
   .component-css-vars-action-sheet();
 
-  position: absolute;
-  bottom: 0;
-  width: 100%;
+  position: relative;
+  height: 100%;
 
   &__mask {
     top: 0;
@@ -42,6 +41,7 @@
     transition: transform 0.3s;
     z-index: 500;
     overflow-y: scroll;
+    backface-visibility: hidden;
     border-radius: 16px 16px 0px 0px;
     &.is-toggle {
       transform: translate(0, 0);
@@ -103,6 +103,7 @@
 
   &__action {
     width: 100%;
+    position: absolute;
     background-color: var(--ti-mobile-action-sheet-action-bg-color, #fff);
   }
 }