? 距離我上一次博客都距離五個(gè)多月了，證明我這五個(gè)月沒有好好學(xué)習(xí)声功，自我反省下醒串。
? 這次寫這個(gè)博客执桌，是我工作中遇到的問題，項(xiàng)目是做一個(gè)h5移動(dòng)端的商城芜赌。之前沒用過VantUI仰挣，拿到需要用到時(shí)間選擇器的時(shí)候也是捉摸了一會(huì)。
? 大概需求是缠沈，點(diǎn)擊彈出時(shí)間選擇器膘壶，并顯示時(shí)間到頁面上。
? 一開始看文檔的時(shí)候也沒太仔細(xì)洲愤，沒看到前面的一句話時(shí)間選擇組件通常與彈出層組件配合使用颓芭。如果直接按需導(dǎo)入，時(shí)間選擇器會(huì)直接出現(xiàn)在頁面上柬赐。
引入
? 這里采用的按需導(dǎo)入亡问。
import { Popup } from 'vant';
import { DatetimePicker } from 'vant';
Vue.use(Popup)
Vue.use(DatetimePicker);
主要代碼
需求主要是實(shí)現(xiàn)年月日的選擇，
type="date"肛宋，由于頁面時(shí)間選擇器較多（需求有四個(gè)）所以我只寫了一個(gè)彈出層州藕，選擇器全部放彈出層里万矾，通過v-if控制顯示與隱藏開始時(shí)間不能高于當(dāng)前日期，
:max-date="currentTime"結(jié)束時(shí)間不能低于開始日期慎框，
:min-date="startTime"cancel良狈、confirm為 vantUI 時(shí)間選擇器提供的事件，點(diǎn)擊取消或確認(rèn)按鈕觸發(fā)事件笨枯，其中confirm有個(gè)回調(diào)參數(shù)value為當(dāng)前選擇的時(shí)間將彈出層組件套在時(shí)間選擇器的組件外面薪丁，進(jìn)行組合使用，需要手動(dòng)在取消馅精、確認(rèn)按鈕上加事件隱藏彈出層
-
formatter調(diào)用的官方文檔的formatter方法严嗜，會(huì)將選項(xiàng)文字進(jìn)行格式化處理，如下圖所示洲敢，左邊是調(diào)用后的效果
? 我這里只放了一部分代碼
<template>
<div>
<!-- 按鈕區(qū)域 -->
<div>
<span ref="termStart" @click="showDatePicker('termStart')">開始時(shí)間</span>
<span ref="termEnd" @click="showDatePicker('termEnd')">結(jié)束時(shí)間</span>
</div>
<!-- 彈出層 -->
<van-popup v-model="isPopShow" position="bottom">
<!-- 開始時(shí)間 -->
<van-datetime-picker
@cancel="cancelPicker"
@confirm="confirmPicker"
v-if="datePicker == 'startTime'"
v-model="startTime"
type="date"
:formatter="formatter"
:max-date="currentTime"
/>
<!-- 結(jié)束時(shí)間 -->
<van-datetime-picker
@cancel="cancelPicker"
@confirm="confirmPicker"
v-if="datePicker == 'endTime'"
v-model="endTime"
type="date"
:formatter="formatter"
:min-date="startTime"
/>
</van-popup>
</div>
</template>
<script>
export default {
data() {
return {
currentTime: new Date(), // 開始時(shí)間不能超過當(dāng)前時(shí)間
startTime: new Date(), // 開始時(shí)間
endTime: new Date(), // 結(jié)束時(shí)間
datePicker: '', // 用于判斷哪個(gè)選擇器的顯示與隱藏
isPopShow: false, // 彈出層隱藏與顯示
}
},
methods: {
showDatePicker(picker) { //彈出層并顯示時(shí)間選擇器
this.isPopShow = true;
this.datePicker = picker;
},
cancelPicker() { // 選擇器取消按鈕點(diǎn)擊事件
this.isPopShow = false;
this.datePicker = "";
},
confirmPicker(value) {// 確定按鈕漫玄，時(shí)間格式化并顯示在頁面上
var date = value;
var m = date.getMonth() + 1;
var d = date.getDate();
if (m >= 1 && m <= 9) {
m = "0" + m;
}
if (d >= 0 && d <= 9) {
d = "0" + d;
}
var timer = date.getFullYear() + "-" + m + "-" + d
this.$refs[this.datePicker].innerHTML = timer;
this.isPopShow = false;
this.datePicker = "";
},
formatter(type, value) {// 格式化選擇器日期
if (type === "year") {
return `${value}年`;
} else if (type === "month") {
return `${value}月`;
}
return value;
},
}
}
</script>
展示效果
按鈕
時(shí)間選擇器
顯示時(shí)間
總結(jié)
? 表示自己還是個(gè)小菜鳥，歡迎各路大神指點(diǎn)和探討压彭。
