vant组件二次封装 -- vant中使用时间选择器和popup

<template> 
 <div class="page">
   <van-cell-group>
            <van-cell
              title="选择日期"
              :value="datetime"
              arrow
              @click="showDatePicker = !showDatePicker"
            ></van-cell>
  </van-cell-group>
  <van-popup v-model="showDatePicker" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        @confirm="
          showDatePicker = false;
          onchangDate1();
        "
        @cancel="showDatePicker = false"
        title="时间选择"
        type="date"
      />
    </van-popup>
 </div>
<template>
<script>
   import { Cell, CellGroup, DatetimePicker, Popup } from "vant";
   import Vue from "vue";
   export default {
      //组件 Q2组件需要正确注册，才能被页面识别
      components: {
          [Cell.name]: Cell,
          [CellGroup.name]: CellGroup,
          [DatetimePicker.name]: DatetimePicker,
          [Popup.name]: Popup
     },
  //数据层
  data() {
    return {
      datetime: "",
      currentDate: "",   //初始化当前时间
      showDatePicker: false, //判断popup弹出层是否显示，false不显示
    }；
  },
  created() {
    this.currentDate = new Date();    //给当前时间赋值
    this.datetime = this.common.dateToString(this.currentDate);   //给单元格显示当前时间的变量赋值
  },
  mounted() {},
  methods: {
    onchangDate1() {
      //currentDate值就是选择的时间，把改变后的值赋值给单元格变量显示
      this.datetime = this.common.dateToString(this.currentDate);   
    }
  }
};
</script>

原文链接：https://blog.csdn.net/fffvdgjvbsfkb123456/article/details/105129677/