距离我上一次博客都距离五个多月了，证明我这五个月没有好好学习，自我反省下。
这次写这个博客，是我工作中遇到的问题，项目是做一个h5移动端的商城。之前没用过VantUI，拿到需要用到时间选择器的时候也是捉摸了一会。
大概需求是，点击弹出时间选择器，并显示时间到页面上。
一开始看文档的时候也没太仔细，没看到前面的一句话时间选择组件通常与弹出层组件配合使用。如果直接按需导入，时间选择器会直接出现在页面上。
引入
这里采用的按需导入。
import { Popup } from 'vant';
import { DatetimePicker } from 'vant';
Vue.use(Popup)
Vue.use(DatetimePicker);
主要代码
需求主要是实现年月日的选择，
type="date"，由于页面时间选择器较多（需求有四个）所以我只写了一个弹出层，选择器全部放弹出层里，通过v-if控制显示与隐藏开始时间不能高于当前日期，
:max-date="currentTime"结束时间不能低于开始日期，
:min-date="startTime"cancel、confirm为 vantUI 时间选择器提供的事件，点击取消或确认按钮触发事件，其中confirm有个回调参数value为当前选择的时间将弹出层组件套在时间选择器的组件外面，进行组合使用，需要手动在取消、确认按钮上加事件隐藏弹出层
-
formatter调用的官方文档的formatter方法，会将选项文字进行格式化处理，如下图所示，左边是调用后的效果
我这里只放了一部分代码
<template>
<div>
<!-- 按钮区域 -->
<div>
<span ref="termStart" @click="showDatePicker('termStart')">开始时间</span>
<span ref="termEnd" @click="showDatePicker('termEnd')">结束时间</span>
</div>
<!-- 弹出层 -->
<van-popup v-model="isPopShow" position="bottom">
<!-- 开始时间 -->
<van-datetime-picker
@cancel="cancelPicker"
@confirm="confirmPicker"
v-if="datePicker == 'startTime'"
v-model="startTime"
type="date"
:formatter="formatter"
:max-date="currentTime"
/>
<!-- 结束时间 -->
<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(), // 开始时间不能超过当前时间
startTime: new Date(), // 开始时间
endTime: new Date(), // 结束时间
datePicker: '', // 用于判断哪个选择器的显示与隐藏
isPopShow: false, // 弹出层隐藏与显示
}
},
methods: {
showDatePicker(picker) { //弹出层并显示时间选择器
this.isPopShow = true;
this.datePicker = picker;
},
cancelPicker() { // 选择器取消按钮点击事件
this.isPopShow = false;
this.datePicker = "";
},
confirmPicker(value) {// 确定按钮，时间格式化并显示在页面上
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>
展示效果
按钮
1561472584970.png
时间选择器
1561472599881.png
显示时间
1561472614115.png
总结
表示自己还是个小菜鸟，欢迎各路大神指点和探讨。
timg.jpg
