feat(Popup): add destroy-on-close prop

packages/vant/src/composables/use-lazy-render.ts

@@ -13,5 +13,6 @@ export function useLazyRender(show: WatchSource<boolean | undefined>) {
     { immediate: true },
   );
 
-  return (render: () => JSX.Element) => () => (inited.value ? render() : null);
+  return (render: () => JSX.Element | undefined) => () =>
+    inited.value ? render() : null;
 }

packages/vant/src/form/README.md

@@ -328,8 +328,9 @@ export default {
   placeholder="Select city"
   @click="showPicker = true"
 />
-<van-popup v-model:show="showPicker" position="bottom">
+<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
   <van-picker
+    :model-value="pickerValue"
     :columns="columns"
     @confirm="onConfirm"
     @cancel="showPicker = false"
@@ -343,6 +344,7 @@ import { ref } from 'vue';
 export default {
   setup() {
     const result = ref('');
+    const pickerValue = ref([]);
     const showPicker = ref(false);
     const columns = [
       { text: 'Delaware', value: 'Delaware' },
@@ -352,13 +354,15 @@ export default {
       { text: 'Maine', value: 'Maine' },
     ];
 
-    const onConfirm = ({ selectedOptions }) => {
+    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"
 />
-<van-popup v-model:show="showPicker" position="bottom">
-  <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
+<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
+  <van-date-picker
+    :model-value="pickerValue"
+    @confirm="onConfirm"
+    @cancel="showPicker = false"
+  />
 </van-popup>
 ```
 
@@ -391,13 +399,16 @@ export default {
   setup() {
     const result = ref('');
     const showPicker = ref(false);
+    const pickerValue = ref<string[]>([]);
     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"
 />
-<van-popup v-model:show="showArea" position="bottom">
+<van-popup v-model:show="showArea" destroy-on-close position="bottom">
   <van-area
     :area-list="areaList"
+    :model-value="pickerValue"
     @confirm="onConfirm"
     @cancel="showArea = false"
   />
@@ -434,14 +446,19 @@ 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('/');
     };
 
     return {
       result,
       areaList,
+      pickerValue,
       showArea,
       onConfirm,
     };

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

@@ -354,9 +354,10 @@ export default {
   placeholder="点击选择城市"
   @click="showPicker = true"
 />
-<van-popup v-model:show="showPicker" position="bottom">
+<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
   <van-picker
     :columns="columns"
+    :model-value="pickerValue"
     @confirm="onConfirm"
     @cancel="showPicker = false"
   />
@@ -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"
 />
-<van-popup v-model:show="showPicker" position="bottom">
-  <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
+<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
+  <van-date-picker
+    :model-value="pickerValue"
+    @confirm="onConfirm"
+    @cancel="showPicker = false"
+  />
 </van-popup>
 ```
 
@@ -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"
 />
-<van-popup v-model:show="showArea" position="bottom">
+<van-popup v-model:show="showArea" destroy-on-close position="bottom">
   <van-area
     :area-list="areaList"
+    :model-value="pickerValue"
     @confirm="onConfirm"
     @cancel="showArea = false"
   />
@@ -464,14 +476,19 @@ 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('/');
     };
 
     return {
       result,
       areaList,
+      pickerValue,
       showArea,
       onConfirm,
     };

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"
   />
-  <van-popup v-model:show="showArea" round position="bottom" teleport="body">
+  <van-popup
+    v-model:show="showArea"
+    destroy-on-close
+    round
+    position="bottom"
+    teleport="body"
+  >
     <van-area
       :area-list="t('areaList')"
+      :model-value="pickerValue"
       @confirm="onConfirm"
       @cancel="onCancel"
     />

packages/vant/src/form/demo/FieldTypeDatePicker.vue

@@ -18,10 +18,12 @@ const t = useTranslate({
 });
 
 const result = ref('');
+const pickerValue = ref<string[]>([]);
 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"
   />
-  <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
-    <van-date-picker @confirm="onConfirm" @cancel="onCancel" />
+  <van-popup
+    v-model:show="showPicker"
+    destroy-on-close
+    round
+    position="bottom"
+    teleport="body"
+  >
+    <van-date-picker
+      :model-value="pickerValue"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+    />
   </van-popup>
 </template>

packages/vant/src/form/demo/FieldTypePicker.vue

@@ -21,10 +21,15 @@ const t = useTranslate({
 });
 
 const result = ref<Numeric>('');
+const pickerValue = ref<Numeric[]>([]);
 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"
   />
-  <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
+  <van-popup
+    v-model:show="showPicker"
+    destroy-on-close
+    round
+    position="bottom"
+    teleport="body"
+  >
     <van-picker
+      :model-value="pickerValue"
       :columns="t('textColumns')"
       @confirm="onConfirm"
       @cancel="onCancel"

packages/vant/src/picker/README.md

@@ -71,8 +71,9 @@ export default {
   placeholder="Choose City"
   @click="showPicker = true"
 />
-<van-popup v-model:show="showPicker" round position="bottom">
+<van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
   <van-picker
+    :model-value="pickerValue"
     title="Title"
     :columns="columns"
     @cancel="showPicker = false"
@@ -94,10 +95,12 @@ export default {
       { text: 'Maine', value: 'Maine' },
     ];
     const fieldValue = ref('');
+    const pickerValue = ref<Numeric[]>([]);
     const showPicker = ref(false);
 
-    const onConfirm = ({ selectedOptions }) => {
+    const onConfirm = ({ selectedValues, selectedOptions }) => {
       showPicker.value = false;
+      pickerValue.value = selectedValues;
       fieldValue.value = selectedOptions[0].text;
     };
 

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

@@ -81,8 +81,9 @@ export default {
   placeholder="选择城市"
   @click="showPicker = true"
 />
-<van-popup v-model:show="showPicker" round position="bottom">
+<van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
   <van-picker
+    :model-value="pickerValue"
     :columns="columns"
     @cancel="showPicker = false"
     @confirm="onConfirm"
@@ -104,9 +105,10 @@ export default {
     ];
     const fieldValue = ref('');
     const showPicker = ref(false);
-
-    const onConfirm = ({ selectedOptions }) => {
+    const pickerValue = ref<Numeric[]>([]);
+    const onConfirm = ({ selectedValues, selectedOptions }) => {
       showPicker.value = false;
+      pickerValue.value = selectedValues;
       fieldValue.value = selectedOptions[0].text;
     };