diff --git a/packages/vant/src/composables/use-lazy-render.ts b/packages/vant/src/composables/use-lazy-render.ts index 301a06f3dd9..d9fc71f8101 100644 --- a/packages/vant/src/composables/use-lazy-render.ts +++ b/packages/vant/src/composables/use-lazy-render.ts @@ -13,5 +13,6 @@ export function useLazyRender(show: WatchSource) { { immediate: true }, ); - return (render: () => JSX.Element) => () => (inited.value ? render() : null); + return (render: () => JSX.Element | undefined) => () => + inited.value ? render() : null; } diff --git a/packages/vant/src/form/README.md b/packages/vant/src/form/README.md index e150e39483d..9560ab81cb6 100644 --- a/packages/vant/src/form/README.md +++ b/packages/vant/src/form/README.md @@ -328,8 +328,9 @@ export default { placeholder="Select city" @click="showPicker = true" /> - + { + const onConfirm = ({ selectedValues, selectedOptions }) => { result.value = selectedOptions[0]?.text; + pickerValue.value = selectedValues; showPicker.value = false; }; return { result, + pickerValue, columns, onConfirm, showPicker, @@ -379,8 +383,12 @@ export default { placeholder="Select date" @click="showPicker = true" /> - - + + ``` @@ -391,13 +399,16 @@ export default { setup() { const result = ref(''); const showPicker = ref(false); + const pickerValue = ref([]); const onConfirm = ({ selectedValues }) => { result.value = selectedValues.join('/'); + pickerValue.value = selectedValues; showPicker.value = false; }; return { result, + pickerValue, onConfirm, showPicker, }; @@ -417,9 +428,10 @@ export default { placeholder="Select area" @click="showArea = true" /> - + @@ -434,7 +446,11 @@ export default { setup() { const result = ref(''); const showArea = ref(false); - const onConfirm = ({ selectedOptions }) => { + const pickerValue = ref(''); + const onConfirm = ({ selectedValues, selectedOptions }) => { + pickerValue.value = selectedValues.length + ? selectedValues[selectedValues.length - 1] + : ''; showArea.value = false; result.value = selectedOptions.map((item) => item.text).join('/'); }; @@ -442,6 +458,7 @@ export default { return { result, areaList, + pickerValue, showArea, onConfirm, }; diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md index 0e93a318602..a261b04f018 100644 --- a/packages/vant/src/form/README.zh-CN.md +++ b/packages/vant/src/form/README.zh-CN.md @@ -354,9 +354,10 @@ export default { placeholder="点击选择城市" @click="showPicker = true" /> - + @@ -369,6 +370,7 @@ import { ref } from 'vue'; export default { setup() { const result = ref(''); + const pickerValue = ref([]); const showPicker = ref(false); const columns = [ { text: '杭州', value: 'Hangzhou' }, @@ -378,13 +380,15 @@ export default { { text: '湖州', value: 'Huzhou' }, ]; - const onConfirm = ({ selectedOptions }) => { + const onConfirm = ({ selectedValues, selectedOptions }) => { result.value = selectedOptions[0]?.text; + pickerValue.value = selectedValues; showPicker.value = false; }; return { result, + pickerValue, columns, onConfirm, showPicker, @@ -407,8 +411,12 @@ export default { placeholder="点击选择时间" @click="showPicker = true" /> - - + + ``` @@ -419,13 +427,16 @@ export default { setup() { const result = ref(''); const showPicker = ref(false); + const pickerValue = ref([]); const onConfirm = ({ selectedValues }) => { result.value = selectedValues.join('/'); + pickerValue.value = selectedValues; showPicker.value = false; }; return { result, + pickerValue, onConfirm, showPicker, }; @@ -447,9 +458,10 @@ export default { placeholder="点击选择省市区" @click="showArea = true" /> - + @@ -464,7 +476,11 @@ export default { setup() { const result = ref(''); const showArea = ref(false); - const onConfirm = ({ selectedOptions }) => { + const pickerValue = ref([]); + const onConfirm = ({ selectedValues, selectedOptions }) => { + pickerValue.value = selectedValues.length + ? selectedValues[selectedValues.length - 1] + : ''; showArea.value = false; result.value = selectedOptions.map((item) => item.text).join('/'); }; @@ -472,6 +488,7 @@ export default { return { result, areaList, + pickerValue, showArea, onConfirm, }; diff --git a/packages/vant/src/form/demo/FieldTypeArea.vue b/packages/vant/src/form/demo/FieldTypeArea.vue index ae7b1d2d534..4a070121391 100644 --- a/packages/vant/src/form/demo/FieldTypeArea.vue +++ b/packages/vant/src/form/demo/FieldTypeArea.vue @@ -22,10 +22,17 @@ const t = useTranslate({ }); const areaCode = ref(''); +const pickerValue = ref(''); const showArea = ref(false); -const onConfirm = ({ selectedOptions }: PickerConfirmEventParams) => { +const onConfirm = ({ + selectedValues, + selectedOptions, +}: PickerConfirmEventParams) => { areaCode.value = selectedOptions.map((item) => item!.text).join('/'); + pickerValue.value = selectedValues.length + ? (selectedValues[selectedValues.length - 1] as string) + : ''; showArea.value = false; }; @@ -44,9 +51,16 @@ const onCancel = () => { :placeholder="t('placeholder')" @click="showArea = true" /> - + diff --git a/packages/vant/src/form/demo/FieldTypeDatePicker.vue b/packages/vant/src/form/demo/FieldTypeDatePicker.vue index 7b071a8f1c3..e71b3fe167d 100644 --- a/packages/vant/src/form/demo/FieldTypeDatePicker.vue +++ b/packages/vant/src/form/demo/FieldTypeDatePicker.vue @@ -18,10 +18,12 @@ const t = useTranslate({ }); const result = ref(''); +const pickerValue = ref([]); const showPicker = ref(false); const onConfirm = ({ selectedValues }: PickerConfirmEventParams) => { result.value = selectedValues.join('/'); + pickerValue.value = selectedValues as string[]; showPicker.value = false; }; @@ -40,7 +42,17 @@ const onCancel = () => { :placeholder="t('placeholder')" @click="showPicker = true" /> - - + + diff --git a/packages/vant/src/form/demo/FieldTypePicker.vue b/packages/vant/src/form/demo/FieldTypePicker.vue index b397a71498c..0757e716dd7 100644 --- a/packages/vant/src/form/demo/FieldTypePicker.vue +++ b/packages/vant/src/form/demo/FieldTypePicker.vue @@ -21,10 +21,15 @@ const t = useTranslate({ }); const result = ref(''); +const pickerValue = ref([]); const showPicker = ref(false); -const onConfirm = ({ selectedOptions }: PickerConfirmEventParams) => { +const onConfirm = ({ + selectedValues, + selectedOptions, +}: PickerConfirmEventParams) => { result.value = selectedOptions[0]?.text || ''; + pickerValue.value = selectedValues; showPicker.value = false; }; @@ -43,8 +48,15 @@ const onCancel = () => { :placeholder="t('placeholder')" @click="showPicker = true" /> - + - + ([]); const showPicker = ref(false); - const onConfirm = ({ selectedOptions }) => { + const onConfirm = ({ selectedValues, selectedOptions }) => { showPicker.value = false; + pickerValue.value = selectedValues; fieldValue.value = selectedOptions[0].text; }; diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md index 065ce9de59a..c40b4312f3c 100644 --- a/packages/vant/src/picker/README.zh-CN.md +++ b/packages/vant/src/picker/README.zh-CN.md @@ -81,8 +81,9 @@ export default { placeholder="选择城市" @click="showPicker = true" /> - + { + const pickerValue = ref([]); + const onConfirm = ({ selectedValues, selectedOptions }) => { showPicker.value = false; + pickerValue.value = selectedValues; fieldValue.value = selectedOptions[0].text; }; diff --git a/packages/vant/src/picker/demo/WithPopup.vue b/packages/vant/src/picker/demo/WithPopup.vue index 02d46e6da39..182d704fcbd 100644 --- a/packages/vant/src/picker/demo/WithPopup.vue +++ b/packages/vant/src/picker/demo/WithPopup.vue @@ -6,6 +6,7 @@ import VanPopup from '../../popup'; import { basicColumns } from './data'; import { useTranslate } from '../../../docs/site'; import type { PickerConfirmEventParams } from '../types'; +import type { Numeric } from '../../utils'; const t = useTranslate({ 'zh-CN': { @@ -24,6 +25,7 @@ const t = useTranslate({ const showPicker = ref(false); const fieldValue = ref(''); +const pickerValue = ref([]); const onClickField = () => { showPicker.value = true; @@ -31,8 +33,12 @@ const onClickField = () => { const onCancel = () => { showPicker.value = false; }; -const onConfirm = ({ selectedOptions }: PickerConfirmEventParams) => { +const onConfirm = ({ + selectedValues, + selectedOptions, +}: PickerConfirmEventParams) => { showPicker.value = false; + pickerValue.value = selectedValues; fieldValue.value = selectedOptions[0]!.text as string; }; @@ -47,8 +53,14 @@ const onConfirm = ({ selectedOptions }: PickerConfirmEventParams) => { :placeholder="t('chooseCity')" @click="onClickField" /> - + ('top-right'), + destroyOnClose: Boolean, safeAreaInsetTop: Boolean, safeAreaInsetBottom: Boolean, }); @@ -186,11 +187,22 @@ export default defineComponent({ const onKeydown = (event: KeyboardEvent) => emit('keydown', event); const renderPopup = lazyRender(() => { - const { round, position, safeAreaInsetTop, safeAreaInsetBottom } = props; + const { + destroyOnClose, + round, + position, + safeAreaInsetTop, + safeAreaInsetBottom, + show, + } = props; + + if (!show && destroyOnClose) { + return; + } return (
{ + const wrapper = mount(Popup, { + props: { + show: false, + destroyOnClose: true, + }, + slots: { + default: () =>
, + }, + }); + + expect(wrapper.find('.foo').exists()).toBeFalsy(); + + await wrapper.setProps({ show: true }); + expect(wrapper.find('.foo').exists()).toBeTruthy(); + + await wrapper.setProps({ show: false }); + expect(wrapper.find('.foo').exists()).toBeFalsy(); +});