前端开发中遇到的问题以及解决方案记录

2024.05.27-2024.05.31

1、elementui的el-upload组件在自定义上传时第二次上传没用

问题：第一次导入文件成功，然后需要再导入其他文件，第二次再点击导入选择完文件确定后就没反应了。

分析：首先一个前提是我设置了el-upload的limit为1。在第二次导入时，el-upload的fileList已经记录了我们上一次导入成功的文件，再次上传时在源码中被如下代码拦截下来了。此时fileList的length为1，即上一次传入成功的文件，files的length也为1，相加就大于了limit。此时就被return了。所以第二次点击没反应。（个人觉得组件加个提示好一点，组件进入这个if就提示大于了limit数量，这样使用者一下就知道问题了，节省了开发时间）。

解决：在每一次上传成功后去清空fileList，但是这只使用于你不需要显示已上传文件列表，只需要每次导入数据成功即可。

2、点击按钮取消axios请求

问题：在开发中遇到一个需求：上传一个大数据量的文件，上传时会有进度提示，同时会有取消按钮，点击按钮会取消请求。

解决：使用axios官网提供的API。官网已经写得很易懂了，用法也很简单。点击前往。

3、关于cookie的取值

问题：在一次开发中，项目在登录后没有保存登录接口返回的userId到cookie，但我在查看cookie时，发现浏览器的登录页面保存了，于是我打算直接拿来使用。但是在本地却无法jsCookie.get('userId')获取到这个值。

分析：Cookie 可以设置在特定的路径或域下。如果 'userId' 的 cookie 是在一个不同的路径或域下设置的，那么代码是无法访问到它。打开浏览器的开发者工具，可以看见cookie的列表第三列有个domain，这个就是该cookie的域名，当前代码的域名必须和你要获取的cookie的domain是在一个域名下才可以获取。所以我在本地的localhost域名下无法获取门户网站存入的cookie值。

解决：自己在代码本地保存一份userId，或者直接区分一下测试和生产环境，在相同域名下肯定可以获取到的。

4、手动控制el-popover的隐藏与显示点击空白处隐藏弹框

有时候经常忘记，在这个就简单记录一下代码。

    // popover的show方法
    openPopover() {
      document.addEventListener("click", this.hidePopover, false);
    },
    // popover的hide方法
    closePopover() {
      document.removeEventListener("click", this.hidePopover, false);
    },
    hidePopover(e) {
      if (!this.$refs.popoverRef.$el.contains(e.target)) {
        this.popoverVisible = false;
      }
    },

5、el-select的blur事件不生效

问题：直接在el-selct使用@blur不生效  

解决：使用@blur.capture.native

• capture：事件修饰符，用于指定事件监听器在捕获阶段而非冒泡阶段处理事件。在 DOM 事件流中，事件先经过捕获阶段，然后是目标阶段，最后是冒泡阶段。
• native：这是事件修饰符，用于监听组件根元素的原生事件。默认情况下，Vue 组件只接受自定义事件，如果你想监听组件根元素的原生事件，需要使用 .native 修饰符。

6、在el-table中使用el-popover自定义表头当数据变化时不更新

问题：在el-table的表头中添加一个图标，点击图标会在popover里出现一个列表，点击每一项会添加class，然后加上背景颜色。但是点击后数据是变了，选择项已经到了当前项，查看元素也发现class加上去了，但是视图却没变化。

解决：大部分项目应该使用的旧版的element-ui，所以给的示例是<template slot="header">，可能很多人没有加上slot-scope，这是用于表示为作用域插槽的，只有加上这个使用作用域插槽才能使用到动态的数据，即完整写法应为<template slot="header" slot-scope="scope">。还有一个方法就是使用<template #header>，这是v-slot=“header”的缩写，在vue2的高版本中已经废弃了slot和slot-scope，用v-slot替代他们，vue官网目前是软替代，不会完全不允许用户使用slot和slot-scope，但是在以后的开发中，还是多用v-slot。