Element UI 日期封装自定义组件

Element UI 日期封装组件

---

前言

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

---

一、如何去封装组件？

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

二、使用步骤

1.在components下创建datePicker.vue

代码如下（示例）：

<template>
  <div>
    <el-date-picker
      v-model="activeTime.startTime"
      type="date"
      size="small"
      :picker-options="pickerOptionsStart"
      value-format="yyyy-MM-dd"
      @change="dateStartChange()"
      placeholder="开始时间">
    </el-date-picker> -
    <el-date-picker
      v-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-limit
       clearable>
     </datePicker>
 </el-form-item>

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

---

总结

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