From 94bbfe0bb7b38e52c332c22ab0fdc190a1948d26 Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Tue, 24 Dec 2024 01:14:49 -0800
Subject: [PATCH] fix(action-sheet): modify mobile problem

---
 examples/sites/demos/apis/actionsheet.js      | 23 ++++++++++++++++++-
 .../demos/mobile/app/actionsheet/clickfn.vue  |  1 -
 .../demos/mobile/app/actionsheet/ellipsis.vue |  1 -
 .../mobile/app/actionsheet/slot-action.vue    |  8 ++++++-
 .../mobile/app/actionsheet/slot-item.vue      |  1 -
 .../app/actionsheet/webdoc/actionsheet.js     |  4 ++--
 .../theme-mobile/src/action-sheet/index.less  |  7 +++---
 7 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/examples/sites/demos/apis/actionsheet.js b/examples/sites/demos/apis/actionsheet.js
index 6114afbec9..cde9b6253a 100644
--- 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
index 519991fdca..b83a0ee8d0 100644
--- 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
index 70428195f8..b1890a8228 100644
--- 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
index 3cc058ec7d..3117eeb4e8 100644
--- 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
index b6b2951526..ac0dfc29c7 100644
--- 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
index ef7934846d..ac38f76574 100644
--- 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
index 38fee3d87f..9ddd0e35dd 100644
--- 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);
   }
 }