溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

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

怎么在Vue中利用Vant實現一個時間選擇器

發布時間:2021-04-14 16:25:39 來源:億速云 閱讀:462 作者:Leah 欄目:web開發

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

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

引入Vant中DatetimePicker組件(全局引入后可直接使用)

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

關鍵使用代碼(結合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實現一個時間選擇器

實現點擊確定 和取消的方法

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

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女