fix: picker value sync

packages/uni-h5/dist/uni-h5.cjs.js

@@ -1704,11 +1704,11 @@ function useResizeSensorUpdate(rootRef, emit2, reset) {
   vue.watch(() => shared.extend({}, size), (value) => emit2("resize", value));
   return () => {
     const {
-      offsetWidth,
-      offsetHeight
-    } = rootRef.value;
-    size.width = offsetWidth;
-    size.height = offsetHeight;
+      width,
+      height
+    } = rootRef.value.getBoundingClientRect();
+    size.width = width;
+    size.height = height;
     reset();
   };
 }
@@ -4601,6 +4601,7 @@ var PickerView = /* @__PURE__ */ defineBuiltInComponent({
     const rootRef = vue.ref(null);
     const trigger = useCustomEvent(rootRef, emit2);
     const state = useState$1(props2);
+    const resizeSensorRef = vue.ref(null);
     let columnVNodes = [];
     function getItemIndex(vnode) {
       return columnVNodes.indexOf(vnode);
@@ -4635,11 +4636,11 @@ var PickerView = /* @__PURE__ */ defineBuiltInComponent({
       return vue.createVNode("uni-picker-view", {
         "ref": rootRef
       }, [vue.createVNode(ResizeSensor, {
-        "initial": true,
+        "ref": resizeSensorRef,
         "onResize": ({
           height
         }) => state.height = height
-      }, null, 8, ["initial", "onResize"]), vue.createVNode("div", {
+      }, null, 8, ["onResize"]), vue.createVNode("div", {
         "class": "uni-picker-view-wrapper"
       }, [defaultSlots])], 512);
     };
@@ -5350,6 +5351,7 @@ var PickerViewColumn = /* @__PURE__ */ defineBuiltInComponent({
     const pickerViewProps = vue.inject("pickerViewProps");
     const pickerViewState = vue.inject("pickerViewState");
     const indicatorHeight = vue.ref(34);
+    const resizeSensorRef = vue.ref(null);
     const maskSize = vue.computed(() => (pickerViewState.height - indicatorHeight.value) / 2);
     const {
       state: scopedAttrsState
@@ -5416,11 +5418,11 @@ var PickerViewColumn = /* @__PURE__ */ defineBuiltInComponent({
         "class": ["uni-picker-view-indicator", pickerViewProps.indicatorClass],
         "style": pickerViewProps.indicatorStyle
       }), [vue.createVNode(ResizeSensor, {
-        "initial": true,
+        "ref": resizeSensorRef,
         "onResize": ({
           height
         }) => indicatorHeight.value = height
-      }, null, 8, ["initial", "onResize"])], 16), vue.createVNode("div", {
+      }, null, 8, ["onResize"])], 16), vue.createVNode("div", {
         "ref": contentRef,
         "class": ["uni-picker-view-content", className],
         "style": {
@@ -10174,50 +10176,62 @@ var _sfc_main$1 = {
         }, 300);
       }
     },
-    value() {
-      this._setValueSync();
+    value: {
+      deep: true,
+      handler() {
+        this._setValueSync();
+      }
     },
     mode() {
       this._setValueSync();
     },
-    range() {
-      this._setValueSync();
-    },
-    valueSync() {
-      this._setValueArray();
-    },
-    valueArray(val) {
-      if (this.mode === mode.TIME || this.mode === mode.DATE) {
-        const getValue = this.mode === mode.TIME ? this._getTimeValue : this._getDateValue;
-        const valueArray = this.valueArray;
-        const startArray = this.startArray;
-        const endArray = this.endArray;
-        if (this.mode === mode.DATE) {
-          const dateArray = this.dateArray;
-          const max = dateArray[2].length;
-          const day = Number(dateArray[2][valueArray[2]]) || 1;
-          const realDay = new Date(`${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]}/${day}`).getDate();
-          if (realDay < day) {
-            valueArray[2] -= realDay + max - day;
+    range: {
+      deep: true,
+      handler() {
+        this._setValueSync();
+      }
+    },
+    valueSync: {
+      deep: true,
+      handler() {
+        this._setValueArray();
+      }
+    },
+    valueArray: {
+      deep: true,
+      handler(val) {
+        if (this.mode === mode.TIME || this.mode === mode.DATE) {
+          const getValue = this.mode === mode.TIME ? this._getTimeValue : this._getDateValue;
+          const valueArray = this.valueArray;
+          const startArray = this.startArray;
+          const endArray = this.endArray;
+          if (this.mode === mode.DATE) {
+            const dateArray = this.dateArray;
+            const max = dateArray[2].length;
+            const day = Number(dateArray[2][valueArray[2]]) || 1;
+            const realDay = new Date(`${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]}/${day}`).getDate();
+            if (realDay < day) {
+              valueArray[2] -= realDay + max - day;
+            }
           }
-        }
-        if (getValue(valueArray) < getValue(startArray)) {
-          this._cloneArray(valueArray, startArray);
-        } else if (getValue(valueArray) > getValue(endArray)) {
-          this._cloneArray(valueArray, endArray);
-        }
-      }
-      val.forEach((value, column) => {
-        if (value !== this.oldValueArray[column]) {
-          this.oldValueArray[column] = value;
-          if (this.mode === mode.MULTISELECTOR) {
-            this.$trigger("columnchange", {}, {
-              column,
-              value
-            });
+          if (getValue(valueArray) < getValue(startArray)) {
+            this._cloneArray(valueArray, startArray);
+          } else if (getValue(valueArray) > getValue(endArray)) {
+            this._cloneArray(valueArray, endArray);
           }
         }
-      });
+        val.forEach((value, column) => {
+          if (value !== this.oldValueArray[column]) {
+            this.oldValueArray[column] = value;
+            if (this.mode === mode.MULTISELECTOR) {
+              this.$trigger("columnchange", {}, {
+                column,
+                value
+              });
+            }
+          }
+        });
+      }
     }
   },
   created() {

packages/uni-h5/dist/uni-h5.es.js

@@ -5368,11 +5368,11 @@ function useResizeSensorUpdate(rootRef, emit2, reset) {
   watch(() => extend({}, size), (value) => emit2("resize", value));
   return () => {
     const {
-      offsetWidth,
-      offsetHeight
-    } = rootRef.value;
-    size.width = offsetWidth;
-    size.height = offsetHeight;
+      width,
+      height
+    } = rootRef.value.getBoundingClientRect();
+    size.width = width;
+    size.height = height;
     reset();
   };
 }
@@ -9353,6 +9353,11 @@ var PickerView = /* @__PURE__ */ defineBuiltInComponent({
     const rootRef = ref(null);
     const trigger = useCustomEvent(rootRef, emit2);
     const state2 = useState$2(props2);
+    const resizeSensorRef = ref(null);
+    onMounted(() => {
+      const resizeSensor = resizeSensorRef.value;
+      state2.height = resizeSensor.$el.getBoundingClientRect().height;
+    });
     let columnVNodes = [];
     function getItemIndex(vnode) {
       return columnVNodes.indexOf(vnode);
@@ -9387,11 +9392,11 @@ var PickerView = /* @__PURE__ */ defineBuiltInComponent({
       return createVNode("uni-picker-view", {
         "ref": rootRef
       }, [createVNode(ResizeSensor, {
-        "initial": true,
+        "ref": resizeSensorRef,
         "onResize": ({
           height
         }) => state2.height = height
-      }, null, 8, ["initial", "onResize"]), createVNode("div", {
+      }, null, 8, ["onResize"]), createVNode("div", {
         "class": "uni-picker-view-wrapper"
       }, [defaultSlots])], 512);
     };
@@ -10129,6 +10134,11 @@ var PickerViewColumn = /* @__PURE__ */ defineBuiltInComponent({
     const pickerViewProps = inject("pickerViewProps");
     const pickerViewState = inject("pickerViewState");
     const indicatorHeight = ref(34);
+    const resizeSensorRef = ref(null);
+    onMounted(() => {
+      const resizeSensor = resizeSensorRef.value;
+      indicatorHeight.value = resizeSensor.$el.getBoundingClientRect().height;
+    });
     const maskSize = computed(() => (pickerViewState.height - indicatorHeight.value) / 2);
     const {
       state: scopedAttrsState
@@ -10241,11 +10251,11 @@ var PickerViewColumn = /* @__PURE__ */ defineBuiltInComponent({
         "class": ["uni-picker-view-indicator", pickerViewProps.indicatorClass],
         "style": pickerViewProps.indicatorStyle
       }), [createVNode(ResizeSensor, {
-        "initial": true,
+        "ref": resizeSensorRef,
         "onResize": ({
           height
         }) => indicatorHeight.value = height
-      }, null, 8, ["initial", "onResize"])], 16), createVNode("div", {
+      }, null, 8, ["onResize"])], 16), createVNode("div", {
         "ref": contentRef,
         "class": ["uni-picker-view-content", className],
         "style": {
@@ -18530,50 +18540,62 @@ var _sfc_main$1 = {
         }, 300);
       }
     },
-    value() {
-      this._setValueSync();
+    value: {
+      deep: true,
+      handler() {
+        this._setValueSync();
+      }
     },
     mode() {
       this._setValueSync();
     },
-    range() {
-      this._setValueSync();
+    range: {
+      deep: true,
+      handler() {
+        this._setValueSync();
+      }
     },
-    valueSync() {
-      this._setValueArray();
+    valueSync: {
+      deep: true,
+      handler() {
+        this._setValueArray();
+      }
     },
-    valueArray(val) {
-      if (this.mode === mode.TIME || this.mode === mode.DATE) {
-        const getValue = this.mode === mode.TIME ? this._getTimeValue : this._getDateValue;
-        const valueArray = this.valueArray;
-        const startArray = this.startArray;
-        const endArray = this.endArray;
-        if (this.mode === mode.DATE) {
-          const dateArray = this.dateArray;
-          const max = dateArray[2].length;
-          const day = Number(dateArray[2][valueArray[2]]) || 1;
-          const realDay = new Date(`${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]}/${day}`).getDate();
-          if (realDay < day) {
-            valueArray[2] -= realDay + max - day;
+    valueArray: {
+      deep: true,
+      handler(val) {
+        if (this.mode === mode.TIME || this.mode === mode.DATE) {
+          const getValue = this.mode === mode.TIME ? this._getTimeValue : this._getDateValue;
+          const valueArray = this.valueArray;
+          const startArray = this.startArray;
+          const endArray = this.endArray;
+          if (this.mode === mode.DATE) {
+            const dateArray = this.dateArray;
+            const max = dateArray[2].length;
+            const day = Number(dateArray[2][valueArray[2]]) || 1;
+            const realDay = new Date(`${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]}/${day}`).getDate();
+            if (realDay < day) {
+              valueArray[2] -= realDay + max - day;
+            }
           }
-        }
-        if (getValue(valueArray) < getValue(startArray)) {
-          this._cloneArray(valueArray, startArray);
-        } else if (getValue(valueArray) > getValue(endArray)) {
-          this._cloneArray(valueArray, endArray);
-        }
-      }
-      val.forEach((value, column) => {
-        if (value !== this.oldValueArray[column]) {
-          this.oldValueArray[column] = value;
-          if (this.mode === mode.MULTISELECTOR) {
-            this.$trigger("columnchange", {}, {
-              column,
-              value
-            });
+          if (getValue(valueArray) < getValue(startArray)) {
+            this._cloneArray(valueArray, startArray);
+          } else if (getValue(valueArray) > getValue(endArray)) {
+            this._cloneArray(valueArray, endArray);
           }
         }
-      });
+        val.forEach((value, column) => {
+          if (value !== this.oldValueArray[column]) {
+            this.oldValueArray[column] = value;
+            if (this.mode === mode.MULTISELECTOR) {
+              this.$trigger("columnchange", {}, {
+                column,
+                value
+              });
+            }
+          }
+        });
+      }
     }
   },
   created() {

packages/uni-h5/src/view/components/picker/index.vue

@@ -301,57 +301,69 @@ export default {
         }, 300);
       }
     },
-    value() {
-      this._setValueSync();
+    value: {
+      deep: true,
+      handler() {
+        this._setValueSync();
+      }
     },
     mode() {
       this._setValueSync();
     },
-    range() {
-      this._setValueSync();
+    range: {
+      deep: true,
+      handler() {
+        this._setValueSync();
+      }
     },
-    valueSync() {
-      this._setValueArray();
-    },
-    valueArray(val) {
-      if (this.mode === mode.TIME || this.mode === mode.DATE) {
-        const getValue =
-          this.mode === mode.TIME ? this._getTimeValue : this._getDateValue;
-        const valueArray = this.valueArray;
-        const startArray = this.startArray;
-        const endArray = this.endArray;
-        if (this.mode === mode.DATE) {
-          const dateArray = this.dateArray;
-          const max = dateArray[2].length;
-          const day = Number(dateArray[2][valueArray[2]]) || 1;
-          const realDay = new Date(
-            `${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]}/${day}`
-          ).getDate();
-          if (realDay < day) {
-            valueArray[2] -= realDay + max - day;
-          }
-        }
-        if (getValue(valueArray) < getValue(startArray)) {
-          this._cloneArray(valueArray, startArray);
-        } else if (getValue(valueArray) > getValue(endArray)) {
-          this._cloneArray(valueArray, endArray);
-        }
+    valueSync: {
+      deep: true,
+      handler() {
+        this._setValueArray();
       }
-      val.forEach((value, column) => {
-        if (value !== this.oldValueArray[column]) {
-          this.oldValueArray[column] = value;
-          if (this.mode === mode.MULTISELECTOR) {
-            this.$trigger(
-              "columnchange",
-              {},
-              {
-                column,
-                value,
-              }
-            );
+    },
+    valueArray: {
+      deep: true,
+      handler(val) {
+        if (this.mode === mode.TIME || this.mode === mode.DATE) {
+          const getValue =
+            this.mode === mode.TIME ? this._getTimeValue : this._getDateValue;
+          const valueArray = this.valueArray;
+          const startArray = this.startArray;
+          const endArray = this.endArray;
+          if (this.mode === mode.DATE) {
+            const dateArray = this.dateArray;
+            const max = dateArray[2].length;
+            const day = Number(dateArray[2][valueArray[2]]) || 1;
+            const realDay = new Date(
+              `${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]}/${day}`
+            ).getDate();
+            if (realDay < day) {
+              valueArray[2] -= realDay + max - day;
+            }
+          }
+          if (getValue(valueArray) < getValue(startArray)) {
+            this._cloneArray(valueArray, startArray);
+          } else if (getValue(valueArray) > getValue(endArray)) {
+            this._cloneArray(valueArray, endArray);
           }
         }
-      });
+        val.forEach((value, column) => {
+          if (value !== this.oldValueArray[column]) {
+            this.oldValueArray[column] = value;
+            if (this.mode === mode.MULTISELECTOR) {
+              this.$trigger(
+                "columnchange",
+                {},
+                {
+                  column,
+                  value,
+                }
+              );
+            }
+          }
+        });
+      }
     },
   },
   created() {