feat: ActionSheet 可以配置最大高度吗，我当做 select使用了。 #445

ijry · Jul 27, 2024 · c55420e · c55420e
1 parent 1cdb600
commit c55420e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/src/pages/componentsB/actionSheet/actionSheet.nvue b/src/pages/componentsB/actionSheet/actionSheet.nvue
@@ -83,6 +83,36 @@
 					},
 					{
 						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
 					},
 					{
 						name: '选项3',

diff --git a/src/uni_modules/uview-plus/components/u-action-sheet/props.js b/src/uni_modules/uview-plus/components/u-action-sheet/props.js
@@ -52,6 +52,11 @@ export const props = defineMixin({
         round: {
             type: [Boolean, String, Number],
             default: () => defProps.actionSheet.round
-        }
+        },
+        // 选项区域最大高度
+        wrapMaxHeight: {
+            type: [String],
+            default: () => defProps.actionSheet.wrapMaxHeight
+        },
     }
 })
diff --git a/src/uni_modules/uview-plus/components/u-action-sheet/u-action-sheet.vue b/src/uni_modules/uview-plus/components/u-action-sheet/u-action-sheet.vue
@@ -34,7 +34,7 @@
 			>{{description}}</text>
 			<slot>
 				<u-line v-if="description"></u-line>
-				<view class="u-action-sheet__item-wrap">
+				<scroll-view scroll-y class="u-action-sheet__item-wrap" :style="{maxHeight: wrapMaxHeight}">
 					<view :key="index" v-for="(item, index) in actions">
 						<!-- #ifdef MP -->
 						<button
@@ -85,7 +85,7 @@
 						<!-- #endif -->
 						<u-line v-if="index !== actions.length - 1"></u-line>
 					</view>
-				</view>
+				</scroll-view>
 			</slot>
 			<u-gap
 			    bgColor="#eaeaec"
@@ -270,7 +270,7 @@
 			font-size: $u-action-sheet-cancel-text-font-size;
 			color: $u-action-sheet-cancel-text-color;
 			text-align: center;
-			padding: $u-action-sheet-cancel-text-font-size;
+			// padding: $u-action-sheet-cancel-text-font-size;
 		}
 
 		&--hover {

diff --git a/src/uni_modules/uview-plus/libs/config/props/actionSheet.js b/src/uni_modules/uview-plus/libs/config/props/actionSheet.js
@@ -20,6 +20,7 @@ export default {
         safeAreaInsetBottom: true,
         openType: '',
         closeOnClickOverlay: true,
-        round: 0
+        round: 0,
+        wrapMaxHeight: '600px'
     }
 }