小说网站收录了怎么做排名,阳山网站seo,企业网站seo诊断,团队网站建设文章目录 一、前言1.1、[VueElementUI实现多套主题换肤](https://blog.csdn.net/u012804440/article/details/133975511)1.2、[VueElementUI实现在线动态换肤](https://blog.csdn.net/u012804440/article/details/133975570) 二、实现2.1、多主题色定义2.2、根节点属性修改2.2.… 文章目录 一、前言1.1、[VueElementUI实现多套主题换肤](https://blog.csdn.net/u012804440/article/details/133975511)1.2、[VueElementUI实现在线动态换肤](https://blog.csdn.net/u012804440/article/details/133975570) 二、实现2.1、多主题色定义2.2、根节点属性修改2.2.1、默认主题2.2.2、带参主题 myTheme02 2.3、效果2.4、源码 三、最后 一、前言
前端换肤有2种一种是定义好多套主题的换肤另一种是随意配置主题色换肤。而且很多是使用UI库提供的变色方案本片文章是纯主题色变量和var一起使用实现换肤效果。以下2种换肤方案有兴趣业务适配的可以点击标题了解下
1.1、VueElementUI实现多套主题换肤 1.2、VueElementUI实现在线动态换肤 二、实现
2.1、多主题色定义
定义根伪类 :root代码第 2 和 7 行。分别定义了默认和带参数的伪类定义 CSS 变量变量名需要以两个减号--开始多主题的话就添加多个带参数的伪类例如my-thememyTheme02、my-thememyTheme03等等
/* 默认 */
:root {--box-bg-01: yellow;--box-bg-02: blue;
}
/* 带参数 myTheme02 */
:root[my-thememyTheme02] {--box-bg-01: red;--box-bg-02: green;
}2.2、根节点属性修改
设置根节点html属性my-theme
const type document.documentElement.getAttribute(my-theme)myTheme02 ? : myTheme02;
document.documentElement.setAttribute(my-theme, type);2.2.1、默认主题
可看到下图右侧 html 标签上无其它属性 2.2.2、带参主题 myTheme02
可看到下图右侧 html 标签上有属性my-theme 2.3、效果 2.4、源码
templatedivdivel-button clickchangeTheme主题切换/el-button/divdiv classbox box01/divdiv classbox box02/div/div
/template
script
export default {methods: {changeTheme() {const theme document.documentElement.getAttribute(my-theme)const type theme myTheme02 ? : myTheme02;document.documentElement.setAttribute(my-theme, type);}}
}
/script
style
/* 默认 */
:root {--box-bg-01: yellow;--box-bg-02: blue;
}
/* 带参数的 */
:root[my-thememyTheme02] {--box-bg-01: red;--box-bg-02: green;
}
.box {display: inline-block;width: 100px;height: 100px;
}
.box01 {background: var(--box-bg-01);
}
.box02 {background: var(--box-bg-02);
}
/style三、最后
本人每篇文章都是一字一句码出来希望大佬们多提提意见。顺手来个三连击点赞收藏关注✨。创作不易给我打打气加加油☕
