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
}
},
}
}