前言
Vue 使用elementUI 使用select下拉框和日期框,点击空白处下拉框和日期框不消失
一、是什么原因造成的?
项目中使用了canvas图形,canvas会影响事件冒泡,导致点击空白区域事件无法向上执行,日期框和下拉框也就无法失焦。
二、解决方案
- 通过样式 css pointer-events:none 实现事件穿透,保留canvas事件
- 通过vue 中自 ref 获取dom节点
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e6bff4569571120e0a9d1ab26f7d5a80.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6c228debaefb91279cb90edbf5838338.png)
总结
办法总会有的,只是需要的时间不同,每个人都能通过自己的发现,去完成我们认为难的事儿。
在此记录我这几天被坑的经验,哈哈哈