diff --git a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap index 3198a1cac..fb2b85d81 100644 --- a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap @@ -165,6 +165,14 @@ exports[`should render demo and match snapshot 1`] = ` </li> </ul> </div> + <div class="van-picker__mask" + style="background-size: 100% 110px;" + > + </div> + <div class="van-hairline-unset--top-bottom van-picker__frame" + style="height: 44px;" + > + </div> </div> </div> </div> @@ -323,6 +331,14 @@ exports[`should render demo and match snapshot 1`] = ` </li> </ul> </div> + <div class="van-picker__mask" + style="background-size: 100% 110px;" + > + </div> + <div class="van-hairline-unset--top-bottom van-picker__frame" + style="height: 44px;" + > + </div> </div> </div> </div> @@ -394,6 +410,14 @@ exports[`should render demo and match snapshot 1`] = ` </li> </ul> </div> + <div class="van-picker__mask" + style="background-size: 100% 110px;" + > + </div> + <div class="van-hairline-unset--top-bottom van-picker__frame" + style="height: 44px;" + > + </div> </div> </div> </div> @@ -471,6 +495,14 @@ exports[`should render demo and match snapshot 1`] = ` > </ul> </div> + <div class="van-picker__mask" + style="background-size: 100% 110px;" + > + </div> + <div class="van-hairline-unset--top-bottom van-picker__frame" + style="height: 44px;" + > + </div> </div> </div> </div> diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 6c9fdd3e3..92a3a393f 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -87,6 +87,7 @@ export default defineComponent({ } } + const hasOptions = ref(false); const formattedColumns = ref<PickerObjectColumn[]>([]); const { @@ -164,6 +165,10 @@ export default defineComponent({ } else { formattedColumns.value = columns as PickerObjectColumn[]; } + + hasOptions.value = formattedColumns.value.some( + (item) => item[valuesKey] && item[valuesKey].length !== 0 + ); }; // get indexes of all columns @@ -174,6 +179,7 @@ export default defineComponent({ const column = children[index]; if (column) { column.setOptions(options); + hasOptions.value = true; } }; @@ -353,11 +359,7 @@ export default defineComponent({ )); const renderMask = (wrapHeight: number) => { - const hasOptions = formattedColumns.value.some( - (item) => item[valuesKey] && item[valuesKey].length !== 0 - ); - - if (hasOptions) { + if (hasOptions.value) { const frameStyle = { height: `${itemHeight.value}px` }; const maskStyle = { backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`,