超烦有没有,触发一次事件它就提示一次,洁癖的我今天就告诉你们怎么处理掉这个问题。

问题:

vue3项目中使用Element-Plus的表单form校验单的时候,浏览器出现以下警告:

[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. 
Consider marking event handler as ‘passive’ to make the page more responsive.

我个人不喜欢控制台有任何告警和报错,所以有我一定要解决。尽管告警不会直接影响项目运行出现报错 ,但是这系列警告的存在就会为以后项目运行出现未知问题埋下隐患。

解决方案:

原因:项目没有添加事件管理者’passive’,而在谷歌浏览器里面 Chrome51 版本以后,Chrome 增加了新的事件捕获机制Passive Event Listeners ,当前仅支持mousewheel/touch相关事件,目前Chrome主要利用该特性来优化页面的滑动性能。所以这里的解决方案是:安装default-passive-events插件。

安装插件
npm install default-passive-events -S 
在main.js引入
import 'default-passive-events'

就这简单两步,让你的浏览器console干净一新。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐