el-date-picker实现通过其他方式触发日期选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-date-picker实现通过其他方式触发日期选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-date-picker 目前只能通过点击input输入框触发日期选择器，项目中需要通过其他方式触发日期选择器同时把input输入框去掉，如点击另一个按钮事件来触发日期选择器框展开。
el-date-picker实现通过其他方式触发日期选择器
该模块由于后端接口数据传输限制在前面文章里做了些许改动。

需求左右切换可以快速找到年份，于是添加了element选择年份的日期组件。
图中隐藏了el-data-picker日期组件，手动添加样式展示时间栏选择的数据进行 +0 回显。
点击时间时，让日期组件显示出来时存在一个问题就是每次点击需要点击两下才能完成年份的选择。
第一次是让组件显示
第二次点击是触发日期框选择器

于是查询了相关文档，可以通过focus来触发日期选择框。如下：
el-date-picker实现通过其他方式触发日期选择器

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

第一种方式：给el-date-picker 一个类名 class=“time-date-picker”，找到类名下的input手动触发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>消费成本：<i>628.736.91元</i></span>
            <span>应收账款：<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() {
      	//触发日期框展开
      	document
        	.querySelector(".time-date-picker")
        	.querySelector("input")
        	.focus();
    	},
	}
}
</script>

第二种方式：给el-date-picker 绑定 ref=“元素”，通过this.$refs.“元素”.focus() 手动触发。文章来源地址https://www.toymoban.com/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();
    },