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

el-date-picker 目前只能通过点击input输入框触发日期选择器，项目中需要通过其他方式触发日期选择器同时把input输入框去掉，如点击另一个按钮事件 来触发日期选择器框展开。

该模块由于后端接口数据传输限制 在前面文章里做了些许改动。

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

于是查询了相关文档，可以通过focus来触发日期选择框。如下：

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

第一种方式：给el-date-picker 一个类名 class=“time-date-picker”，找到类名下的input手动触发focus。

<divclass="date-result">
        //不让该组件显示 只用到日期框
          <el-date-pickerclass="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><divclass="hiddenPicker"><span@click="checkPicker"style="cursor: pointer"><iclass="el-icon-date"></i>{{ dataYear }}-{{ dateMonth }}</span><span>消费成本：<i>628.736.91元</i></span><span>应收账款：<i>976.381.30元</i></span></div></div><script>exportdefault{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() 手动触发。

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