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 相关文章推荐
javascript add event remove event
Apr 07 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
javascript this详细介绍
Sep 19 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
vue 中的动态传参和query传参操作
Nov 09 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 array_map()数组函数使用说明
2011/07/12 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python datetime包函数简单介绍
2019/08/28 Python
通过实例解析Python调用json模块
2019/12/11 Python
Django-imagekit的使用详解
2020/07/06 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
Overload和Override的区别
2012/09/02 面试题
护理专科毕业推荐信
2013/11/10 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
公司寄语大全
2014/04/10 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书