结束
一次完整的面试流程就是这样啦,小编综合了腾讯的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析,分享给小伙伴们,有没有需要的小伙伴们都去领取!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
@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;
}
}
}
//声明一个根据Key获取颜色的function
@function themed($key) {
@return map-get($theme-map, $key);
}
//暂时想到的常用的开发场景下面三种背景颜色、字体颜色、边框颜色 至于阴影什么之类的忽略了
//获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color);
}
}
//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color);
}
}
//获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color);
}
}
可以根据自己的使用场景自定义混入器,上面只定义了三个常用的,更改主题无非是更改背景&边框&字体等的颜色。
3.具体在vue中使用,直接引入对应混入器就好,取哪个颜色,传哪个key,就这么简单
到此,完毕了。至于怎么动态切换html的属性data-theme的值,那就驾轻就熟,js怎么干都行了,下面举例一种:
这里是页面
<i
class=“iconfont el-ui-Group20”
@click=“handleToggleTheme(0)”
:class=“{ themeSelect: parseInt(index) === 0 }”
<i
class=“iconfont el-ui-moon”
@click=“handleToggleTheme(1)”
:class=“{ themeSelect: parseInt(index) === 1 }”