最近项目遇到的坑

151 阅读4分钟

也不知道为什么,做了那么多年业务,最近做的项目遇见的小问题比以前遇见的都多,难道是最近项目的一些小功能比较反人类?这边记录一些小问题,以后碰上了来翻一翻,再碰见就慢慢积累。

记住密码问题:

这个就不多说了,之前已经分享过了。

监听滚动无效:

最近在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样式,加上最高权重,我觉得这是很好的一个方法。