溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么在Vue中利用Vant實現(xiàn)一個時間選擇器

發(fā)布時間：2021-04-14 16:25:39 來源：億速云 閱讀：426 作者：Leah 欄目：web開發(fā)

怎么在Vue中利用Vant實現(xiàn)一個時間選擇器？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

1.查看Vant官網(wǎng)https://youzan.github.io/vant/#/zh-CN/datetime-picker

引入Vant中DatetimePicker組件（全局引入后可直接使用）

import Vue from 'vue';
import { DatetimePicker } from 'vant'
Vue.use(DatetimePicker);

關(guān)鍵使用代碼（結(jié)合vant組件Popup的底部彈出層一起使用）

<van-popup v-model="dateShow" position="bottom">
   <van-datetime-picker v-model="currentDate" type="year-month" @cancel="handleCancel"
    @confirm="handleEndDateConfirm" />
  </van-popup>

export default {
 data() {
  return {
   dateShow: false,
   currentDate: new Date()
  };
 }
}

效果圖

怎么在Vue中利用Vant實現(xiàn)一個時間選擇器

實現(xiàn)點擊確定 和取消的方法

handleCancel () {
   this.dateShow = false;
  },
  //開始時間
  handleEndDateConfirm () {
   this.dateShow = false;
   this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
  },

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手