Vue + Scss 动态切换主题颜色实现换肤的示例代码


Posted in Javascript onApril 27, 2020

根据预设的配色方案,在前端实现动态切换系统主题颜色。

大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。

一、首先需要给项目下载配置Scss

1.安装依赖

npm install node-sass sass-loader --save-dev

2.找到build中webpack.base.conf.js,在rules中添加scss规则

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass'v]
}

3.在vue文件中使用

<style lang='scss' scoped>
</style>

二、在vue项目全局中引入scss

1.安装 sass-resources-loader

npm install sass-resources-loader --save-dev

2.然后修改build中的utils.js

scss: generateLoaders('sass')

修改为:

scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
//你自己的scss全局文件的路径
resources: path.resolve(__dirname, '../src/style/_common.scss')
}
}
)

三、准备工作已经做完准备开干

1.新建一个Scss文件_themes.scss,里面可以配置不同的主题配色方案

//当HTML的data-theme为dark时,样式引用dark
//data-theme为其他值时,就采用组件库的默认样式
//这里我只定义了两套主题方案,想要再多只需在`$themes`里加就行了
//注意一点是,每套配色方案里的key可以自定义但必须一致,不然就会混乱

$themes: (

light: (
//字体
font_color1: #414141,
font_color2: white,

//背景
background_color1: #fff,
background_color2: #f0f2f5,
background_color3: red,
background_color4: #2674e7,

//边框
border_color1: #3d414a,

),

dark: (
//字体
font_color1: #a7a7a7,
font_color2: white,

//背景
background_color1: #1b2531,
background_color2: #283142,
background_color3: #1e6ceb,
background_color4: #323e4e,

//边框
border_color1: #3d414a,

)
);

这里定义了一个map--$themes,分别存放对应主题的颜色变量集合。

注意,scss文件名建议用下划线开头,如_themes.scss,防止执行时被编译成单独的css文件。

2.定义另外一个sass文件_handle.scss来操作1中的$theme变量(当然两个文件可以合并,分开写是想把配置和操作解耦),上代码:

@import "./_themes.scss";

//遍历主题map
@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)!important;
}
}

//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color)!important;
}
}

//获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color)!important;
}
}

themeify方法用于获取HTML的data-theme值。

themed方法用于根据HTML的data-theme值及调用者传过来的key去_themes.scss里获取相应的颜色。
上面可以根据自己的使用场景自定义混入器,上面只定义了三个常用的背景&边框&字体的颜色。

3.具体在vue中使用,直接引入对应混入器就好,取哪个颜色,传哪个key,就这么简单

<style lang="scss" scoped>
 @import "@/style/_handle.scss";

 .common-util {
  font-size: 18px;
  @include font_color("font_color1");
  @include background_color("background_color1");
  @include border_color("border_color1");
 }
</style>

3.使用js动态切换HTML的属性data-theme的值

html

<DropdownMenu slot="list">
 <DropdownItem @click.native="theme('iview')">默认</DropdownItem>
 <DropdownItem @click.native="theme('light')">浅色</DropdownItem>
 <DropdownItem @click.native="theme('dark')">深色</DropdownItem>
</DropdownMenu>

js

//换主题
theme(type) {
this.$store.commit('upDate', {themeType: type});
window.document.documentElement.setAttribute( "data-theme", type );
}
切换后会发现你的css选择器前面多了一些东西[data-theme="dark"]
[data-theme="dark"] .ivu-layout-sider,
[data-theme="dark"] .ivu-menu-light,
[data-theme="dark"] .ivu-layout-header {
background-color: #283142!important;
}

到此这篇关于Vue + Scss 动态切换主题颜色实现换肤的示例代码的文章就介绍到这了,更多相关Vue Scss 换肤内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
深入理解js generator数据类型
Aug 16 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 #Javascript
react组件基本用法示例小结
Apr 27 #Javascript
react基本安装与测试示例
Apr 27 #Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 #Javascript
JS浏览器BOM常见操作实例详解
Apr 27 #Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 #Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 #Javascript
You might like
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
前端必学之PHP语法基础
2016/01/01 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
python通过smpt发送邮件的方法
2015/04/30 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python 加密与解密小结
2018/12/06 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
python3正则模块re的使用方法详解
2020/02/11 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
opencv实现图像平移效果
2021/03/24 Python
项目合作协议书范本
2014/04/16 职场文书
班级课外活动总结
2014/07/09 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
维稳承诺书
2015/01/20 职场文书
六一儿童节园长致辞
2015/07/31 职场文书