当前位置：首页 > news >正文

封装实用的时间选择器组件

news 来源：原创 2025/4/21 23:33:33

<template><!-- 使用该时间选择器组件，重置搜索表单的时候，注意得使用async await让重置表单操作完成后再发起请求 --><div class="dateTimePickerSelectWrap"><el-date-pickerv-model="arr":type="dateType"align="right"start-placeholder="开始日期"end-placeholder="结束日期":default-time="defaultTime"@change="handleChange":picker-options="pickerOptions"@blur='handleBlur':disabled="disabled"></el-date-picker></div>
</template><script>
export default {name: "DateTimePickerSelect",props: {startTime: {type: String,default: "",},endTime: {type: String,default: "",},dateType: {type: String,default: "datetimerange",},defaultTime: {type: Array,default: function () {return ["00:00:00", "23:59:59"];},},pickerOptions: {type: Object,default: function () {return {};},},disabled:{type:Boolean,default:false}},watch: {startTime: {immediate: true,handler(newVal, oldVal) {if (newVal) {this.startTimeAndEndTime();} else {this.arr = [];//需要更新外面传进来的值this.$emit("update:startTime", "");this.$emit("update:endTime", "");}},deep: true,},endTime: {immediate: true,handler(newVal, oldVal) {if (newVal) {this.startTimeAndEndTime();} else {this.arr = [];//需要更新外面传进来的值this.$emit("update:startTime", "");this.$emit("update:endTime", "");}},deep: true,},},data() {return {arr: [],};},methods: {startTimeAndEndTime() {if (this.startTime && this.endTime) {this.arr = [this.startTime, this.endTime];} else {this.$message.error("开始时间跟结束时间必须不为空");this.arr = [];this.$emit("update:startTime", "");this.$emit("update:endTime", "");}},handleChange(val) {if (!val) {// 置空了this.$emit("update:startTime", "");this.$emit("update:endTime", "");} else {this.$emit("update:startTime", this.parseTime(val[0]));this.$emit("update:endTime", this.parseTime(val[1]));}//原先的事件也返回出去，可能要根据事件做什么操作this.$emit('change',val)},handleBlur(){this.$emit('blur')}},
};
</script><style>
</style>

上面是components中封装的时间选择器组件

下面是使用方法

<div><dateTimePickerSelect:startTime.sync="queryParams.ticketPrintTimeBegin":endTime.sync="queryParams.ticketPrintTimeEnd"></dateTimePickerSelect>
</div>
<script>
import dateTimePickerSelect from "@/components/dateTimePickerSelect";
export default {components:{dateTimePickerSelect,}
}
</script>