el-date-picker 隐藏输入框 通过按钮实现弹出

el-date-picker 隐藏输入框 通过按钮实现弹出_第1张图片
通过点击 下载制定时间数据 弹出 el-date-picker 组件

2.给它设置一个ref标识,在需要选择自定义时间时,直接通过this. r e f s . d a t e P i c k e r R e f 找到该组件,然后 refs.datePickerRef找到该组件,然后 refs.datePickerRef找到该组件,然后el表示组件元素,通过调用click点击事件控制选择器显示。

html代码:

 <el-date-picker
    v-model="timePick1"
    type="datetimerange"
    range-separator=""
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    ref="tiemPick"
    class="timnePickCSS"
  >
  el-date-picker>

 <div  @click="uploadTime">
   下载指定时间数据
 div>

js

uploadTime() {

  // 二选一
  // if (this.$refs.tiemPick.$el) this.$refs.tiemPick.$el.click();
  if (this.$refs.tiemPick) this.$refs.tiemPick.focus();
}

Bug

上面处理出现的bug就是时间选择器会跑到页面左上角,因为时间选择器是相对选择框来定位的,当选择框设置隐藏时,时间选择器就会相对整个页面来定位了,elementui封装的就是如此,除非修改源码。

所以还是需要让选择框显示,不能设置隐藏,但是可以通过设置层级间接实现。

解决方法

.timnePickCSS{
  位置 自己设置
  position: fixed;
  top: 30%;
  left: 70%;
  z-index: -1;
}

el-date-picker 隐藏输入框 通过按钮实现弹出_第2张图片

给 元素设置 visibility:hidden;  也可以
隐藏该元素,真正的隐藏,但他还占有那块空间。 

你可能感兴趣的:(vue,el-date-picker)