基于vant-ui的时间选择器二次封装

前言

最近刚接触vue项目，项目是基于vant组件开发的，工作过程中感觉vant组件提供的时间选择器没有和输入框数据结合，为了方便以后的开发，自己研究了一会，决定封装一个时间选择器组件。
时间选择组件通常与弹出层组件配合使用。

一、vant是什么？

Vant 是有赞前端团队开源的移动端组件库，是业界主流的移动端组件库之一

二、组件开发步骤

引入vant库

在main.js中引入vant

import Vant from 'vant'
Vue.use(Vant);

日期选择组件开发

1. 本文主要实现年月日的选择，type=“date”，选择器全部放弹出层里，通过 v-model="show"控制显示与隐藏
2. 开始时间不能高于当前日期，:min-date=“minDate”:
3. 结束时间不能低于开始日期，max-date=“maxDate”
4. cancel、confirm 为 vantUI 时间选择器提供的事件，点击取消或确认按钮触发事件，其中 confirm 有个回调参数 value 为当前选择的时间
5. 将弹出层组件套在时间选择器的组件外面，进行组合使用，需要手动在取消、确认按钮上加事件隐藏弹出层

组件示例：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>

选择日期框效果

日期组件展示效果