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");
  }
};
相关推荐
今天不要写bug16 分钟前
vue项目基于vue-cropper实现图片裁剪与图片压缩
前端·javascript·vue.js·typescript
无敌最俊朗@16 分钟前
STL-deque面试剖析(面试复习4)
开发语言
APIshop22 分钟前
用 Python 把“API 接口”当数据源——从找口子到落库的全流程实战
开发语言·python
Java Fans35 分钟前
Qt Designer 和 PyQt 开发教程
开发语言·qt·pyqt
RwTo38 分钟前
【源码】-Java线程池ThreadPool
java·开发语言
兮动人43 分钟前
EMT4J定制规则版:Java 8→17迁移兼容性检测与规则优化实战
java·开发语言·emt4j
一点★44 分钟前
Java中的常量池和字符串常量池
java·开发语言
咬人喵喵1 小时前
14 类圣诞核心 SVG 交互方案拆解(附案例 + 资源)
开发语言·前端·javascript
开始了码1 小时前
深入理解回调函数:从概念到 Qt 实战
开发语言·qt