Vue 使用elementUI 使用select下拉框和日期框，点击空白处下拉框和日期框不消失

Vue提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是

helei1314

3605人浏览 · 2022-03-26 12:03:10

helei1314 · 2022-03-26 12:03:10 发布

前言

Vue 使用elementUI 使用select下拉框和日期框，点击空白处下拉框和日期框不消失

一、是什么原因造成的？

项目中使用了canvas图形，canvas会影响事件冒泡，导致点击空白区域事件无法向上执行，日期框和下拉框也就无法失焦。

二、解决方案

通过样式 css pointer-events:none 实现事件穿透，保留canvas事件
通过vue 中自 ref 获取dom节点

总结

办法总会有的，只是需要的时间不同，每个人都能通过自己的发现，去完成我们认为难的事儿。
在此记录我这几天被坑的经验，哈哈哈

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^