项目适配需要rem转换 ，但UI组件内部未转换
问题：由于组件内 ，某些组件宽度和高度是通过prop传参，然后对行内样式动态赋值，所以单位还是px
网上找的方法：
将element ui的 github源码拉下来，然后修改组件源码，然后打包，然后打补丁替换lib文件夹。
个人觉得太繁琐，问题在于，所有的组件都得适配，那不得所有的组件都得进行源码修改
思路：
1.将传参加上单位 rem
2.将组件改为按需引入，在注册之前改写，或者监听，将已赋值的行内样式，单位转为rem
main.js中引入
//主动引入后会将element ui 内部css转为rem
import "element-ui/lib/theme-chalk/index.css";
//rem转换
function pxToRem(_s, fontSize = 1920 / 20) {
//匹配:20px或: 20px不区分大小写
var reg = /(\:|: )+(\d)+(px)/gi;
let newStr = _s.replace(reg, function (_x) {
_x = _x.replace(/(\:|: )/, "").replace(/px/i, "");
return ":" + parseFloat(_x) / fontSize + "rem";
});
return newStr;
}
// element组件
import { Table } from "element-ui";
Vue.component("ElTable", {
...Table,
watch: {
...Table.watch,
//参考el-table源码可知，列表组件尺寸变化时触发
bodyHeight: {
immediate: true,
handler(value) {
//单位换算
this.$nextTick(() => {
let domContent = app.querySelectorAll("*[style]");
Array.prototype.slice.call(domContent, 0);
domContent.forEach((el) => {
if (el.classList.value.includes("el-")) {
let cloneDom = el.cloneNode();
let style = pxToRem(cloneDom.getAttribute("style"));
el.setAttribute("style", style);
}
});
});
},
deep: true,
},
data: {
immediate: true,
handler(value) {
this.store.commit("setData", value);
//单位换算
this.$nextTick(() => {
let domContent = app.querySelectorAll("*[style]");
Array.prototype.slice.call(domContent, 0);
// let htmlDom = document.getElementsByTagName("html")[0];
domContent.forEach((el) => {
if (el.classList.value.includes("el-")) {
let cloneDom = el.cloneNode();
let style = pxToRem(cloneDom.getAttribute("style"));
el.setAttribute("style", style);
}
});
});
},
},
},
});