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()
		},
		```