feat: datepicker去掉内置popup

src/packages/__VUE/datepicker/demo.vue

@@ -1,47 +1,31 @@
 <template>
   <div class="demo">
-    <nut-cell-group :title="translate('basic')">
-      <nut-cell :title="translate('showChinese')" :desc="desc1" @click="show = true"></nut-cell>
-    </nut-cell-group>
-
-    <nut-cell-group :title="translate('mmdd')">
-      <nut-cell :title="translate('setStartEnd')" :desc="desc2" @click="show2 = true"></nut-cell>
-    </nut-cell-group>
-
-    <nut-cell-group :title="translate('showAll')">
-      <nut-cell :title="translate('chooseDate')" :desc="desc3" @click="show3 = true"></nut-cell>
-    </nut-cell-group>
-
-    <nut-cell-group :title="translate('time')">
-      <nut-cell :title="translate('chooseTime')" :desc="desc4" @click="show4 = true"></nut-cell>
-    </nut-cell-group>
-
-    <nut-cell-group :title="translate('format')">
-      <nut-cell :title="translate('chooseTime')" :desc="desc5" @click="show5 = true"></nut-cell>
-    </nut-cell-group>
-
-    <nut-cell-group :title="translate('stepMins')">
-      <nut-cell :title="translate('chooseTime')" :desc="desc6" @click="show6 = true"></nut-cell>
-    </nut-cell-group>
-
-    <nut-cell-group :title="translate('filter')">
-      <nut-cell :title="translate('chooseTime')" :desc="desc7" @click="show7 = true"></nut-cell>
-    </nut-cell-group>
-
+    <h2>{{ translate('basic') }}</h2>
     <!-- 选择年月日 -->
     <nut-date-picker
       v-model="currentDate"
       :min-date="minDate"
       :max-date="maxDate"
-      @confirm="
-        (val) => {
-          confirm(0, val);
-        }
-      "
-      v-model:visible="show"
+      @confirm="confirm"
       :is-show-chinese="true"
       :threeDimensional="false"
     ></nut-date-picker>
+
+    <h2>{{ translate('popupDesc') }}</h2>
+    <nut-cell :title="translate('basic')" :desc="popupDesc" @click="show = true"></nut-cell>
+    <nut-popup position="bottom" v-model:visible="show">
+      <nut-date-picker
+        v-model="currentDate"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @confirm="popupConfirm"
+        :is-show-chinese="true"
+        :threeDimensional="false"
+      >
+        <nut-button block type="primary" @click="alwaysFun">{{ translate('forever') }}</nut-button>
+      </nut-date-picker>
+    </nut-popup>
+    <h2>{{ translate('mmdd') }}</h2>
     <!-- 选择月日 -->
     <nut-date-picker
       v-model="currentDate2"
@@ -49,13 +33,10 @@
       :title="translate('basic')"
       :min-date="new Date(2022, 0, 1)"
       :max-date="new Date(2022, 7, 1)"
-      @confirm="
-        (val) => {
-          confirm(1, val);
-        }
-      "
-      v-model:visible="show2"
+      @confirm="confirm5"
     ></nut-date-picker>
+    <h2>{{ translate('showAll') }}</h2>
+
     <!-- 选择年月日时分 -->
     <nut-date-picker
       v-model="currentDate3"
@@ -63,13 +44,10 @@
       type="datetime"
       :min-date="minDate"
       :max-date="maxDate"
-      @confirm="
-        (val) => {
-          confirm(2, val);
-        }
-      "
-      v-model:visible="show3"
+      @confirm="confirm2"
     ></nut-date-picker>
+    <h2>{{ translate('time') }}</h2>
+
     <!-- 选择时分秒 -->
     <nut-date-picker
       v-model="currentDate4"
@@ -77,13 +55,10 @@
       type="time"
       :min-date="minDate"
       :max-date="maxDate"
-      @confirm="
-        (val) => {
-          confirm(3, val);
-        }
-      "
-      v-model:visible="show4"
+      @confirm="confirm3"
     ></nut-date-picker>
+    <h2>{{ translate('format') }}</h2>
+
     <!-- 格式化选项 -->
     <nut-date-picker
       v-model="currentDate5"
@@ -92,14 +67,10 @@
       :min-date="new Date(2022, 0, 1)"
       :max-date="new Date(2022, 10, 1)"
       :formatter="formatter"
-      @confirm="
-        (val) => {
-          confirm(4, val);
-        }
-      "
-      v-model:visible="show5"
-      ><nut-button block type="primary" @click="alwaysFun">{{ translate('forever') }}</nut-button></nut-date-picker
-    >
+      @confirm="confirm4"
+    ></nut-date-picker>
+    <h2>{{ translate('stepMins') }}</h2>
+
     <!-- 分钟数递增步长设置 -->
     <nut-date-picker
       v-model="currentDate6"
@@ -108,13 +79,9 @@
       :min-date="minDate"
       :max-date="maxDate"
       :minute-step="5"
-      @confirm="
-        (val) => {
-          confirm(5, val);
-        }
-      "
-      v-model:visible="show6"
+      @confirm="confirm3"
     ></nut-date-picker>
+    <h2>{{ translate('filter') }}</h2>
     <!-- 过滤选项 -->
     <nut-date-picker
       v-model="currentDate7"
@@ -124,12 +91,7 @@
       :max-date="maxDate"
       :filter="filter"
       :formatter="formatter1"
-      @confirm="
-        (val) => {
-          confirm(6, val);
-        }
-      "
-      v-model:visible="show7"
+      @confirm="confirm"
     ></nut-date-picker>
   </div>
 </template>
@@ -139,6 +101,7 @@ import { toRefs, watch, ref, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('date-picker');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Toast } from '@/packages/nutui.vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -159,7 +122,8 @@ const initTranslate = () =>
       day: '日',
       hour: '时',
       min: '分',
-      seconds: '秒'
+      seconds: '秒',
+      popupDesc: '搭配 Popup 使用'
     },
     'en-US': {
       basic: 'Choose Date',
@@ -179,7 +143,8 @@ const initTranslate = () =>
       day: 'Day',
       hour: 'Hour',
       min: 'Minute',
-      seconds: 'Second'
+      seconds: 'Second',
+      popupDesc: 'With Popup'
     }
   });
 export default createDemo({
@@ -187,12 +152,7 @@ export default createDemo({
   setup() {
     initTranslate();
     const show = ref(false);
-    const show2 = ref(false);
-    const show3 = ref(false);
-    const show4 = ref(false);
-    const show5 = ref(false);
-    const show6 = ref(false);
-    const show7 = ref(false);
+    const popupDesc = ref();
 
     const CurrentDate = reactive({
       currentDate: new Date(2022, 4, 10, 10, 10),
@@ -204,15 +164,6 @@ export default createDemo({
       currentDate7: new Date(2022, 4, 10, 0, 0)
     });
 
-    const desc1 = ref(`2022${translate('year')} 05${translate('month')} 10${translate('day')}`);
-    const desc2 = ref('05-10');
-    const desc3 = ref('2022-05-10 10:10');
-    const desc4 = ref('10:10:00');
-    const desc5 = ref(`2022${translate('year')} 05${translate('month')} 10${translate('day')} 10:10`);
-    const desc6 = ref('10:10:00');
-    const desc7 = ref(`2022${translate('year')} 05${translate('month')} 10${translate('day')} 00${translate('hour')}`);
-    const descList = [desc1, desc2, desc3, desc4, desc5, desc6, desc7];
-
     const formatter = (type: string, option) => {
       switch (type) {
         case 'year':
@@ -263,62 +214,78 @@ export default createDemo({
       return options;
     };
 
-    const confirm = (
-      index: number,
-      { selectedValue, selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }
-    ) => {
-      let date = '';
-      let time = '';
-      console.log({ selectedValue, selectedOptions });
-      switch (index) {
-        case 0:
-        case 6:
-          descList[index].value = selectedOptions.map((option) => option.text).join(' ');
-          break;
-        case 2:
-          date = selectedValue.slice(0, 3).join('-');
-          time = selectedValue.slice(3).join(':');
-          descList[index].value = date + ' ' + time;
-          break;
-        case 3:
-        case 5:
-          descList[index].value = selectedValue.join(':');
-          break;
-        case 4:
-          date = selectedOptions
-            .slice(1, 3)
-            .map((op) => op.text)
-            .join('');
-          time = selectedOptions
-            .slice(3)
-            .map((op) => op.value)
-            .join(':');
-          descList[index].value = selectedOptions[0].text + translate('year') + date + ' ' + time;
-          break;
-        default:
-          descList[index].value = selectedValue.join('-');
-      }
+    const confirm = ({
+      selectedValue,
+      selectedOptions
+    }: {
+      selectedValue: (string | number)[];
+      selectedOptions: any;
+    }) => {
+      Toast.text(selectedOptions.map((val: any) => val.text).join(''));
+    };
+
+    const confirm2 = ({
+      selectedValue,
+      selectedOptions
+    }: {
+      selectedValue: (string | number)[];
+      selectedOptions: any;
+    }) => {
+      const date = selectedValue.slice(0, 3).join('-');
+      const time = selectedValue.slice(3).join(':');
+      Toast.text(date + ' ' + time);
+    };
+
+    const confirm3 = ({
+      selectedValue,
+      selectedOptions
+    }: {
+      selectedValue: (string | number)[];
+      selectedOptions: any;
+    }) => {
+      Toast.text(selectedValue.join(':'));
+    };
+
+    const confirm4 = ({
+      selectedValue,
+      selectedOptions
+    }: {
+      selectedValue: (string | number)[];
+      selectedOptions: any;
+    }) => {
+      const date = selectedOptions
+        .slice(1, 3)
+        .map((op: any) => op.text)
+        .join('');
+      const time = selectedOptions
+        .slice(3)
+        .map((op: any) => op.value)
+        .join(':');
+      Toast.text(selectedOptions[0].text + translate('year') + date + ' ' + time);
+    };
+
+    const confirm5 = ({
+      selectedValue,
+      selectedOptions
+    }: {
+      selectedValue: (string | number)[];
+      selectedOptions: any;
+    }) => {
+      Toast.text(selectedValue.join('-'));
+    };
+
+    const popupConfirm = ({ selectedValue, selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
+      popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
+      show.value = false;
     };
 
     const alwaysFun = () => {
-      show5.value = false;
-      desc5.value = translate('forever');
+      popupDesc.value = '永远有效';
+      show.value = false;
     };
     return {
       show,
-      show2,
-      show3,
-      show4,
-      show5,
-      show6,
-      show7,
-      desc1,
-      desc2,
-      desc3,
-      desc4,
-      desc5,
-      desc6,
-      desc7,
+      popupDesc,
       ...toRefs(CurrentDate),
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
@@ -327,7 +294,12 @@ export default createDemo({
       formatter1,
       filter,
       alwaysFun,
-      translate
+      translate,
+      popupConfirm,
+      confirm2,
+      confirm3,
+      confirm4,
+      confirm5
     };
   }
 });

src/packages/__VUE/datepicker/doc.en-US.md

@@ -9,15 +9,13 @@ Used to select time, support date and time dimensions, usually used with the Pop
 ```javascript
 import { createApp } from 'vue';
 // vue
-import { DatePicker, Picker, Popup, Overlay } from '@nutui/nutui';
+import { DatePicker, Picker } from '@nutui/nutui';
 // taro
-import { DatePicker, Picker, Popup, Overlay } from '@nutui/nutui-taro';
+import { DatePicker, Picker } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(DatePicker);
 app.use(Picker);
-app.use(Popup);
-app.use(Overlay);
 ```
     
 ### Choose Date
@@ -25,10 +23,8 @@ app.use(Overlay);
 
 ```html
 <template>
-  <nut-cell title="Show Chinese" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
-      v-model:visible="show"
       :min-date="minDate"
       :max-date="maxDate"
       :is-show-chinese="true"
@@ -41,18 +37,14 @@ app.use(Overlay);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('2022-05-10');
       const minDate = new Date(2020, 0, 1),
       const maxDate = new Date(2025, 10, 1),
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ({ selectedValue, selectedOptions })=>{
-        desc.value = selectedOptions.map((option) => option.text).join('');
+        Toast.text(selectedOptions.map((val: any) => val.text).join(''));
       }
       return {
         currentDate,
-        show,
-        desc,
         minDate,
         maxDate,
         confirm
@@ -64,12 +56,65 @@ app.use(Overlay);
 ```
 :::
 
+### With popup
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
+  <nut-popup position="bottom" v-model:visible="show">
+    <nut-date-picker
+      v-model="currentDate"
+      :min-date="minDate"
+      :max-date="maxDate"
+      @confirm="popupConfirm"
+      :is-show-chinese="true"
+      :threeDimensional="false"
+    >
+      <nut-button block type="primary" @click="alwaysFun">Always</nut-button>
+    </nut-date-picker>
+  </nut-popup>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+       const show = ref(false);
+      const popupDesc = ref();
+      const minDate = new Date(2020, 0, 1);
+      const maxDate = new Date(2025, 10, 1);
+      const currentDate = new Date(2022, 4, 10, 10, 10);
+      const popupConfirm = ({ selectedValue, selectedOptions })=>{
+        popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
+        show.value = false;
+      }
+      const alwaysFun = ()=>{
+        popupDesc.value = 'Always'
+        show.value = false;
+      }
+      return {
+        show,
+        popupDesc,
+        currentDate,
+        minDate,
+        maxDate,
+        alwaysFun,
+        popupConfirm
+      };
+    }
+  };
+</script>
+
+```
+:::
+
 ### Choose Month-Day
 
 :::demo
 ```html
 <template>
-  <nut-cell title="Limit the start and end time" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       type="month-day"
@@ -77,7 +122,6 @@ app.use(Overlay);
       :min-date="new Date(2022, 0, 1)"
       :max-date="new Date(2022, 7, 1)"
       @confirm="confirm"
-      v-model:visible="show"
   ></nut-date-picker> 
 </template>
 
@@ -85,15 +129,11 @@ app.use(Overlay);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('05-10');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        desc.value = selectedValue.join('-');
+        Toast.text(selectedOptions.map((val: any) => val.text).join('-'));
       }
       return {
-        show,
-        desc,
         currentDate,
         confirm
       };
@@ -108,7 +148,6 @@ app.use(Overlay);
 
 ```html
 <template>
-  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       title="Choose Time"
@@ -116,24 +155,18 @@ app.use(Overlay);
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="confirm"
-      v-model:visible="show" 
   ></nut-date-picker> 
 </template>
 <script>
   import { ref } from 'vue';
   export default {
-    setup(props) {
-      const show = ref(false);
-      const desc = ref('2022-05-10 10:10');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedValue.slice(0, 3).join('-');
         time = selectedValue.slice(3).join(':');
-        desc.value = date + ' ' + time;
+        Toast.text(date + ' ' + time) ;
       }
       return {
-        show,
-        desc,
         currentDate,
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
@@ -149,7 +182,6 @@ app.use(Overlay);
 :::demo
 ```html
 <template>
-  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       title="Choose Time"
@@ -157,22 +189,17 @@ app.use(Overlay);
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="confirm"
-      v-model:visible="show"
   ></nut-date-picker>
 </template>
 <script>
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('10:10:00');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        desc.value = selectedValue.join(':');
+        Toast.text(selectedValue.join(':'));
       }
       return {
-        show,
-        desc,
         currentDate,
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
@@ -188,7 +215,6 @@ app.use(Overlay);
 :::demo
 ```html
 <template>
-  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       title="Choose Time"
@@ -197,20 +223,17 @@ app.use(Overlay);
       :max-date="new Date(2022, 10, 1)"
       :formatter="formatter"
       @confirm="confirm"
-      v-model:visible="show"
-  ><nut-button block type="primary" @click="alwaysFun">Forever</nut-button></nut-date-picker>
+  ></nut-date-picker>
 </template>
 <script>
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('10:10:00');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
         time = selectedOptions.slice(3).map((op) => op.value).join(':');
-        desc.value = selectedOptions[0].text + 'Year' + date + ' ' + time;
+        Toast.text(selectedOptions[0].text + 'Year' + date + ' ' + time);
       }
       const formatter = (type: string, option) => {
         switch (type) {
@@ -234,17 +257,11 @@ app.use(Overlay);
         }
         return option;
       };
-      const alwaysFun = () => {
-        show.value = false;
-        desc.value = 'Forever';
-      };
+     
       return {
-        show,
-        desc,
         currentDate,
         confirm,
-        formatter,
-        alwaysFun
+        formatter
       };
     }
   };
@@ -257,7 +274,6 @@ app.use(Overlay);
 :::demo
 ```html
 <template>
-  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       type="time"
@@ -265,22 +281,18 @@ app.use(Overlay);
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="confirm"
-      v-model:visible="show"
   ></nut-date-picker>
 </template>
 <script>
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('10:10:00');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        desc.value = selectedValue.join(':');
+        Toast.text(selectedValue.join(':')) ;
       }
       return {
-        show,
-        desc,
+        currentDate,
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
         confirm
@@ -296,7 +308,6 @@ app.use(Overlay);
 :::demo
 ```html
 <template>
-  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       title="Choose Time"
@@ -306,15 +317,12 @@ app.use(Overlay);
       :filter="filter"
       :formatter="formatter"
       @confirm="confirm"
-      v-model:visible="show"
   ></nut-date-picker>
 </template>
 <script>
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('2022-05-10 00');
       const currentDate = new Date(2022, 4, 10, 0, 0);
       const formatter = (type: string, option) => {
         switch (type) {
@@ -343,11 +351,10 @@ app.use(Overlay);
         return options;
       };
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        descList[index].value = selectedOptions.map((option) => option.text).join('');
+         Toast.text(selectedOptions.map((option) => option.text).join(''));
       }
       return {
-        show,
-        desc,
+        currentDate,
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
         confirm,
@@ -367,27 +374,28 @@ app.use(Overlay);
 | Attribute         | Description                             | Type   | Default           |
 |-----------------|---------------------------------------------------|---------|----------|
 | v-model         | Default Date                                            | Date    | `null`   |
-| v-model:visible | Is Show                    | Boolean | `false`  |
 | type            | Can be set to date time year-month month-day datehour | String  | `'date'` |
 | minute-step     | Option minute step                                        | Number  | `1`      |
 | is-show-chinese | Show Chinese                                  | Boolean | `false`  |
 | min-date        | Start date                                         | Date    | `Ten years ago on January 1` |
 | max-date        | End date                                          | Date    | `Ten years later on December 31` |
-| formatter `v3.1.18`  | Option text formatter                                          | (type: string, option: PickerOption) => PickerOption    |  |
-| filter  `v3.1.18`  | Option filter                                         | (type: string, option: PickerOption) => PickerOption[]    |  |
+| formatter   | Option text formatter                                          | (type: string, option: PickerOption) => PickerOption    |  |
+| filter   | Option filter                                         | (type: string, option: PickerOption) => PickerOption[]    |  |
 | title           | Title                                          | String  | `null`   |
 | ok-text           | Text of confirm button                                      | String  | confirm   |
 | cancel-text           | Text of cancel button                                          | String  | cancel   |
-| three-dimensional  `v3.1.23`          | Turn on 3D effects               | Boolean  | true   |
-| swipe-duration `v3.2.2`          | Duration of the momentum animation        | Number、String  | 1000   |
-| safe-area-inset-bottom `v3.2.4`	| Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when `position` is  `bottom` |	Boolean	|`false`     |
+| three-dimensional          | Turn on 3D effects               | Boolean  | true   |
+| swipe-duration           | Duration of the momentum animation        | Number、String  | 1000   |
+| visible-option-num          | Count of visible columns       | number \| string | 7               |
+| option-height         | Option height             | number \| string | 36     |
+| show-toolbar         | Whether to show toolbar             | Boolean | true    |
 
 ### Events
 
 | Event | Description           | Arguments     |
 |---------|--------------------|--------------|
 | confirm | Emitted when click confirm button. | 	{ selectedValue, selectedOptions } |
-| close   | Emitted when click close button.       | 	{ selectedValue, selectedOptions } |
+| cancel   | Emitted when click cancel button.       | 	{ selectedValue, selectedOptions } |
 | change   |  Emitted when current option changed.       | { columnIndex, selectedValue, selectedOptions } |
 
 ### Slots

src/packages/__VUE/datepicker/doc.md

@@ -9,15 +9,13 @@
 ```javascript
 import { createApp } from 'vue';
 // vue
-import { DatePicker, Picker, Popup, Overlay } from '@nutui/nutui';
+import { DatePicker, Picker } from '@nutui/nutui';
 // taro
-import { DatePicker, Picker, Popup, Overlay } from '@nutui/nutui-taro';
+import { DatePicker, Picker} from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(DatePicker);
 app.use(Picker);
-app.use(Popup);
-app.use(Overlay);
 ```
     
 ### 选择年月日
@@ -25,10 +23,8 @@ app.use(Overlay);
 
 ```html
 <template>
-  <nut-cell title="显示中文" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
-      v-model:visible="show"
       :min-date="minDate"
       :max-date="maxDate"
       :is-show-chinese="true"
@@ -41,18 +37,14 @@ app.use(Overlay);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('2022年05月10日');
       const minDate = new Date(2020, 0, 1),
       const maxDate = new Date(2025, 10, 1),
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ({ selectedValue, selectedOptions })=>{
-        desc.value = selectedOptions.map((option) => option.text).join('');
+        Toast.text(selectedOptions.map((val: any) => val.text).join(''));
       }
       return {
         currentDate,
-        show,
-        desc,
         minDate,
         maxDate,
         confirm
@@ -64,6 +56,60 @@ app.use(Overlay);
 ```
 :::
 
+### 搭配 Popup 使用
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
+  <nut-popup position="bottom" v-model:visible="show">
+    <nut-date-picker
+      v-model="currentDate"
+      :min-date="minDate"
+      :max-date="maxDate"
+      @confirm="popupConfirm"
+      :is-show-chinese="true"
+      :threeDimensional="false"
+    >
+      <nut-button block type="primary" @click="alwaysFun">永远有效</nut-button>
+    </nut-date-picker>
+  </nut-popup>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+       const show = ref(false);
+      const popupDesc = ref();
+      const minDate = new Date(2020, 0, 1);
+      const maxDate = new Date(2025, 10, 1);
+      const currentDate = new Date(2022, 4, 10, 10, 10);
+      const popupConfirm = ({ selectedValue, selectedOptions })=>{
+        popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
+        show.value = false;
+      }
+      const alwaysFun = ()=>{
+        popupDesc.value = '永远有效'
+        show.value = false;
+      }
+      return {
+        show,
+        popupDesc,
+        currentDate,
+        minDate,
+        maxDate,
+        alwaysFun,
+        popupConfirm
+      };
+    }
+  };
+</script>
+
+```
+:::
+
 ### 选择月日
 
 DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type 设置为 year-month 即可选择年份和月份，设置为 month-day 即可选择月份和日期。
@@ -71,7 +117,6 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 :::demo
 ```html
 <template>
-  <nut-cell title="限制开始结束时间" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       type="month-day"
@@ -79,7 +124,6 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
       :min-date="new Date(2022, 0, 1)"
       :max-date="new Date(2022, 7, 1)"
       @confirm="confirm"
-      v-model:visible="show"
   ></nut-date-picker> 
 </template>
 
@@ -87,15 +131,11 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('05-10');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        desc.value = selectedValue.join('-');
+        Toast.text(selectedOptions.map((val: any) => val.text).join('-'));
       }
       return {
-        show,
-        desc,
         currentDate,
         confirm
       };
@@ -112,7 +152,6 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 
 ```html
 <template>
-  <nut-cell title="日期时间选择" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       title="日期时间选择"
@@ -120,24 +159,18 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="confirm"
-      v-model:visible="show" 
   ></nut-date-picker> 
 </template>
 <script>
   import { ref } from 'vue';
   export default {
-    setup(props) {
-      const show = ref(false);
-      const desc = ref('2022-05-10 10:10');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedValue.slice(0, 3).join('-');
         time = selectedValue.slice(3).join(':');
-        desc.value = date + ' ' + time;
+        Toast.text(date + ' ' + time) ;
       }
       return {
-        show,
-        desc,
         currentDate,
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
@@ -153,7 +186,6 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 :::demo
 ```html
 <template>
-  <nut-cell title="日期选择" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       title="时间选择"
@@ -161,22 +193,17 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="confirm"
-      v-model:visible="show"
   ></nut-date-picker>
 </template>
 <script>
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('10:10:00');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        desc.value = selectedValue.join(':');
+        Toast.text(selectedValue.join(':'));
       }
       return {
-        show,
-        desc,
         currentDate,
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
@@ -195,7 +222,6 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 :::demo
 ```html
 <template>
-  <nut-cell title="日期选择" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       title="时间选择"
@@ -204,20 +230,17 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
       :max-date="new Date(2022, 10, 1)"
       :formatter="formatter"
       @confirm="confirm"
-      v-model:visible="show"
-  ><nut-button block type="primary" @click="alwaysFun">永远有效</nut-button></nut-date-picker>
+  ></nut-date-picker>
 </template>
 <script>
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('10:10:00');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
         time = selectedOptions.slice(3).map((op) => op.value).join(':');
-        desc.value = selectedOptions[0].text + '年' + date + ' ' + time;
+        Toast.text(selectedOptions[0].text + '年' + date + ' ' + time);
       }
       const formatter = (type: string, option) => {
         switch (type) {
@@ -241,17 +264,10 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
         }
         return option;
       };
-      const alwaysFun = () => {
-        show.value = false;
-        desc.value = '永久有效';
-      };
       return {
-        show,
-        desc,
         currentDate,
         confirm,
         formatter,
-        alwaysFun
       };
     }
   };
@@ -264,7 +280,6 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 :::demo
 ```html
 <template>
-  <nut-cell title="日期选择" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       type="time"
@@ -272,22 +287,18 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="confirm"
-      v-model:visible="show"
   ></nut-date-picker>
 </template>
 <script>
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('10:10:00');
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        desc.value = selectedValue.join(':');
+        Toast.text(selectedValue.join(':')) ;
       }
       return {
-        show,
-        desc,
+        currentDate,
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
         confirm
@@ -305,7 +316,6 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 :::demo
 ```html
 <template>
-  <nut-cell title="日期选择" :desc="desc" @click="show = true"></nut-cell>
   <nut-date-picker
       v-model="currentDate"
       title="时间选择"
@@ -315,15 +325,12 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
       :filter="filter"
       :formatter="formatter"
       @confirm="confirm"
-      v-model:visible="show"
   ></nut-date-picker>
 </template>
 <script>
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const show = ref(false);
-      const desc = ref('2022年05月10日 00时');
       const currentDate = new Date(2022, 4, 10, 0, 0);
       const formatter = (type: string, option) => {
         switch (type) {
@@ -352,11 +359,10 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
         return options;
       };
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        descList[index].value = selectedOptions.map((option) => option.text).join('');
+        Toast.text(selectedOptions.map((option) => option.text).join(''));
       }
       return {
-        show,
-        desc,
+        currentDate,
         minDate: new Date(2020, 0, 1),
         maxDate: new Date(2025, 10, 1),
         confirm,
@@ -376,27 +382,28 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 | 参数            | 说明                                              | 类型    | 默认值   |
 |-----------------|---------------------------------------------------|---------|----------|
 | v-model         | 初始值                                            | Date    | `null`   |
-| v-model:visible | 是否可见                                          | Boolean | `false`  |
 | type            | 时间类型，可选值 date time year-month month-day datehour | String  | `'date'` |
 | minute-step     | 分钟步进值                                        | Number  | `1`      |
 | is-show-chinese | 每列是否展示中文                                  | Boolean | `false`  |
 | min-date        | 开始日期                                          | Date    | `十年前` |
 | max-date        | 结束日期                                          | Date    | `十年后` |
-| formatter `v3.1.18`  | 选项格式化函数                                          | (type: string, option: PickerOption) => PickerOption    |  |
-| filter  `v3.1.18`  | 选项过滤函数                                          | (type: string, option: PickerOption) => PickerOption[]    |  |
+| formatter   | 选项格式化函数                                          | (type: string, option: PickerOption) => PickerOption    |  |
+| filter    | 选项过滤函数                                          | (type: string, option: PickerOption) => PickerOption[]    |  |
 | title           | 设置标题                                          | String  | `null`   |
 | ok-text           | 确定按钮文案                                          | String  | 确定   |
 | cancel-text           | 取消按钮文案                                          | String  | 取消   |
-| three-dimensional `v3.1.23`          | 是否开启3D效果               | Boolean  | true   |
-| swipe-duration `v3.2.2`          | 惯性滚动时长               | Number、String  | 1000    |
-| safe-area-inset-bottom `v3.2.4`	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	Boolean	|`false`     |
+| three-dimensional           | 是否开启3D效果               | Boolean  | true   |
+| swipe-duration     | 惯性滚动时长               | Number、String  | 1000    |
+| visible-option-num          |可见的选项个数              | number \| string | 7               |
+| option-height         | 选项高度             | number \| string | 36     |
+| show-toolbar         | 是否显示顶部导航             | Boolean | true    |
 
 ### Events
     
 | 事件名  | 说明               | 回调参数     |
 |---------|--------------------|--------------|
 | confirm | 点击确定按钮时触发 | 	{ selectedValue, selectedOptions } |
-| close   | 关闭时触发         | 	{ selectedValue, selectedOptions } |
+| cancel   | 点击取消按钮时触发         | 	{ selectedValue, selectedOptions } |
 | change   | 选项改变时触发         | { columnIndex, selectedValue, selectedOptions } |
 
 ### Slots

src/packages/__VUE/datepicker/index.taro.vue

@@ -1,19 +1,18 @@
 <template>
   <nut-picker
     v-model="selectedValue"
-    :visible="show"
     :okText="okText"
     :cancelText="cancelText"
-    @close="closeHandler"
+    @cancel="closeHandler"
     :columns="columns"
     @change="changeHandler"
     :title="title"
     @confirm="confirm"
-    :teleportDisable="teleportDisable"
     :threeDimensional="threeDimensional"
     :swipeDuration="swipeDuration"
-    :safeAreaInsetBottom="safeAreaInsetBottom"
-    :destroyOnClose="destroyOnClose"
+    :showToolbar="showToolbar"
+    :visibleOptionNum="visibleOptionNum"
+    :optionHeight="optionHeight"
   >
     <template #top>
       <slot name="top"></slot>
@@ -25,7 +24,6 @@
 import { toRefs, watch, computed, reactive, onBeforeMount } from 'vue';
 import type { PropType } from 'vue';
 import nutPicker from '../picker/index.taro.vue';
-import { popupProps } from '../popup/props';
 import { createComponent } from '@/packages/utils/create';
 import { padZero, isDate as isDateU } from '@/packages/utils/util';
 const { componentName, create } = createComponent('date-picker');
@@ -50,7 +48,6 @@ export default create({
     nutPicker
   },
   props: {
-    ...popupProps,
     modelValue: null,
     title: {
       type: String,
@@ -100,13 +97,24 @@ export default create({
       type: [Number, String],
       default: 1000
     },
-    filter: Function as PropType<import('./type').Filter>
+    filter: Function as PropType<import('./type').Filter>,
+    showToolbar: {
+      type: Boolean,
+      default: true
+    },
+    visibleOptionNum: {
+      type: [Number, String],
+      default: 7
+    },
+    optionHeight: {
+      type: [Number, String],
+      default: 36
+    }
   },
-  emits: ['click', 'update:visible', 'change', 'confirm', 'update:moduleValue'],
+  emits: ['click', 'cancel', 'change', 'confirm', 'update:moduleValue'],
 
   setup(props, { emit }) {
     const state = reactive({
-      show: props.visible,
       currentDate: new Date(),
       title: props.title,
       selectedValue: []
@@ -314,17 +322,15 @@ export default create({
       return 0;
     };
 
-    const closeHandler = () => {
-      emit('update:visible', false);
+    const closeHandler = (val: any) => {
+      emit('cancel', val);
     };
 
-    const confirm = (val: Event) => {
-      emit('update:visible', false);
+    const confirm = (val: any) => {
       emit('confirm', val);
     };
 
     onBeforeMount(() => {
-      console.log('平铺展示');
       state.currentDate = formatValue(props.modelValue);
     });
 
@@ -342,13 +348,6 @@ export default create({
       }
     );
 
-    watch(
-      () => props.visible,
-      (val) => {
-        state.show = val;
-      }
-    );
-
     return {
       ...toRefs(state),
       changeHandler,

src/packages/__VUE/datepicker/index.vue

@@ -1,19 +1,18 @@
 <template>
   <nut-picker
     v-model="selectedValue"
-    v-model:visible="show"
     :okText="okText"
     :cancelText="cancelText"
-    @close="closeHandler"
+    @cancel="closeHandler"
     :columns="columns"
     @change="changeHandler"
     :title="title"
     @confirm="confirm"
-    :teleportDisable="teleportDisable"
     :threeDimensional="threeDimensional"
     :swipeDuration="swipeDuration"
-    :safeAreaInsetBottom="safeAreaInsetBottom"
-    :destroyOnClose="destroyOnClose"
+    :showToolbar="showToolbar"
+    :visibleOptionNum="visibleOptionNum"
+    :optionHeight="optionHeight"
   >
     <template #top>
       <slot name="top"></slot>
@@ -25,7 +24,6 @@
 import { toRefs, watch, computed, reactive, onBeforeMount } from 'vue';
 import type { PropType } from 'vue';
 import Picker from '../picker/index.vue';
-import { popupProps } from '../popup/props';
 import { PickerOption } from '../picker/types';
 import { createComponent } from '@/packages/utils/create';
 import { padZero, isDate as isDateU } from '@/packages/utils/util';
@@ -51,7 +49,6 @@ export default create({
     [Picker.name]: Picker
   },
   props: {
-    ...popupProps,
     modelValue: null,
     title: {
       type: String,
@@ -101,13 +98,24 @@ export default create({
       type: [Number, String],
       default: 1000
     },
-    filter: Function as PropType<import('./type').Filter>
+    filter: Function as PropType<import('./type').Filter>,
+    showToolbar: {
+      type: Boolean,
+      default: true
+    },
+    visibleOptionNum: {
+      type: [Number, String],
+      default: 7
+    },
+    optionHeight: {
+      type: [Number, String],
+      default: 36
+    }
   },
-  emits: ['click', 'update:visible', 'change', 'confirm', 'update:modelValue'],
+  emits: ['click', 'cancel', 'change', 'confirm', 'update:modelValue'],
 
   setup(props, { emit }) {
     const state = reactive({
-      show: props.visible,
       currentDate: new Date(),
       title: props.title,
       selectedValue: []
@@ -327,14 +335,14 @@ export default create({
       return 0;
     };
 
-    const closeHandler = () => {
-      emit('update:visible', false);
+    const closeHandler = (val: any) => {
+      emit('cancel', val);
     };
 
-    const confirm = (val: Event) => {
-      emit('update:visible', false);
+    const confirm = (val: any) => {
       emit('confirm', val);
     };
+
     onBeforeMount(() => {
       state.currentDate = formatValue(props.modelValue);
     });
@@ -367,13 +375,6 @@ export default create({
       }
     );
 
-    watch(
-      () => props.visible,
-      (val) => {
-        state.show = val;
-      }
-    );
-
     return {
       ...toRefs(state),
       changeHandler,

src/packages/__VUE/picker/usePicker.ts

@@ -27,7 +27,6 @@ export const usePicker = (props: any, emit: any) => {
   });
 
   const selectedOptions = computed(() => {
-    console.log(23);
     let optins: PickerOption[] = [];
     (columnsList.value as PickerOption[][]).map((column: PickerOption[], index: number) => {
       let currOptions = [];
@@ -164,7 +163,6 @@ export const usePicker = (props: any, emit: any) => {
   watch(
     () => props.columns,
     (val) => {
-      console.log('同意');
       if (val.length) state.formattedColumns = val as PickerOption[];
     }
   );

src/sites/mobile-taro/vue/project.private.config.json

@@ -47,8 +47,8 @@
           "scene": null
         },
         {
-          "name": "dentry/pages/textarea/index",
-          "pathName": "dentry/pages/textarea/index",
+          "name": "dentry/pages/datepicker/index",
+          "pathName": "dentry/pages/datepicker/index",
           "query": "",
           "launchMode": "default",
           "scene": null

src/sites/mobile-taro/vue/src/dentry/pages/datepicker/index.vue

@@ -1,34 +1,33 @@
 <template>
   <div class="demo">
     <h2>选择年月日</h2>
-    <nut-cell title="显示中文" :desc="desc1" @click="show = true"></nut-cell>
-    <h2>选择月日</h2>
-    <nut-cell title="限制开始结束时间" :desc="desc2" @click="show2 = true"></nut-cell>
-    <h2>选择年月日时分</h2>
-    <nut-cell title="日期时间选择" :desc="desc3" @click="show3 = true"></nut-cell>
-    <h2>选择时分秒</h2>
-    <nut-cell title="时间选择" :desc="desc4" @click="show4 = true"></nut-cell>
-    <h2>格式化选项</h2>
-    <nut-cell title="时间选择" :desc="desc5" @click="show5 = true"></nut-cell>
-    <h2>分钟数递增步长设置</h2>
-    <nut-cell title="时间选择" :desc="desc6" @click="show6 = true"></nut-cell>
-    <h2>过滤选项</h2>
-    <nut-cell title="时间选择" :desc="desc7" @click="show7 = true"></nut-cell>
     <!-- 选择年月日 -->
     <nut-date-picker
       v-model="currentDate"
       :min-date="minDate"
       :max-date="maxDate"
-      @confirm="
-        (val) => {
-          confirm(0, val);
-        }
-      "
-      v-model:visible="show"
+      @confirm="confirm"
       :threeDimensional="false"
       :is-show-chinese="true"
-      :safeAreaInsetBottom="true"
     ></nut-date-picker>
+
+    <h2>配合 Popup 使用</h2>
+    <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
+    <nut-popup position="bottom" v-model:visible="show">
+      <nut-date-picker
+        v-model="currentDate"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @confirm="popupConfirm"
+        @cancel="show = false"
+        :is-show-chinese="true"
+        :threeDimensional="false"
+      >
+        <nut-button block type="primary" @click="alwaysFun">永远有效</nut-button>
+      </nut-date-picker>
+    </nut-popup>
+
+    <h2>选择月日</h2>
     <!-- 选择月日 -->
     <nut-date-picker
       v-model="currentDate2"
@@ -36,13 +35,10 @@
       title="日期选择"
       :min-date="new Date(2022, 0, 1)"
       :max-date="new Date(2022, 7, 1)"
-      @confirm="
-        (val) => {
-          confirm(1, val);
-        }
-      "
-      v-model:visible="show2"
+      @confirm="confirm"
     ></nut-date-picker>
+    <h2>选择年月日时分</h2>
+
     <!-- 选择年月日时分 -->
     <nut-date-picker
       v-model="currentDate3"
@@ -50,13 +46,9 @@
       type="datetime"
       :min-date="minDate"
       :max-date="maxDate"
-      @confirm="
-        (val) => {
-          confirm(2, val);
-        }
-      "
-      v-model:visible="show3"
+      @confirm="confirm"
     ></nut-date-picker>
+    <h2>选择时分秒</h2>
     <!-- 选择时分秒 -->
     <nut-date-picker
       v-model="currentDate4"
@@ -64,13 +56,9 @@
       type="time"
       :min-date="minDate"
       :max-date="maxDate"
-      @confirm="
-        (val) => {
-          confirm(3, val);
-        }
-      "
-      v-model:visible="show4"
+      @confirm="confirm"
     ></nut-date-picker>
+    <h2>格式化选项</h2>
     <!-- 格式化选项 -->
     <nut-date-picker
       v-model="currentDate5"
@@ -79,14 +67,9 @@
       :min-date="new Date(2022, 0, 1)"
       :max-date="new Date(2022, 10, 1)"
       :formatter="formatter"
-      @confirm="
-        (val) => {
-          confirm(4, val);
-        }
-      "
-      v-model:visible="show5"
-      ><nut-button block type="primary" @click="alwaysFun">永远有效</nut-button></nut-date-picker
-    >
+      @confirm="confirm"
+    ></nut-date-picker>
+    <h2>分钟数递增步长设置</h2>
     <!-- 分钟数递增步长设置 -->
     <nut-date-picker
       v-model="currentDate6"
@@ -95,13 +78,10 @@
       :min-date="minDate"
       :max-date="maxDate"
       :minute-step="5"
-      @confirm="
-        (val) => {
-          confirm(5, val);
-        }
-      "
-      v-model:visible="show6"
+      @confirm="confirm"
     ></nut-date-picker>
+    <h2>过滤选项</h2>
+
     <!-- 过滤选项 -->
     <nut-date-picker
       v-model="currentDate7"
@@ -111,13 +91,10 @@
       :max-date="maxDate"
       :filter="filter"
       :formatter="formatter1"
-      @confirm="
-        (val) => {
-          confirm(6, val);
-        }
-      "
-      v-model:visible="show7"
+      @confirm="confirm"
     ></nut-date-picker>
+
+    <nut-toast :msg="msg" v-model:visible="showToast" type="text" />
   </div>
 </template>
 
@@ -127,12 +104,9 @@ export default {
   props: {},
   setup() {
     const show = ref(false);
-    const show2 = ref(false);
-    const show3 = ref(false);
-    const show4 = ref(false);
-    const show5 = ref(false);
-    const show6 = ref(false);
-    const show7 = ref(false);
+    const popupDesc = ref();
+    const msg = ref();
+    const showToast = ref(false);
 
     const CurrentDate = reactive({
       currentDate: new Date(2022, 4, 10, 10, 10),
@@ -144,15 +118,6 @@ export default {
       currentDate7: new Date(2022, 4, 10, 0, 0)
     });
 
-    const desc1 = ref('2022年05月10日');
-    const desc2 = ref('05-10');
-    const desc3 = ref('2022-05-10 10:10');
-    const desc4 = ref('10:10:00');
-    const desc5 = ref('2022年05月10日 10:10');
-    const desc6 = ref('10:10:00');
-    const desc7 = ref('2022年05月10日 00时');
-    const descList = [desc1, desc2, desc3, desc4, desc5, desc6, desc7];
-
     const formatter = (type: string, option) => {
       switch (type) {
         case 'year':
@@ -203,60 +168,29 @@ export default {
       return options;
     };
 
-    const confirm = (
-      index: number,
-      { selectedValue, selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }
-    ) => {
-      let date = '';
-      let time = '';
-      switch (index) {
-        case 0:
-        case 6:
-          descList[index].value = selectedOptions.map((option) => option.text).join('');
-          break;
-        case 2:
-          date = selectedValue.slice(0, 3).join('-');
-          time = selectedValue.slice(3).join(':');
-          descList[index].value = date + ' ' + time;
-          break;
-        case 3:
-        case 5:
-          descList[index].value = selectedValue.join(':');
-          break;
-        case 4:
-          date = selectedOptions
-            .slice(1, 3)
-            .map((op) => op.text)
-            .join('');
-          time = selectedOptions
-            .slice(3)
-            .map((op) => op.value)
-            .join(':');
-          descList[index].value = selectedOptions[0].text + '年' + date + ' ' + time;
-          break;
-        default:
-          descList[index].value = selectedValue.join('-');
-      }
+    const confirm = ({
+      selectedValue,
+      selectedOptions
+    }: {
+      selectedValue: (string | number)[];
+      selectedOptions: any;
+    }) => {
+      showToast.value = true;
+      msg.value = selectedOptions.map((val: any) => val.text).join('-');
+    };
+    const popupConfirm = ({ selectedValue, selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
+      popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
+      show.value = false;
     };
     const alwaysFun = () => {
-      show5.value = false;
-      desc5.value = '永久有效';
+      popupDesc.value = '永远有效';
+      show.value = false;
     };
     return {
       show,
-      show2,
-      show3,
-      show4,
-      show5,
-      show6,
-      show7,
-      desc1,
-      desc2,
-      desc3,
-      desc4,
-      desc5,
-      desc6,
-      desc7,
+      msg,
+      showToast,
+      popupDesc,
       ...toRefs(CurrentDate),
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
@@ -264,7 +198,8 @@ export default {
       formatter,
       formatter1,
       filter,
-      alwaysFun
+      alwaysFun,
+      popupConfirm
     };
   }
 };