element ui el-time-select 在点击常规输入框后触发弹出

element ui el-time-select 在点击常规输入框后触发弹出

1.由于选择时间范围的 组件在 选择开始时间不能大于 结束时间，不满足要求
3.用一个输入框点击后 弹出两个常规的时间选择器下拉框， 然后在两个时间值都有值后才隐藏时间下拉框
4.用this.$refs[‘timeSelect’][0].focus() 会出现 下拉框自动隐藏的情况
5.以下是实现逻辑
6.css代码忽略 思路是将时间输入框定位在常规输入框后面 z-index -200

html

<el-time-select	v-model="value1"
																		:picker-options="{
																			start: '00:00',
																			step: '00:30',
																			end: '24:00'
																		}"
																		placeholder="选择时间"
																		@change="changeTime()"
																		ref="timeSelect"
																		align="center"
																	></el-time-select>
																	<el-time-select
																	  align="center"
																	   :ref="timeSelect1"
																		v-model="value2"
																		:picker-options="{
																			start: '00:00',
																			step: '00:30',
																			end: '24:00'
																		}"
																		class="timeSelect1"
																		placeholder="选择时间"
																		@change="changeTime()"
																	></el-time-select>
<el-input
																    @click.native="timeSelectShow()"
																	v-model="item.inputTime"
																	class="input-time"
																></el-input> 

js

changeTime:function(){
			console.log(this.value1)
			console.log(this.value2)
			if(this.value1 !== '' && this.value2!== ''){
				item.inputTime = `${this.value1}-${this.value2}`;
			}else{
				this.$refs['timeSelect'][0].showPicker()
				this.$refs['timeSelect1'][0].showPicker()
			}
		},
		timeSelectShow:function(){
			   this.$refs['timeSelect'][0].showPicker()
				this.$refs['timeSelect1'][0].showPicker()
		},
		```