From 546639d6af76266d8a0994d73267be213961d552 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 7 Jan 2022 17:38:06 +0800
Subject: [PATCH] fix(Area): missing picker mask (#10164)

---
 .../area/test/__snapshots__/demo.spec.ts.snap | 32 +++++++++++++++++++
 packages/vant/src/picker/Picker.tsx           | 12 ++++---
 2 files changed, 39 insertions(+), 5 deletions(-)

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`,