js替换css主题变量并切换iconfont文件

iconfont不止有单色、双色的图标,还有很多【多色】的图标,于是不能【去色】,只能手动替换primary

新建一个iconfont,替换过主题色的,然后与旧的iconfont配合切换使用

主要如下:

reqiure之前必须【清除缓存】,否则无法生效,require加载机制如上图所示

javascript 复制代码
const onChangeYellow = (index) => {
  if (appPrimary.value === "yellow") {
	// 重新设置主题色
    document
      .getElementsByClassName("skin-variant--semi-dark")[0]
      .style.setProperty("--v-primary-base", "#EDE20B");
    document
      .getElementsByClassName("v-main")[0]
      .style.setProperty("--v-primary-base", "#323232");

    vm.$vuetify.theme.themes.dark.primary = "#323232";

    // document.getElementsByTagName('html')[0].className = appPrimary.value
    document.documentElement.className = appPrimary.value;
	
	// 清除缓存
    delete require.cache[require.resolve("@/assets/yellow-iconfont/iconfont")];
    delete require.cache[
      require.resolve("@/assets/yellow-iconfont/iconfont.css")
    ];

	// 引入新的iconfont文件
    require("@/assets/yellow-iconfont/iconfont");
    require("@/assets/yellow-iconfont/iconfont.css");
  } else {
    document
      .getElementsByClassName("skin-variant--semi-dark")[0]
      .style.removeProperty("--v-primary-base");
    document
      .getElementsByClassName("v-main")[0]
      .style.removeProperty("--v-primary-base");

    // document.getElementsByTagName('html')[0].className = ''
    document.documentElement.className = "";

    // document.getElementsByClassName('yellow-iconfont')[0].remove()

    delete require.cache[require.resolve("@/assets/iconfont/iconfont")];
    delete require.cache[require.resolve("@/assets/iconfont/iconfont.css")];

    require("@/assets/iconfont/iconfont");
    require("@/assets/iconfont/iconfont.css");
  }
};
相关推荐
codingandsleeping5 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙6 小时前
[译] Composition in CSS
前端·css
白水清风6 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278006 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端6 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧6 小时前
Promise 的使用
前端·javascript
天天扭码6 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153177 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
前端康师傅7 小时前
JavaScript 作用域
前端·javascript
云枫晖7 小时前
JS核心知识-事件循环
前端·javascript