element-plus 日期下拉框在聚焦选中日期后切换浏览器页签后回来会自动弹出

382 阅读1分钟

issue:这个issue里描述的问题都遇到了;

开始为了解决切换浏览器页签后日期弹框自动弹出来的问题: 想让这个选择完日期后自动失去焦点

本来我给上增加了ref="datePickerRef",然后在change事件中:

<el-date-picker
  v-model="time"
  type="daterange"
  :clearable="false"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  format="YYYY-MM-DD"
  value-format="YYYY-MM-DD"
  :popper-class="'myDate'"
  @change="changeDate"
  ref="datePickerRef"
>
  changeDate() {
	//xxx
      this.$nextTick(() => {
        this.$refs.datePickerRef.blur() // blur方法在element-plus的date-picker中显示2.8.7才有此
      })
    },

blur方法在element-plus的date-picker中显示2.8.7才有此,所以我将element-plus做了升级,然后页面中下拉框的一些样式又出现了问题((页面上有暗色系的,版本升级下拉框的类名发生了变化,导致之前设置的颜色失效),又做了处理;

接着本地没有问题,部署到测试环境,由于此项目是一个子应用,猜想是主应用的element-plus版本低问题,就又出现了点击页面上第一个表单下拉框的时候,页面上所有的日期下拉框都弹出来了。。这个问题更严重了。。。本想着升级主应用版本,但是由于样式问题,不想一一对之前的页面做修改了,所以回退;然后我给这个页面增加了一个input,然后日期选完后,让这个input框聚焦。。

 <input type="text" id="focusInput" style="width: 1px; opacity: 0" />
 changeDate(value) {
     // xxx

     this.$nextTick(() => {
         document.getElementById('focusInput').focus()
     })
 },