Vue 用Vant實現(xiàn)時間選擇器的示例代碼
更新時間：2019年10月25日 10:05:52 作者：honey緣木魚
這篇文章主要介紹了Vue 用Vant實現(xiàn)時間選擇器的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(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()
};
}
}
效果圖
實現(xiàn)點擊確定 和取消的方法
handleCancel () {
this.dateShow = false;
},
//開始時間
handleEndDateConfirm () {
this.dateShow = false;
this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue中的路由配置項meta使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
element-ui 表格sortable排序手動js清除方式
這篇文章主要介紹了element-ui 表格sortable排序手動js清除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
基于Vue3和Element Plus實現(xiàn)自動導(dǎo)入功能
在 Vue 3 項目中,結(jié)合 Element Plus 實現(xiàn)自動導(dǎo)入可以顯著減少代碼量,提升開發(fā)效率,Element Plus 提供了官方的自動導(dǎo)入插件 unplugin-vue-components 和 unplugin-auto-import,以下是如何配置和使用的詳細(xì)步驟,需要的朋友可以參考下2025-03-03
vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實現(xiàn)
本文主要介紹了vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue.js使用v-model實現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
這篇文章主要介紹了vue.js使用v-model實現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能,結(jié)合完整實例形式分析了v-model實現(xiàn)表單input元素數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue computed無法得到this的屬性或方法的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue環(huán)境變量配置之process.env解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了阿望教你用vue寫掃雷小游戲，本文通過實例代碼效果圖展示的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
在這篇文章中,我們將學(xué)習(xí)一下 Vue3 的全局組件注冊是如何實現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12