1. grid布局在低版本中不支持,将grid布局样式替换为flex布局
2. n-data-table在低版本下列的fixed属性不生效(图中的"操作"与"考试状态"列被赋予了fixed:right属性)且有样式混乱问题
解决方法:在低版本下将fixed列转换为普通列
3. 原生ResizeObserver在低版本中不支持,可替换为补丁包 resize-observer-polyfill
4. 在封装本地svg-icon组件中,原来使用的是href属性来链接图标地址,结果在低版本下没有显示成功,原因是href在低版本下不支持
解决办法:将href替换为xlink:href
5. input文本框placeholder重叠,原因为n-input会在原生input中添加placeholder属性,同时生成同级的.n-input__placeholder盒子来展示placeholder,并且两者的line-height不一致导致低版本下两份文本重叠
解决方法:增加全局样式,将.n-input__input-el的行高调成与.n-input__placeholder盒子一样
6. n-back-top在低版本里正常显示但点击回到顶部事件无法正常执行,原因是低版本不支持scrollTo方法
解决方法:对n-back-top组件进行二次封装,根据是否为低版本来判断是否显示
7. Event.composedPath在低版本中不支持,导致表格横向与竖向滚轮滚动不了与控制台报错
解决办法,在index.html入口模板的script逻辑的最前面添加代码补丁:
if (!Event.prototype.composedPath) {
Event.prototype.composedPath = function () {
if (this.path) {
return this.path
}
var target = this.target
var path = []
while (target.parentNode !== null) {
path.push(target)
target = target.parentNode
}
path.push(document, window)
return path
}
}
优化一:按需加载icon-park
原因:vite目前不支持按需导入icon-park,打包后请求页面时会请求全量的icon-park文件,导致首页加载体积过大,解决方法:在正式环境下通过import.meta.glob全量扫描icon图标文件、Vue defineAsyncComponent+import()动态注册组件方式,打包时将每个icon图标文件进行单独打包,运行时Vue将动态注册所有icon组件,只有在当前页面使用了某个图标时才进行请求图标文件。
代码如下:
- 按需加载方法:
- main.ts中注册