tab切换问题
parent
00fb4a7392
commit
ed92452d82
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="date-content">
|
||||
<a-date-picker
|
||||
size="small"
|
||||
ref="dateInput"
|
||||
:class="`date-picker-${type}`"
|
||||
:format="format"
|
||||
v-model="value"
|
||||
:open="open"
|
||||
:show-time="showTime"
|
||||
@change="changeDate"
|
||||
@openChange="handleOpenChange"
|
||||
@focus="onFocus">
|
||||
<a-icon slot="suffixIcon" type="time" style="display: none" />
|
||||
</a-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
parentVal: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'YYYY-MM-DD'
|
||||
},
|
||||
showTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: this.parentVal !== 0 && !this.parentVal ? '' : this.parentVal,
|
||||
open: false,
|
||||
over: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
parentVal(nval, oval) {
|
||||
this.value = nval
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changeDate (date, dateString) {
|
||||
if (!dateString) {
|
||||
this.value = null
|
||||
} else {
|
||||
this.value = dateString
|
||||
}
|
||||
this.$emit('dateChange', {
|
||||
type: this.type,
|
||||
value: this.value
|
||||
})
|
||||
},
|
||||
handleOpenChange (open) {
|
||||
this.open = open;
|
||||
if (!this.open) {
|
||||
this.over = true
|
||||
this.$refs.dateInput.$refs.picker.$refs.input.focus()
|
||||
setTimeout(() => {
|
||||
this.over = false
|
||||
}, 1200)
|
||||
}
|
||||
},
|
||||
onFocus () {
|
||||
if (!this.open && !this.over) {
|
||||
this.open = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue