使用Element-plus时的一些错误处理小记
在谷歌浏览器中,使用element-plus的一些表单组件时,会报如下错误:[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952(将非被动事件侦听器添加到滚动阻止的“touchstart”事件中。请考虑将事件处理程序标记为“被动”,以提高页面的响应能力)
当应用中用到滚动事件scroll、滚轮事件wheel或者移动端touchstart/touchmove/touchend等事件时会报这样的警告,通过排查我的项目中是在使用了:TimePicker 时间选择器组件、DatePicker 日期选择器组件和Input Number 数字输入框等组件时会报这样的错误。
网上提供了两种解决方案是,我们先说第一种:安装default-passive-events插件。
使用命令:
npm i default-passive-events -S
安装default-passive-events,然后再在main.js中进行引入:
import 'default-passive-events'
安装完成后,确实是不再警告了。但是问题并没有结束,当我们再使用el-input组件时,如果带有clearable 清空属性时,当点击清空图标时,会报Unable to preventDefault inside passive event listener invocation的错误(无法在被动事件侦听器调用中防止Default的错误):
<el-input clearable v-model="val"></el-input>
另外,据说使用echart时,也会报同样的错误,虽然这个错误包括上面的警告信息都不影响页面的正常使用,但是一个不断报错报警告的应用总是会让人产生一些不踏实的感觉。
网上也提供了关于Unable to preventDefault inside passive event listener invocation这个错误的解决方法,但是测试过几个,要么不能用,要么就是需要改动element-plus的源码,因此,我决定还是先回归到最上面的警告问题上,毕竟后面的报错,是因为我们装了default-passive-events之后才出现的,所以,这里我们先卸载掉default-passive-events,尝试另一种解决方案:
新建公用文件:browser_patch.js(可以是在common目录或者untils目录,根据自己的项目定)。
文件内容如下:
//去除谷歌浏览器的scroll、wheel等事件警告
(function () {
if (typeof EventTarget !== "undefined") {
let func = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function (type, fn, capture) {
this.func = func;
if (typeof capture !== "boolean") {
capture = capture || {};
capture.passive = false;
}
this.func(type, fn, capture);
};
}
}())
然后再在main.js文件中,引入该文件:
import '@/utils/browser_patch'
这种方案的解决思路是调整事件对象addEventListener的原型,通过该解决方式处理之后,谷歌浏览器不再报警告信息,也不会再引发新的错误。
- CSS选择器:nth-child()的灵活用法及常见场景示例
CSS选择器中的nth-child()相信大家都比较熟悉,nth-child()和nth-of-type()的区别是:nth-child()不区分类型。大家经常
- 为什么你的logo图模糊不清,移动端图片虚化的解决方案
在传统pc时代的时候,几乎99%的网站都在使用图片格式作为logo,而大部分网站都使用了png透明底的图片来做网站的logo。但是进入移动时代之后,这种习惯还是
- 响应式网站布局的优缺点分析
响应式网站,通俗的讲就是使用CSS媒体查询技术,写一套代码,可以在多个终端上使用。在此之前,前端切图工作者是需要分别针对电脑端、移动端和平板等常见设备专门去写一
- 切图和前端什么关系?为什么前端又被称为切图仔?
很多初从事前端切图这个行业的新人,大多都有一个疑问?为什么要把前端开发人员称为切图仔呢?提起这个问题,我们还要从前端切图行业的发展历程来说起,当然,这个问题对与
- 目前主流的前端框架有哪些?
基本上每种语言都有对应的一些快速框架用于提升开发人员的效率,所谓框架更像是工具箱或者脚手架,在开发时如果能很好的利用框架可以起到事半功倍的效果。简单形象的说,如
- 移动端background-attachment: fixed失效解决方法
在做web前端切图时,我们经常需要做背景图片不跟随内容滚动的效果,这个时候就需要使用到background-attachment: fixed 属性,这个属性及