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>
这样就可以保存使用了!!!文章来源:https://www.toymoban.com/news/detail-555521.html
总结
例如:以上就是今天要讲的内容,本文仅仅简单介绍了时间组件的封装使用,组件封装几乎同理,如有问题,可私信联系。文章来源地址https://www.toymoban.com/news/detail-555521.html
到了这里,关于Element UI 日期封装自定义组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!