docs(Picker): fix missing v-model and readonly props (#12275)

Co-authored-by: xuwenqiang <xuwenqiang@kanzhun.com>

packages/vant/src/calendar/Calendar.tsx

@@ -116,6 +116,7 @@ export default defineComponent({
     'overRange',
     'update:show',
     'clickSubtitle',
+    'clickDisabledDate',
   ],
 
   setup(props, { emit, slots }) {
@@ -486,6 +487,7 @@ export default defineComponent({
             'allowSameDay',
           ])}
           onClick={onClickDay}
+          onClickDisabledDate={(item) => emit('clickDisabledDate', item)}
         />
       );
     };

packages/vant/src/calendar/CalendarDay.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
     rowHeight: String,
   },
 
-  emits: ['click'],
+  emits: ['click', 'clickDisabledDate'],
 
   setup(props, { emit, slots }) {
     const style = computed(() => {
@@ -64,6 +64,8 @@ export default defineComponent({
     const onClick = () => {
       if (props.item.type !== 'disabled') {
         emit('click', props.item);
+      } else {
+        emit('clickDisabledDate', props.item);
       }
     };
 

packages/vant/src/calendar/CalendarMonth.tsx

@@ -62,7 +62,7 @@ export default defineComponent({
 
   props: calendarMonthProps,
 
-  emits: ['click'],
+  emits: ['click', 'clickDisabledDate'],
 
   setup(props, { emit, slots }) {
     const [visible, setVisible] = useToggle();
@@ -262,6 +262,7 @@ export default defineComponent({
         offset={offset.value}
         rowHeight={rowHeight.value}
         onClick={(item) => emit('click', item)}
+        onClickDisabledDate={(item) => emit('clickDisabledDate', item)}
       />
     );
 

packages/vant/src/calendar/README.md

@@ -328,6 +328,7 @@ Following props are supported when the type is multiple
 | month-show | Emitted when a month enters the visible area | _value: { date: Date, title: string }_ |
 | over-range | Emitted when exceeded max range | - |
 | click-subtitle | Emitted when clicking the subtitle | _event: MouseEvent_ |
+| click-disabled-date | Emitted when clicking disabled date | _value: Date \| Date[]_ |
 
 ### Slots
 

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

@@ -334,6 +334,7 @@ export default {
 | month-show | 当某个月份进入可视区域时触发 | _{ date: Date, title: string }_ |
 | over-range | 范围选择超过最多可选天数时触发 | - |
 | click-subtitle | 点击日历副标题时触发 | _event: MouseEvent_ |
+| click-disabled-date | 点击禁用日期时触发 | _value: Date \| Date[]_ |
 
 ### Slots
 

packages/vant/src/calendar/test/index.spec.ts

@@ -187,6 +187,26 @@ test('should not trigger select event when click disabled day', async () => {
   expect(wrapper.emitted('select')).toBeFalsy();
 });
 
+test('should trigger click-disabled-date event when click disabled day', async () => {
+  const fn = vi.fn();
+  const wrapper = mount(Calendar, {
+    props: {
+      minDate,
+      maxDate,
+      poppable: false,
+      lazyRender: false,
+      onClickDisabledDate: fn,
+    },
+  });
+
+  await later();
+
+  const disabeldDate = wrapper.findAll('.van-calendar__day--disabled')[0];
+  expect(disabeldDate).toBeDefined();
+  await disabeldDate.trigger('click');
+  expect(fn).toHaveBeenCalled();
+});
+
 test('confirm event when type is single', async () => {
   const wrapper = mount(Calendar, {
     props: {

packages/vant/src/picker/README.md

@@ -338,6 +338,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
+| v-model | values of chosen option | _number[] \| string[]_ | - |
 | columns | Columns data | _PickerOption[] \| PickerOption[][]_ | `[]` |
 | columns-field-names | custom columns field | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
 | title | Toolbar title | _string_ | - |
@@ -345,6 +346,7 @@ export default {
 | cancel-button-text | Text of cancel 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` |
 | show-toolbar | Whether to show toolbar | _boolean_ | `true` |
 | allow-html | Whether to allow HTML in option text | _boolean_ | `false` |
 | option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |

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

@@ -359,6 +359,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| v-model | 当前选中项对应的值 | _number[] \| string[]_ | - |
 | columns | 对象数组，配置每一列显示的数据 | _PickerOption[] \| PickerOption[][]_ | `[]` |
 | columns-field-names | 自定义 `columns` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
 | title | 顶部栏标题 | _string_ | - |
@@ -366,6 +367,7 @@ export default {
 | cancel-button-text | 取消按钮文字 | _string_ | `取消` |
 | toolbar-position | 顶部栏位置，可选值为 `bottom` | _string_ | `top` |
 | loading | 是否显示加载状态 | _boolean_ | `false` |
+| readonly | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` |
 | show-toolbar | 是否显示顶部栏 | _boolean_ | `true` |
 | allow-html | 是否允许选项内容中渲染 HTML | _boolean_ | `false` |
 | option-height | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` |