feat(Picker): allow to hidden to toolbar buttons (#12599)

packages/vant/src/picker/PickerToolbar.tsx

@@ -39,7 +39,12 @@ export default defineComponent({
     const onConfirm = () => emit('confirm');
 
     const renderCancel = () => {
-      const text = props.cancelButtonText || t('cancel');
+      const text = props.cancelButtonText ?? t('cancel');
+
+      if (!slots.cancel && !text) {
+        return;
+      }
+
       return (
         <button
           type="button"
@@ -52,7 +57,12 @@ export default defineComponent({
     };
 
     const renderConfirm = () => {
-      const text = props.confirmButtonText || t('confirm');
+      const text = props.confirmButtonText ?? t('confirm');
+
+      if (!slots.confirm && !text) {
+        return;
+      }
+
       return (
         <button
           type="button"

packages/vant/src/picker/README.md

@@ -342,8 +342,8 @@ export default {
 | columns | Columns data | _PickerOption[] \| PickerOption[][]_ | `[]` |
 | columns-field-names | custom columns field | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
 | title | Toolbar title | _string_ | - |
-| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
+| confirm-button-text | Text of confirm button, setting it as an empty string can hide the button | _string_ | `Confirm` |
-| cancel-button-text | Text of cancel button | _string_ | `Cancel` |
+| cancel-button-text | Text of cancel button, setting it as an empty string can hide the button | _string_ | `Cancel` |
 | toolbar-position | Toolbar position, cat be set to `bottom` | _string_ | `top` |
 | loading | Whether to show loading prompt | _boolean_ | `false` |
 | readonly | Whether to be readonly | _boolean_ | `false` |

packages/vant/src/picker/README.zh-CN.md

@@ -363,8 +363,8 @@ export default {
 | columns | 对象数组，配置每一列显示的数据 | _PickerOption[] \| PickerOption[][]_ | `[]` |
 | columns-field-names | 自定义 `columns` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
 | title | 顶部栏标题 | _string_ | - |
-| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
+| confirm-button-text | 确认按钮文字，设置为空字符串可以隐藏按钮 | _string_ | `确认` |
-| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
+| cancel-button-text | 取消按钮文字，设置为空字符串可以隐藏按钮 | _string_ | `取消` |
 | toolbar-position | 顶部栏位置，可选值为 `bottom` | _string_ | `top` |
 | loading | 是否显示加载状态 | _boolean_ | `false` |
 | readonly | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` |

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

@@ -408,3 +408,15 @@ test('should be displayed correctly whhen the component is reused', async () =>
       .selectedValues,
   ).toEqual(['1992', '03']);
 });
+
+test('should allow to skip rendering confirm and cancel buttons', async () => {
+  const wrapper = mount(Picker, {
+    props: {
+      confirmButtonText: '',
+      cancelButtonText: '',
+    },
+  });
+
+  expect(wrapper.find('.van-picker__confirm').exists()).toBeFalsy();
+  expect(wrapper.find('.van-picker__cancel').exists()).toBeFalsy();
+});