vue + element-ui 针对 IE 浏览器优化合集（长

前言

还是“万恶的资本主义”，接了优化 IE 的大锅 /摊手。

该项目还是我二次接盘别人的，所以对内部的坑，我默认有些嗤之以鼻的“清高”。

之前已经由非 vue-cli 升级至 vue-cli 4.5。

正文

1. 基本操作，先加 babel-polyfill

这个就简单说一下吧，基本人人都会。vue-cli 官网参考文档

• 装包

yarn add babel-polyfill -D

• main.js 中引用，建议放在最顶部

import 'babel-polyfill'

2. 正题来了，由 element-ui 兼容性，引发的 “语法错误” 环节

• 错误截图

image.png

• 解决方法：找到根目录下的 vue.config.js 文件，在 transpileDependencies 属性中增加 element-ui 即可

image.png

3. 菜单中的某个页面，在 IE 浏览中无法打开，报错 “strict 模式下不允许一个属性有多个定义”

image.png

出现该问题的原因在于，在 html 代码中某个标签的属性值进行了重复设置。

• 解决方法

点击上面的 js 文件，可以具体看到出现问题的打包后的源代码，这样的话在本地项目源码中快速检索，就能很快定位到位置。

image.png

• 将下图中的任一一个删除即可。

image.png

4. 使用 el-pagination 分页组件中的 slot 时，IE 浏览器报错

• 源码如下

el-pagination(
  @size-change='handleSizeChange',
  @current-change='handleCurrentChange',
  :current-page='tableParams.pageNum',
  :page-sizes='[1, 2, 3, 4, 5, 10, 20, 50, 100]',
  :page-size='tableParams.pageSize',
  layout='slot, prev, pager, next, jumper',
  :total='total'
)
  template(v-slot)
  span.el-pagination__total 共 {{ total }} 个用户
  el-select(
    v-model='tableParams.pageSize',
    @change='handleSizeChange(tableParams.pageSize)',
    size='mini',
    placeholder='请选择'
  )
    el-option(
      v-for='item in pageSizeList',
      :key='item.value',
      :label='item.name',
      :value='item.value'
    )

• 报错信息

[Vue warn]: Unknown custom element: <slot> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <ElPagination>

image.png

• 虽然如上报错，但是 slot 中的内容是可以在页面中正常显示的

image.png

• 该问题虽然在 issues 上是有人提过的，但是都没有具体的解决方案，可能是因为没有影响到应用的使用，暂时我也没找到解决方法，待续。。

5. 使用 el-dialog 弹窗组件设置为 append-to-body ，且页面高度足以出现滚动条时，在IE 浏览器中会错位

• 正常的在 Chrome 中展示的样子，是可以居中在页面中显示的。

image.png

• IE 中的错误位置，直接顶到上面了，如果接着将页面向下滚动，再打开弹窗，直接就看不到了，也会导致页面无法正常使用，因为弹窗无法关闭了。

image.png

• 经过一番调查之后，发现问题出在给容器自动添加的内联样式上。

• Chrome 的样式

image.png

• IE 的样式

image.png

• 问题就是 position 属性的 fixed 变为了 absolute。

• 解决方法，强行设置样式为 fixed

.el-dialog__wrapper
  position fixed !important

image.png