前言
最近刚接触vue项目,项目是基于vant组件开发的,工作过程中感觉vant组件提供的时间选择器没有和输入框数据结合,为了方便以后的开发,自己研究了一会,决定封装一个时间选择器组件。
时间选择组件通常与弹出层组件配合使用。
一、vant是什么?
Vant 是有赞前端团队开源的移动端组件库,是业界主流的移动端组件库之一
二、组件开发步骤
引入vant库
在main.js中引入vant
import Vant from 'vant'
Vue.use(Vant);
日期选择组件开发
- 本文主要实现年月日的选择,type=“date”,选择器全部放弹出层里,通过 v-model="show"控制显示与隐藏
- 开始时间不能高于当前日期,:min-date=“minDate”:
- 结束时间不能低于开始日期,max-date=“maxDate”
- cancel、confirm 为 vantUI 时间选择器提供的事件,点击取消或确认按钮触发事件,其中 confirm 有个回调参数 value 为当前选择的时间
- 将弹出层组件套在时间选择器的组件外面,进行组合使用,需要手动在取消、确认按钮上加事件隐藏弹出层
组件示例:VantFieldDate.vue
<template>
<!-- 时间选择器组件 -->
<div>
<van-field
v-model="result"
v-bind="$attrs"
readonly
type="date"
placeholder="请选择"
@click="show = !show"
>
<template #right-icon>
<van-icon class="iconfont" class-prefix="icon" name="riqi" size="18" color="#CCCCCCC"/>
</template>
</van-field>
<van-popup v-model="show" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="date"
title="选择年月日"
:min-date="minDate"
:max-date="maxDate"
@cancel="show = !show"
@confirm="onConfirm"
/>
</van-popup>
</div>
</template>
<script>
export default {
name:'VantFieldDate',
model: {
prop: "selectValue",
event:"change",
},
props: {
selectValue: {
type: String
},
},
data() {
return {
minDate: new Date(1900, 0, 1),
maxDate: new Date(2099, 12, 12),
show: false,
result: '',
currentDate: new Date(),
};
},
methods: {
onConfirm(date) {
this.result = this.formatDate(date);
this.$emit('change',this.formatDate(date));
this.show = !this.show;
// this.$emit("getMessage", this.name,value.keyId);//把value值传给父组件
},
formatDate(date){
let year = date.getFullYear();
let month = date.getMonth() + 1;
month = month < 10 ? '0' + month : month;
let day = date.getDate();
day = day < 10 ? ('0' + day) : day;
return year + '-' + month + '-' + day;
}
},
};
</script>
<style></style>
组件调用
<template>
<div>
<van-form validate-first @failed="onFailed" @submit="onSubmit">
<vant-field-date
label="证件有效开始日期"
name="startDate"
v-model="formData.startDate"
required
/>
</van-form>
</div>
</template>
<script>
import VantFieldDate from '@/components/VantFieldDate'
export default {
name:'mfCusPersBaseInfoInsert',
//import引入的组件需要注入到对象中才能使用
components: {
VantFieldDate
},
props: {
},
data() {
//这里存放数据
return {
formData:{
startDate:"",
},
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
onFailed(errorInfo) {
console.log('failed', errorInfo);
},
onSubmit(values) {
this.formData;
console.log('submit', values);
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style lang='scss'>
</style>