fix(Picker): should not render mask and frame when options is empty (#10135)

* docs(Search): update action slot demo

* fix(Picker): should not render mask and frame when options is empty

packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap

@@ -165,14 +165,6 @@ 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>
@@ -331,14 +323,6 @@ 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>
@@ -410,14 +394,6 @@ 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>
@@ -495,14 +471,6 @@ 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>

packages/vant/src/area/test/__snapshots__/index.spec.js.snap

@@ -36,14 +36,6 @@ exports[`should render columns-top、columns-bottom slot correctly 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>
   Bottom
 </div>
@@ -130,14 +122,6 @@ exports[`should render two columns when columns-num prop is two 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>
 `;

packages/vant/src/picker/Picker.tsx

@@ -352,14 +352,29 @@ export default defineComponent({
         />
       ));
 
+    const renderMask = (wrapHeight: number) => {
+      const hasOptions = formattedColumns.value.some(
+        (item) => item[valuesKey] && item[valuesKey].length !== 0
+      );
+
+      if (hasOptions) {
+        const frameStyle = { height: `${itemHeight.value}px` };
+        const maskStyle = {
+          backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`,
+        };
+        return [
+          <div class={bem('mask')} style={maskStyle} />,
+          <div
+            class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
+            style={frameStyle}
+          />,
+        ];
+      }
+    };
+
     const renderColumns = () => {
       const wrapHeight = itemHeight.value * +props.visibleItemCount;
-      const frameStyle = { height: `${itemHeight.value}px` };
       const columnsStyle = { height: `${wrapHeight}px` };
-      const maskStyle = {
-        backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`,
-      };
-
       return (
         <div
           class={bem('columns')}
@@ -367,11 +382,7 @@ export default defineComponent({
           onTouchmove={preventDefault}
         >
           {renderColumnItems()}
-          <div class={bem('mask')} style={maskStyle} />
+          {renderMask(wrapHeight)}
-          <div
-            class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
-            style={frameStyle}
-          />
         </div>
       );
     };

packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap

@@ -168,14 +168,6 @@ exports[`columns-top、columns-bottom prop 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>
   Custom Columns Bottom
 </div>
@@ -403,14 +395,6 @@ exports[`should render confirm/cancel slot correctly 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>
 `;
@@ -439,14 +423,6 @@ exports[`should render title slot correctly 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>
 `;
@@ -465,14 +441,6 @@ exports[`should render toolbar slot correctly 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>
 `;
@@ -488,14 +456,6 @@ exports[`toolbar-position prop 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 class="van-picker__toolbar">
     <button type="button"

packages/vant/src/picker/test/index.spec.tsx

@@ -345,3 +345,17 @@ test('readonly prop', () => {
 
   expect(wrapper.emitted('change')).toBeFalsy();
 });
+
+test('should not render mask and frame when options is empty', async () => {
+  const wrapper = mount(Picker, {
+    props: {
+      columns: [{ values: [] }],
+    },
+  });
+  expect(wrapper.find('.van-picker__mask').exists()).toBeFalsy();
+  expect(wrapper.find('.van-picker__frame').exists()).toBeFalsy();
+
+  await wrapper.setProps({ columns: [{ values: ['foo'] }] });
+  expect(wrapper.find('.van-picker__mask').exists()).toBeTruthy();
+  expect(wrapper.find('.van-picker__frame').exists()).toBeTruthy();
+});