fix: picker-view state.height

packages/uni-components/src/components/picker-view-column/index.tsx

@@ -9,6 +9,7 @@ import {
   getCurrentInstance,
   ComponentInternalInstance,
   nextTick,
+  ComponentPublicInstance,
 } from 'vue'
 import { defineBuiltInComponent } from '../../helpers/component'
 import { useScroller } from '../../helpers/scroller'
@@ -103,6 +104,11 @@ export default /*#__PURE__*/ defineBuiltInComponent({
     const pickerViewProps = inject('pickerViewProps') as PickerViewProps
     const pickerViewState = inject('pickerViewState') as PickerViewState
     const indicatorHeight = ref(34)
+    const resizeSensorRef: Ref<ComponentPublicInstance | null> = ref(null)
+    onMounted(() => {
+      const resizeSensor = resizeSensorRef.value as ComponentPublicInstance
+      indicatorHeight.value = resizeSensor.$el.getBoundingClientRect().height
+    })
     const maskSize = computed(
       () => (pickerViewState.height - indicatorHeight.value) / 2
     )
@@ -258,7 +264,8 @@ export default /*#__PURE__*/ defineBuiltInComponent({
               style={pickerViewProps.indicatorStyle}
             >
               <ResizeSensor
-                initial
+                ref={resizeSensorRef}
+                // @ts-ignore
                 onResize={({ height }: { height: number }) =>
                   (indicatorHeight.value = height)
                 }

packages/uni-components/src/components/picker-view/index.tsx

@@ -10,6 +10,8 @@ import {
   SetupContext,
   PropType,
   ComponentInternalInstance,
+  onMounted,
+  ComponentPublicInstance,
 } from 'vue'
 import { defineBuiltInComponent } from '../../helpers/component'
 import { flatVNode } from '../../helpers/flatVNode'
@@ -91,6 +93,11 @@ export default /*#__PURE__*/ defineBuiltInComponent({
     const rootRef: Ref<HTMLElement | null> = ref(null)
     const trigger = useCustomEvent(rootRef, emit as SetupContext['emit'])
     const state = useState(props)
+    const resizeSensorRef: Ref<ComponentPublicInstance | null> = ref(null)
+    onMounted(() => {
+      const resizeSensor = resizeSensorRef.value as ComponentPublicInstance
+      state.height = resizeSensor.$el.getBoundingClientRect().height
+    })
     let columnVNodes: VNode[] = []
     function getItemIndex(vnode: VNode): number {
       return columnVNodes.indexOf(vnode)
@@ -128,7 +135,8 @@ export default /*#__PURE__*/ defineBuiltInComponent({
       return (
         <uni-picker-view ref={rootRef}>
           <ResizeSensor
-            initial
+            ref={resizeSensorRef}
+            // @ts-ignore
             onResize={({ height }: { height: number }) =>
               (state.height = height)
             }

packages/uni-components/src/components/resize-sensor/index.tsx

@@ -49,9 +49,9 @@ function useResizeSensorUpdate(
     (value: typeof size) => emit('resize', value)
   )
   return () => {
-    const { offsetWidth, offsetHeight } = rootRef.value!
-    size.width = offsetWidth
-    size.height = offsetHeight
+    const { width, height } = rootRef.value!.getBoundingClientRect()
+    size.width = width
+    size.height = height
     reset()
   }
 }