el-date-picker 目前只能通過(guò)點(diǎn)擊input輸入框觸發(fā)日期選擇器，項(xiàng)目中需要通過(guò)其他方式觸發(fā)日期選擇器同時(shí)把input輸入框去掉，如點(diǎn)擊另一個(gè)按鈕事件 來(lái)觸發(fā)日期選擇器框展開。

該模塊由于后端接口數(shù)據(jù)傳輸限制 在前面文章里做了些許改動(dòng)。

需求左右切換 可以快速找到年份，于是添加了element選擇年份的日期組件。
圖中隱藏了el-data-picker日期組件，手動(dòng)添加樣式展示時(shí)間欄選擇的數(shù)據(jù)進(jìn)行 +0 回顯。
點(diǎn)擊時(shí)間時(shí)，讓日期組件顯示出來(lái)時(shí)存在一個(gè)問(wèn)題 就是每次點(diǎn)擊 需要點(diǎn)擊兩下才能完成年份的選擇。
第一次是讓組件顯示
第二次點(diǎn)擊是觸發(fā)日期框選擇器

于是查詢了相關(guān)文檔，可以通過(guò)focus來(lái)觸發(fā)日期選擇框。如下：

document.querySelector('.time-date-picker').querySelector('input').focus() 

第一種方式：給el-date-picker 一個(gè)類名 class=“time-date-picker”，找到類名下的input手動(dòng)觸發(fā)focus。

        <div class="date-result">
        //不讓該組件顯示 只用到日期框
          <el-date-picker
            class="time-date-picker"
            style="
              position: recative;
              z-index: -100;
              transform: scale(0.2) translate(-300px, 100px);
            "
            v-model="checkYear"
            :editable="false"
            type="year"
            placeholder="選擇年份"
            @change="changeYear"
          >
          </el-date-picker>
          <div class="hiddenPicker">
            <span @click="checkPicker" style="cursor: pointer">
              <i class="el-icon-date"></i>{{ dataYear }}-{{ dateMonth }}</span
            >
            <span>消費(fèi)成本：<i>628.736.91元</i></span>
            <span>應(yīng)收賬款：<i>976.381.30元</i></span>
          </div>
        </div>

<script>
export default{
	data(){
		return{
			checkYear:''
		}
	}
	methods:{
	 changeYear(checkYear) {
      if (checkYear !== null)
      this.dataYear = checkYear.toString().substr(11, 4);
      this.clcikMonth(this.dateMonth);
    },
	checkPicker() {
      	//觸發(fā)日期框展開
      	document
        	.querySelector(".time-date-picker")
        	.querySelector("input")
        	.focus();
    	},
	}
}
</script>

第二種方式：給el-date-picker 綁定 ref=“元素”，通過(guò)this.$refs.“元素”.focus() 手動(dòng)觸發(fā)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-402835.html

          <el-date-picker
            ref="datepicke"
            v-model="checkYear"
            :editable="false"
            type="year"
            placeholder="選擇年份"
            @change="changeYear"
          >
          </el-date-picker>
		 <div class="hiddenPicker">
            <span @click="checkPicker" style="cursor: pointer">
            <i class="el-icon-date"></i>
            {{ dataYear }}-{{ dateMonth }}</span>
         </div>
         
 	checkPicker() {
      // document
      //   .querySelector(".time-date-picker")
      //   .querySelector("input")
      //   .focus();
      this.$refs.datepicke.focus();
    },

到了這里，關(guān)于el-date-picker實(shí)現(xiàn)通過(guò)其他方式觸發(fā)日期選擇器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！