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>

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

@@ -36,6 +36,14 @@ 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>
@@ -122,6 +130,14 @@ 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,29 +352,14 @@ 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')}
@@ -382,7 +367,11 @@ export default defineComponent({
           onTouchmove={preventDefault}
         >
           {renderColumnItems()}
-          {renderMask(wrapHeight)}
+          <div class={bem('mask')} style={maskStyle} />
+          <div
+            class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
+            style={frameStyle}
+          />
         </div>
       );
     };

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

@@ -168,6 +168,14 @@ 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>
@@ -395,6 +403,14 @@ 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>
 `;
@@ -423,6 +439,14 @@ 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>
 `;
@@ -441,6 +465,14 @@ 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>
 `;
@@ -456,6 +488,14 @@ 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,17 +345,3 @@ 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();
-});

packages/vant/src/search/Search.tsx

@@ -40,15 +40,7 @@ export default defineComponent({
 
   props: searchProps,
 
-  emits: [
-    'blur',
-    'focus',
-    'clear',
-    'search',
-    'cancel',
-    'click-input',
-    'update:modelValue',
-  ],
+  emits: ['search', 'cancel', 'update:modelValue'],
 
   setup(props, { emit, slots, attrs }) {
     const id = useId();
@@ -99,10 +91,6 @@ export default defineComponent({
 
     const blur = () => filedRef.value?.blur();
     const focus = () => filedRef.value?.focus();
-    const onBlur = (event: Event) => emit('blur', event);
-    const onFocus = (event: Event) => emit('focus', event);
-    const onClear = (event: MouseEvent) => emit('clear', event);
-    const onClickInput = (event: MouseEvent) => emit('click-input', event);
 
     const fieldPropNames = Object.keys(fieldSharedProps) as Array<
       keyof typeof fieldSharedProps
@@ -122,11 +110,7 @@ export default defineComponent({
           type="search"
           class={bem('field')}
           border={false}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          onClear={onClear}
           onKeypress={onKeypress}
-          onClick-input={onClickInput}
           onUpdate:modelValue={onInput}
           {...fieldAttrs}
         />