【vue-vant】van-field 、van-datetime-picker、van-switch-cell組件的使用

一、效果圖：

二、實現：

1.首先添加組件：

<van-cell-group>
  <van-cell title="單元格" value="內容" />
  <van-cell title="單元格" value="內容" label="描述信息" />
</van-cell-group>

然後再在組件中添加<van-popup>、<van-datetime>這兩個組件

 <van-popup v-model="showone" position="bottom" :overlay="true">
        <van-datetime-picker
          v-model="currentDate_end"
          type="datetime"
          @cancel="showone =false"
          @confirm="showone=false"
          @change="firstTimeChange"
        />
      </van-popup>

2.添加data值

  checked: true,
      startTime: "",
      endTime: "",
      showone: false,
      showtwo: false,
      minHour: 10,
      maxHour: 20,
      endTimePop: "",
      start_Time: "",
      end_Time: "",
      currentDate_end: "",
      currentDate_first: "",
      endTimePop: false,
      // end_Time:ture
      newendtime:true

3.設置方法

showPopupone() {
      this.showone = true;
    },
    showPopuptwo() {
      this.showtwo = true;
    },
    firstTimeChange(e) {
      let endTimeArr = e.getValues();
      this.start_Time = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}  ${
        endTimeArr[3]
      }:${endTimeArr[4]}:00`;
    },

三、<van-switch-cell>的使用

（1）這個時候主要用到了change()方法

（2）設置data值

（3)方法

（4）在結束時間，加上個v-show。

（5）之後，再在方法進行調用。