vue中,element UI 时间控件（一）——@chang和@blur区别

vue中,element UI 时间控件（一）——@chang和@blur区别

官方文档

应用-@change =‘getStartTime($event)’

结构

<el-form-item label='调休时段' prop='selectEndTime'>
    <el-time-select
                    placeholder="起始时间"
                    v-model="form.selectStartTime"
                    class="width-132"
                    start="09:00"
                    step="00:30"
                    end="18:30"
                    :filterable="false"
                    :clearable="false"
                    @change ='getStartTime($event)'
                    >
    </el-time-select>
</el-form-item>

方法

<script lang='ts'>
import {computed, defineComponent, nextTick, onMounted, reactive, toRefs, watch} from 'vue';
import { formatDate ,formatDateTime,formatMin, formatDateMonth} from '@/utils/date-

export default defineComponent({
    	const state = reactive({
			form:{
                selectStartTime: '',
                selectEndTime: '',
			},
        });
		const getStartTime = (t) => {
			state.form.selectStartTime = t;
			console.log(state.form.selectEndTime,"5555");
			if(state.form.selectEndTime != ''){
				let timeDifference =   state.form.selectStartTime +
								'-' +
								state.form.selectEndTime;
				processApi.getDuration(timeDifference).then((res)=>{
					result.value.exchangeDuration = res.data||0
				})
			}
		};
		return {
			...toRefs(state),
			getStartTime
		};
	}
});
</script>

@change ='getStartTime($event)'和@change ='getStartTime(form.selectStartTime)'的区别——

前者，可以获取当前选择后的最新值（推荐写法）；

后者，获取的是选择之前上一次的值

@blur ='getStartTime()'获取的也是选择之前上一次的值

实例

1、结构

<DatePicker  
    id="startTime" 
    v-on:on-change="getTaxDate" 
    type="month" 
    placement="bottom-start"
    placeholder="选择日期"
></DatePicker>
<!-- <input class="timeInput" type="text" id="startTime"> -->
<span>—</span>
<DatePicker 
    v-on:on-change="getTaxEndDate" 
    type="month" 
    placement="bottom-start"
    placeholder="选择日期" 
id="endTime"></DatePicker>

2、方法

methods: {
    getTaxDate: function (date) {
        this.startTime = date
    },
    getTaxEndDate: function (date) {
        this.endTime = date
    }
}
data(){
    return {
        id: 'echartsBarType',
        id2: 'echartsPieType',
        option: {},
        option2: {},
        startTime: '',
        endTime: ''
    }
},
 
watch:{
　  startTime() {
        if (this.startTime) {
            console.log('开始时间',this.startTime)
        } else {
            this.actTaxDate = '';
        }
    }
}

2.1、同时监听两个输入框，如果两个都有值才执行一些方法

用computed

computed: {
    timeChange() {
        const { startTime, endTime } = this
        return {
            startTime,
            endTime
        }
    }
},
watch: {
    timeChange: {
        handler: function(val) {
            console.log('address change: ', val)
        },
        deep: true
    }
},

2.2、判断两个时间都有

watch: {
    timeChange: {
        handler: function(val) {
            if(val.startTime!=''&&val.endTime!=''){
                if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){
                    console.log('address change1: ',val)
                }
            }
        },
        deep: true
    }
},

2.3、加判断，结束时间必须大于开始时间（数据双向绑定）

getTaxDate: function (date) {
    if(date>this.endTime&&this.endTime!=''){
        this.startTime = ''
        alert('开始时间不能大于结束时间');
    }else{
        this.startTime = date
    }
},
getTaxEndDate: function (date) {
    if(date<this.startTime){
        alert('结束时间必须大于开始时间');
        this.endTime = ''
    }else{
        this.endTime = date
    }
},

3、完整代码

<DatePicker  
    v-model="startTime" 
    id="startTime" 
    v-on:on-change="getTaxDate" 
    type="month" 
    placement="bottom-start"
    placeholder="选择日期"
></DatePicker>
<span>—</span>
<DatePicker 
    v-model="endTime"  
    v-on:on-change="getTaxEndDate" 
    type="month" 
    placement="bottom-start"
    placeholder="选择日期" 
    id="endTime"
></DatePicker>

逻辑

export default {
    name: 'incomeTotal',
    data () {
        return {
            id: 'echartsBarType',
            id2: 'echartsPieType',
            option: {},
            option2: {},
            startTime: '',
            endTime: ''
        }
    },
    components: {
        IncomeHeader,
        Echarts
    },
    mounted () {
        this.getAjax()
    },
    computed: {
        timeChange() {
            const { startTime, endTime } = this
            return {
                startTime,
                endTime
            }
        }
    },
    watch: {
        timeChange: {
            handler: function(val) {
                if(val.startTime!=''&&val.endTime!=''){
                    if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){
                        console.log('address change1: ',val)
                    }
                }
            },
            deep: true
        }
    },
    methods: {
        getTaxDate: function (date) {
            if(date>this.endTime&&this.endTime!=''){
                this.startTime = ''
                alert('开始时间不能大于结束时间');
            }else{
                this.startTime = date
            }
        },
        getTaxEndDate: function (date) {
            if(date<this.startTime){
                alert('结束时间必须大于开始时间');
                this.endTime = ''
            }else{
                this.endTime = date
            }
        },
    }
}