element-ui 單輸入框 起始時間選擇器

效果如圖：

 

 

 

 

 

思路:

 　　通過element ui組件，輸入框+時間選擇器 組合而成。兩個組件疊加而成，輸入框組件在第一層，時間組件在第二層，鼠標通過鼠標的穿透屬性，在點擊第一層時穿透到第二層觸發focus時間。

　　代碼如下;

 index.vue

 <p class="fix">
               <el-input placeholder="開始時間-結束時間" ref="sadadad" style="position: absolute;top: 0;pointer-events:none"
                  ref="timeDate" clearable v-model="timeDate" class="searchDate" @change="sarchTime">
                  <i slot="suffix" class="el-input__icon el-icon-date"></i>
               </el-input>
               <el-date-picker ref="dateValue" v-model="dateValue" type="datetimerange" range-separator="~"
                  value-format="yyyy-MM-dd hh:mm:ss" class="searchDate1" @focus="focusInput" @change="changeDate">
               </el-date-picker>
 </p>

index.js

 focusInput() {
                        this.$refs.sadadad.focus()
                    },
 changeDate() {
                        console.log(this.dateValue)
                        this.timeDate = this.dateValue[0] + "~" + this.dateValue[1];
                        this.endTime = this.dateValue[1],
                            this.startTime = this.dateValue[0],
                            this.getAccessRecord()
                    },