快捷導(dǎo)航

Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼

更新時(shí)間：2019年10月25日 10:05:52 作者：honey緣木魚(yú)

這篇文章主要介紹了Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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;
  },
  //開(kāi)始時(shí)間
  handleEndDateConfirm () {
   this.dateShow = false;
   this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
  },

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue transition 在子組件中失效的解決
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue中的路由配置項(xiàng)meta使用解析
這篇文章主要介紹了Vue中的路由配置項(xiàng)meta使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
element-ui 表格sortable排序手動(dòng)js清除方式
這篇文章主要介紹了element-ui 表格sortable排序手動(dòng)js清除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
基于Vue3和Element Plus實(shí)現(xiàn)自動(dòng)導(dǎo)入功能
在 Vue 3 項(xiàng)目中,結(jié)合 Element Plus 實(shí)現(xiàn)自動(dòng)導(dǎo)入可以顯著減少代碼量,提升開(kāi)發(fā)效率,Element Plus 提供了官方的自動(dòng)導(dǎo)入插件 unplugin-vue-components 和 unplugin-auto-import,以下是如何配置和使用的詳細(xì)步驟,需要的朋友可以參考下
2025-03-03
vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)
本文主要介紹了vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
這篇文章主要介紹了vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能,結(jié)合完整實(shí)例形式分析了v-model實(shí)現(xiàn)表單input元素?cái)?shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
vue computed無(wú)法得到this的屬性或方法的解決
這篇文章主要介紹了vue computed無(wú)法得到this的屬性或方法的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue環(huán)境變量配置之process.env解讀
這篇文章主要介紹了vue環(huán)境變量配置之process.env解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
阿望教你用vue寫(xiě)掃雷小游戲
這篇文章主要介紹了阿望教你用vue寫(xiě)掃雷小游戲，本文通過(guò)實(shí)例代碼效果圖展示的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
Vue3全局組件注冊(cè)的實(shí)現(xiàn)代碼
在這篇文章中,我們將學(xué)習(xí)一下 Vue3 的全局組件注冊(cè)是如何實(shí)現(xiàn)的,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-12-12