vue elementui 怎么控制日期选择框的显示隐藏

Question

vue elementui 怎么通过点击按钮控制日期选择框的显示隐藏

<el-button>点击按钮控制日期的显示隐藏</el-button>
<span>{{显示当前日期}}</span>


<el-date-picker
  ref="xxx"
  v-model="value1"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>

Answer 1

<el-date-picker
  ref="xxx"
  v-model="value1"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>

methods:
this.$refs.xxx.focus();

Answer 2

打开的话用focus聚焦，API已经提供了这个方法说明；关闭文档上没说，可以用this.$refs[xx].handleClose()

Answer 3

Ele 的 API 不清楚，不过 AntD 有一个 open 属性可以控制日期选择打开和关闭，你找找Ele 是不是同样有这个属性。

---

----- 2021年8月18日 补充回答 -----
莫明其妙被点踩了，加上 AntD UI - CodePen演示，然后是 Ele UI - CodePen演示

有文档，都给到思路了，好好看看文档里的 属性 和 API 不好吗，非要喂着吃。