element ui踩坑

项目适配需要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);
            }
          });
        });
      },
    },
  },
});