Vue中使用Scss实现配置、切换主题方式
作者：明天也要努力
这篇文章主要介绍了Vue中使用Scss实现配置、切换主题方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
样式文件目录介绍
本项目中的公共样式文件均位于 src/assets/css 目录下，其中 index.scss是总的样式文件的汇总入口
common.scss 是供全局使用的一些基本样式(常量）
- _theme.scss
- _handle.scss 两个文件是进行主题颜色配置的文件
如下图：
将 index.scss 在 main.js 文件中引入即可全局使用。
主题 scss 文件配置
src/assets/css 目录下的 _themes.scss，里面可配置不同的主题配色方案
本文配置了两个主题颜色：light、dark
@import './common.scss';
$themes: (
light: (
bg-color: $white,
font-color: $regularBlack,
link-color: $grey,
icon-home: url('~@/assets/img/icon/lightHomeIcon.svg'),
icon-filter: url('~@/assets/img/icon/lightFilter.png'),
),
dark: (
bg-color: $black,
font-color: $white,
link-color: $blue,
icon-home: url('~@/assets/img/icon/darkHomeIcon.svg'),
icon-filter: url('~@/assets/img/icon/darkFilter.png'),
)
)
src/assets/css 目录下的 _handle.scss 用来操作上述 _themes.scss 中 $theme 的变量
_handle.scss 文件内容：
@import "./_themes.scss";
// 从主题色map中取出对应颜色
@function themed($key) {
@return map-get($theme-map, $key);
}
// 切换主题时 获取不同的主题色值
@mixin themeify {
@each $theme-name,$theme-map in $themes {
// !global 把局部变量强升为全局变量
$theme-map: $theme-map !global;
// 判断html的data-theme的属性值 #{}是sass的插值表达式
// & sass嵌套里的父容器标识 @content是混合器插槽，像vue的slot
[data-theme="#{$theme-name}"] & {
@content;
}
}
}
// 获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color) !important;
}
}
// 获取背景图片
@mixin background_image($color) {
@include themeify {
background-image: themed($color) !important;
}
}
// 获取图片
@mixin content($color) {
@include themeify {
content: themed($color) !important;
}
}
// 获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color) !important;
}
}
// 获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color) !important;
}
}
组件中使用
样式文件都配置完成了，怎么设置当前需要使用的主题呢 ？
此处具体情况具体分析，在合适的页面或位置写入即可，本文是写在了 App.vue 项目入口文件中，通过
window.document.documentElement.setAttribute();
方法传入当前想要使用的主题。本文默认传入的 ‘light’，则 vue 页面中使用的即为 _theme.scss 中的 light 对象下配置好的颜色或者其他属性；
设置其他主题色（如：dark、blue）同理，前提是 _theme.scss 文件中存在配置好的对应主题样式；
// App.vue
<template>
<div id="app">
<div class="fun">
<el-switch
v-model="switchVal"
active-color="#2c2c2c"
inactive-color="#e8e4e4"
@change="switchChange">
</el-switch>
</div>
<el-menu
:default-active="activeIndex"
mode="horizontal"
text-color="#fff"
background-color="#545c64"
active-text-color="#ffd04b"
@select="handleSelect">
<el-menu-item index="/home">
主页
</el-menu-item>
<el-submenu index="1">
<template slot="title">图表</template>
<el-menu-item index="/charts">折线图</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">表格</template>
<el-menu-item index="/table">普通表格</el-menu-item>
<el-menu-item index="/dynamicTable">动态表格</el-menu-item>
</el-submenu>
</el-menu>
<router-view/>
</div>
</template>
<script>
export default {
data(){
return {
switchVal: false,
activeIndex: '/home',
}
},
methods:{
switchChange(val){
if(val){
window.document.documentElement.setAttribute('data-theme', "dark");
}else{
window.document.documentElement.setAttribute('data-theme', "light");
}
},
handleSelect(key, keyPath) {
this.$router.push(key)
}
},
mounted(){
this.switchChange(this.switchVal);
}
}
</script>
<style lang="scss">
// 引入主题配置文件
@import "@/assets/css/_handle.scss";
#app {
height: 100vh;
text-align: center;
@include background_color('bg-color');
// background_color 为 _handle.scss 文件中配置好的属性，传入'bg-color'即可通过当前的主题配置在 _theme.scss 文件中取色。
.fun{
width: 100%;
display: flex;
justify-content: flex-end;
padding: 5px;
box-sizing: border-box;
}
}
</style>
home.vue 中同理
<style lang="scss" scoped>
@import "@/assets/css/_handle.scss";
.home{
text-align: center;
@include font_color('font-color');
.homeIcon{
width: 14px;
height: 14px;
margin-right: 5px;
display: inline-block;
background-size: 100% 100%;
@include background_image('icon-home');
}
a{
@include font_color('link-color');
}
}
</style>
效果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。