fix(web): 修复 uni.showActionSheet 的参数 popover.width 设置无效的问题 (question/…

…189745)
dcloudio · Apr 18, 2024 · 7044620 · 7044620
1 parent 17e086b
commit 7044620
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/uni-h5/src/helpers/usePopupStyle.ts b/packages/uni-h5/src/helpers/usePopupStyle.ts
@@ -14,6 +14,7 @@ export type popupStyleType = {
     left: string
     top: string
     bottom: string
+    width?: string
   }
   triangle: {
     'border-width': string
@@ -24,7 +25,7 @@ export type popupStyleType = {
   }
 }
 
-export function usePopupStyle(props: Data) {
+export function usePopupStyle(props: Data, dynamicWidth = false) {
   const popupWidth = ref(0)
   const popupHeight = ref(0)
 
@@ -62,15 +63,22 @@ export function usePopupStyle(props: Data) {
         'border-style': 'solid',
       })
       const popoverLeft = getNumber(popover.left)
-      const popoverWidth = getNumber(popover.width)
+      const defaultWidth = 300
+      const popoverWidth = getNumber(
+        popover.width ? popover.width : defaultWidth
+      )
       const popoverTop = getNumber(popover.top)
       const popoverHeight = getNumber(popover.height)
+      const layerWidth = dynamicWidth ? popoverWidth : defaultWidth
       const center = popoverLeft + popoverWidth / 2
       contentStyle.transform = 'none !important'
-      const contentLeft = Math.max(0, center - 300 / 2)
+      const contentLeft = Math.max(0, center - layerWidth / 2)
       contentStyle.left = `${contentLeft}px`
+      if (dynamicWidth) {
+        contentStyle.width = `${layerWidth}px`
+      }
       let triangleLeft = Math.max(12, center - contentLeft)
-      triangleLeft = Math.min(300 - 12, triangleLeft)
+      triangleLeft = Math.min(layerWidth - 12, triangleLeft)
       triangleStyle.left = `${triangleLeft}px`
       const vcl = popupHeight.value / 2
       if (popoverTop + popoverHeight - vcl > vcl - popoverTop) {

diff --git a/packages/uni-h5/src/service/api/ui/popup/actionSheet.tsx b/packages/uni-h5/src/service/api/ui/popup/actionSheet.tsx
@@ -109,7 +109,7 @@ export default /*#__PURE__*/ defineComponent({
     const main: Ref<HTMLElement | null> = ref(null)
     const { t } = useI18n()
     const { _close } = useActionSheetLoader(props, emit as SetupContext['emit'])
-    const { popupStyle } = usePopupStyle(props)
+    const { popupStyle } = usePopupStyle(props, true)
 
     let scroller: Scroller