马云的网站怎么做的,应用软件大全,施工企业发电机加油怎么做账,wordpress采集微信公众文章内容目录
一、背景
二、实现思路
方法1#xff1a;定义全局的CSS变量 方法2#xff1a;切换已定义好的css文件 方法3#xff1a;切换顶级CSS类名 (需使用css处理器,如sass、less等) 一、背景 在我们开发中我们会遇到像是需要切换程序风格、主题切换啦这种应用场景。 参考大佬…目录
一、背景
二、实现思路
方法1定义全局的CSS变量 方法2切换已定义好的css文件 方法3切换顶级CSS类名 (需使用css处理器,如sass、less等) 一、背景 在我们开发中我们会遇到像是需要切换程序风格、主题切换啦这种应用场景。 参考大佬博客
vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解纯干huo_vue换肤_Jason Ma丶丶前端工程师的博客-CSDN博客
vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解纯干huo_vue换肤_Jason Ma丶丶前端工程师的博客-CSDN博客
二、实现思路
方法1定义全局的CSS变量
App.vue
style
/* 定义全局的css变量 */
:root {/* 背景色 */--theme_bg_color: red;/* 按钮颜色 */--theme_button_color: yellowgreen;
}
/styledemo.vuecss
style scoped/* 使用全局的css变量设置颜色 */
.myButton {background: var(--theme_bg_color);
}
.myDiv {background: var(--theme_button_color);width: 200px;height: 200px;
}
/styledemo.vuehtml h3换肤 / 切换样式主题 方式1/h3button clickchangeTheme(Moccasin)换肤为Moccasin/buttonbutton clickchangeTheme(#1E90FF)换肤为#1E90FF/buttonbutton clickchangeTheme(#00FF7F)换肤为#00FF7F/buttonbutton clickchangeTheme(DeepPink)换肤为DeepPink/buttonbutton classmyButton我是一个可以换肤的按钮/buttondiv classmyDiv我是一个可以换肤的div/divdemo.vuejs
script
export default {setup() {// 切换主题方式1修改全局CSS变量let changeTheme (color) {document.documentElement.style.setProperty(--theme_bg_color, color);document.documentElement.style.setProperty(--theme_button_color, color);};return { changeTheme };},
};
/script效果 方法2切换已定义好的css文件
Public/css/theme_1.css
.myButton2{background: Moccasin;
}
.myDiv2 {background: Moccasin;
}App.vue
script
import { onMounted } from vue;
export default {name: App,components: {},setup() {onMounted(() {console.log(App.vue ---- onMounted);//方式2创建link标签默认引入 ./css/theme_1.css 主题样式文件let link document.createElement(link);link.type text/css;link.id theme;link.rel stylesheet;link.href ./css/theme_1.css;document.getElementsByTagName(head)[0].appendChild(link);});return {};},
};
/scriptdemo.vuehtml
h3换肤 / 切换样式主题 方式2/h3
button clickchangeTheme2(1)换肤为Moccasin/button
button clickchangeTheme2(2)换肤为#1E90FF/button
button clickchangeTheme2(3)换肤为#00FF7F/button
button clickchangeTheme2(4)换肤为DeepPink/button
button classmyButton2我是一个可以换肤的按钮/button
div classmyDiv2我是一个可以换肤的div/divdemo.vuejs
script
export default {setup() {// 切换主题方式2切换已定义好的css文件let changeTheme2 (type) {document.getElementById(theme).href ./css/theme_${type}.css;};return { changeTheme2 };},
};
/script效果 方法3切换顶级CSS类名 (需使用css处理器,如sass、less等)
src/assets/css/theme.less
/* 预设四种主题 */
.theme_1 {.myButton3 {background: #00ff7f;}.myDiv3 {background: #00ff7f;}
}.theme_2 {.myButton3 {background: #00ff7f;}.myDiv3 {background: #00ff7f;}
}.theme_3 {.myButton3 {background: #00ff7f;}.myDiv3 {background: #00ff7f;}
}.theme_4 {.myButton3 {background: #00ff7f;}.myDiv3 {background: #00ff7f;}
} main.js
// 方式3需要先引入全局主题样式文件
import ./assets/css/theme.less;App.vue
script
import { onMounted } from vue;
export default {name: App,components: {},setup() {onMounted(() {console.log(App.vue ---- onMounted);//方式3设置顶层div的class类名document.getElementById(app).setAttribute(class, theme_1);});return {};},
};
/scriptdemo.vuehtml
h3换肤 / 切换样式主题 方式3/h3
button clickchangeTheme3(1)换肤为Moccasin/button
button clickchangeTheme3(2)换肤为#1E90FF/button
button clickchangeTheme3(3)换肤为#00FF7F/button
button clickchangeTheme3(4)换肤为DeepPink/button
button classmyButton3我是一个可以换肤的按钮/button
div classmyDiv3我是一个可以换肤的div/divdemo.vuejs
script
export default {setup() {// 切换主题方式3切换顶级CSS类名 (需使用处理器)let changeTheme3 (type) {document.getElementById(app).setAttribute(class, theme_${type});};return { changeTheme3 };},
};
/script效果
