Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼
更新時(shí)間：2019年10月25日 10:05:52 作者：honey緣木魚
這篇文章主要介紹了Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
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()
};
}
}
效果圖
實(shí)現(xiàn)點(diǎn)擊確定 和取消的方法
handleCancel () {
this.dateShow = false;
},
//開始時(shí)間
handleEndDateConfirm () {
this.dateShow = false;
this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue前端柱狀圖實(shí)例(疊狀條形圖)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了在vue3中安裝使用bootstrap過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本文通過實(shí)例代碼給大家介紹了vue中的inject學(xué)習(xí)教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-04
掌握Qwik.js，輕松應(yīng)對(duì)前端SSR渲染問題
掌握Qwik.js,輕松應(yīng)對(duì)前端SSR渲染問題！本指南將為你揭示如何使用這款強(qiáng)大的框架,讓你在前端開發(fā)中游刃有余2023-12-12
vue3內(nèi)嵌iframe的傳參與接收參數(shù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3內(nèi)嵌iframe的傳參與接收參數(shù)的相關(guān)資料,Vue項(xiàng)目中使用iframe及傳值功能相信有不少人都遇到過,需要的朋友可以參考下2023-07-07
封裝組件相信對(duì)大家來說都不陌生了,下面這篇文章主要給大家介紹了關(guān)于用VUE封裝一個(gè)文本滾動(dòng)組件的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
使用Vue3創(chuàng)建多布局系統(tǒng)的三種方法
布局是中大型網(wǎng)站或應(yīng)用的基礎(chǔ),假設(shè)你正在創(chuàng)建一個(gè)網(wǎng)頁(yè)應(yīng)用,它包括主頁(yè)、營(yíng)銷頁(yè)面和應(yīng)用頁(yè)面,你不會(huì)想要為每一頁(yè)重復(fù)所有的工作,對(duì)吧,與Nuxt不同,Vue 3并沒有內(nèi)置的布局系統(tǒng),但是別擔(dān)心,這里將向你展示3種簡(jiǎn)單的方法來實(shí)現(xiàn)這一點(diǎn),需要的朋友可以參考下2023-08-08
element-ui自定義message-box自定義樣式不生效的解決
這篇文章主要介紹了element-ui自定義message-box自定義樣式不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零)
這篇文章主要介紹了vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue3之getCurrentInstance與ts結(jié)合使用的方式
這篇文章主要介紹了Vue3之getCurrentInstance與ts結(jié)合使用的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04