Element UI 日期封装组件

文章目录

Element UI 日期封装组件前言一、如何去封装组件？二、使用步骤1.在components下创建datePicker.vue2.在要使用的地方引入组件 总结

前言

日常工作中我们会遇到要封装日期组件的情况，例如：element组件日期选择开始时间，结束时间组件不能直接使用时，重复使用到日期选择，我们就不得不去封装。

一、如何去封装组件？

其实很简答，我不做过多讲解，直接上代码，急拿急用。

二、使用步骤

1.在components下创建datePicker.vue

代码如下（示例）：

<template><div><el-date-pickerv-model="activeTime.startTime"type="date"size="small":picker-options="pickerOptionsStart"value-format="yyyy-MM-dd"@change="dateStartChange()"placeholder="开始时间"></el-date-picker> -<el-date-pickerv-model="activeTime.endTime"type="date"size="small"@change="dateChange()":picker-options="pickerOptionsEnd"value-format="yyyy-MM-dd"placeholder="结束时间"></el-date-picker></div></template><script>export default {name: "WTimer",props: {activeTime: {type: Object,}},data() {return {startDate: "",endDate: "",pickerOptionsStart: {//未发生的时间禁止选择disabledDate(time) {return time.getTime() >Date.now() }},pickerOptionsEnd: {//未发生的时间禁止选择disabledDate(time) {return time.getTime() >Date.now() }}};},mounted() {},methods: {//日期区间自定义dateStartChange(){if(this.activeTime.endTime){let enactDateBeginText=new Date(this.activeTime.startTime).getTime();let enactDateEndText = new Date(this.activeTime.endTime).getTime();if(enactDateBeginText > enactDateEndText){this.$message.error('开始时间不得大于结束时间,请重新选择!');this.activeTime.startTime='';}}},dateChange(){if(this.activeTime.startTime){let enactDateBeginText=new Date(this.activeTime.startTime).getTime();let enactDateEndText = new Date(this.activeTime.endTime).getTime();if(enactDateBeginText>enactDateEndText){this.$message.error('结束时间不可小于开始时间,请重新选择!');this.activeTime.endTime='';}}},},};</script>

2.在要使用的地方引入组件

代码如下（示例）：

import datePicker from '../../components/datePicker.vue'

export default {components:{popup,datePicker}}

<el-form-item>日期选择:</el-form-item><el-form-item><datePicker:activeTime="form"show-word-limitclearable></datePicker></el-form-item>

这样就可以保存使用了！！！

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了时间组件的封装使用，组件封装几乎同理，如有问题，可私信联系。