element-UI 隐藏DatePicker时间选择框 失去焦点

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

事件冒泡被组件阻断， 点击后DatePicker组件的选择区域没有被收起

Select组件的 选择框 也没有被收起

 

手动将Select失去焦点，将DatePicker的时间选择框隐藏

使用的方法

Select组件的  blur()方法  将select失去焦点 并隐藏下拉框

DatePicker的hidePicker()方法将选择框隐藏

 

通过 给冒泡被阻断的区域外面添加 div和 点击事件 手动收起选项框

注意 这些要被收起的 组件 不能和阻断区域处在同级或者父子关系上 否则点击DataPicker时 会立即自动隐藏选项 并时区焦点

 

示例：

noBlur(){
           this.$refs.datePicker.hidePicker(); // DatePicker 使用hidePicker来隐藏选项和失去焦点
           this.$refs.select.blur();  // Select 使用blur来隐藏下拉框并失去焦点
       },

 

来源：oschina

链接：https://my.oschina.net/xiaohuai4869/blog/3153988