也不知道为什么,做了那么多年业务,最近做的项目遇见的小问题比以前遇见的都多,难道是最近项目的一些小功能比较反人类?这边记录一些小问题,以后碰上了来翻一翻,再碰见就慢慢积累。
记住密码问题:
这个就不多说了,之前已经分享过了。
监听滚动无效:
最近在vue项目里面用window.addEventListener监听滚动,结果失效了,不管在哪个生命周期还是nextTick都无效,可能是穿透了,内容在滚动,body没有滚动。最后是在最后面加一个true,捕获阶段就执行,默认false。
监听滚动获取滚动条偏移量为0:
既然监听滚动,那就离不开获取偏移量,结果打印的都是0,document.body.scrollTop和document.documentElement.scrollTop都是0,原来是body的高度不能设置,项目设置了100%,获取的都是0,要去掉或者设置auto,这其实跟监听滚动是同一个问题,穿透了。
获取元素距离浏览器顶部距离:
这其实也不算什么坑,主要是网上都是scrollTop和offsetTop之类的,都是距离父元素,不是距离浏览器顶部,其实是getBoundingClientRect().top,这边只是记录一下。
搜索栏所有input监听enter事件:
后台系统避免不了搜索,输入搜索的很习惯按enter键,下拉或者时间的因为操作鼠标可以直接点击搜索按钮。以前都没有需求搜索要能按enter键搜索,这次有了。因为项目所有的搜索都有同一个父元素,所以直接获取所有的input然后进行监听:
let inputList = document.querySelectorAll(".search-wrap input");
inputList.forEach((el) => {
if (el.className == "el-input__inner") {
el.addEventListener("keydown", (e) => {
if (window.event.keyCode == 13) {
this.search();
}
});
}
});
当然,每个input加同一个class还是什么的更简单,只是就每个都要加就是了。顺便提一嘴,一般监听了就要移除监听,但是卸载了元素之后,这个监听没被其他元素引用也会删除。
axios响应拦截返回:
一般我们设置响应都是返回response.data,这样我们接口里面就要判断code为200才能提示成功,之前研究了一下axios,返回Promise会进行链式调用,所以完全可以直接判断200的返回response,否则返回一个reject,这样只有成功才会进入请求成功的操作,不然都走错误方法:
axios.interceptors.response.use((response) => {
if(response.code == 200){
return response.data;
}else{
return Promise.reject(response)
}
}, (error) => {
return error;
}
);
ios无法触发click事件:
这个问题是水群的时候看见的,解决办法是css加上cursor:pointer;算是长见识了。
图片自适应:
最近项目有个图库管理,表格展示的时候需要让图片自适应在固定的宽高里面,以前都是固定宽度或者高度,然后让图片自适应,但是这次图片的宽高比例有些会很大,还是这样处理就会出现显示不全,解决办法是max-width或者max-height,我试了一下,设置一个就够了,项目里我就比较多余的都设置了,还加了widt:auto;
vuecli3多页刷新空白:
这是最近遇见花费最长时间的坑了,之前弄过一个多页,当时刚好配置的都是index,这次项目突然要变成多页,根据vuecli的配置,结果刷新不是报错就是空白,原来是找不到默认的index.html,配置多页,一定要有个默认的入口index.html,也就是多页的filename一定要有个index.html,不能都是根据多页文件夹的名字命名:
pages: {
back: {
entry: "src/modules/back/main.js",
template: "src/modules/back/index.html",
filename: "index.html",
},
front: {
entry: "src/modules/front/main.js",
template: "src/modules/front/index.html",
filename: "front.html",
},
}
back的filename设置成index.html,而不是back.html
警告:
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
这是因为autoprefixer版本不一样,以前是这样写:
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
要改成:
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
修改UI库样式:
修改UI库样式要在全局下才能修改,以前我很少去修改UI库的样式,这次的项目几乎都要改,有全局的,也有局部的。我们可以新建一个element.css,专门改全局的element样式,大都都要加上最高权重!important,然后另外建一个css ,给当前的组件加上class,然后去修改这个class下的element样式,加上最高权重,我觉得这是很好的一个方法。