前言
还是“万恶的资本主义”，接了优化
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
