Vue项目中css变量不兼容IE的解决办法

继上一篇：https://blog.csdn.net/weixin_43827779/article/details/108491661

关于兼容性问题，可以到MDN web docs 上面查找：https://developer.mozilla.org/en-US/docs/Web/CSS/var

CSS变量在IE不兼容

对于css变量，可知大多数浏览器是兼容的，只有IE不兼容，正好做项目的时候需要兼容IE浏览器，所以这种css变量的方法不可行了

因此采用了另一种方式，在接口中获取color变量后，动态插入style标签，来全局改变css样式

解决方案

export function setUI(colorSettings) {
  return `
  .ui-frame-color{border-color:${
    colorSettings.template_title_bg_color
  }!important}`;

export function addCSS(cssText) {
  const style = document.createElement('style'); // 创建一个style元素
  const head = document.head || document.getElementsByTagName('head')[0]; // 获取head元素
  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheet.cssText = cssText; // IE
  } else {
    const textNode = document.createTextNode(cssText); // w3c
    style.appendChild(textNode);
  }
  head.appendChild(style); // 把创建的style元素插入到head中
}

然后在class里面写上相应的属性即可，如：

class = "ui-frame-color"