1. 首页 香港六和开奖现场结果安装 香港六和开奖现场直播 香港六和开奖现场直播1 香港六和开奖现场直播118 香港六和开奖现场直播132期

当前位置:主页 > 香港六和开奖现场直播132期 > 内容

前端 “一键换肤“ 的几种方案
发布日期:2022-04-21 01:31   来源:未知   阅读:

  现在越来越多的网站都提供了拥有换肤(切换主题)功能,如 ElementUI,既是为了迎合用户需求,或是为了凸显自己特点,因此提供了个性化定制的功能.

  其实之前就想了解和实现 “一键换肤” 功能,但是由于种种原因一直拖到了现在.

  在template模板中通过vuex中的主题设置对应类名,如头部代码如下:

  下面theme.css中通过.light和.dark两个类选择器来区分明亮主题和暗黑主题,并且事先准备了它们对应的样式,如下:

  实现多套 CSS 主题样式,根据用户切换操作,通过link标签动态加载不同的主题样式,2021年澳门精准三肖爆特,主要解决了多个主题色被编译到一个文件中导致单个文件过大.

  themeUtil.js中负责获取当前对应样式值,以及设置body上的 CSS 变量值,如下:

  实现了前面的内容之后,现在给分别给light和dark主题添加一个 logo,这一部分其实很简单了,下面的示例代码是基于 Vue3 进行实现的

  以上就是目前了解到一些的换肤方案,以上全部基于 css 去实现的,不过知道了原理就可以结合less和sass进行更好的实现。如果有更好的方案,欢迎贴在评论区进行分享!!!