vue2 sass主题一键修改功能
$themes: (
light: (
//字体
font_color1: #414141,
font_color2: white,
$color-yellow: rgb(238, 255, 0),
//背景
background_color1: $color-red,
background_color2: #f0f2f5,
background_color3: red,
background_color4: #2674e7,
//边框
border_color1: #3d414a),
dark: (
//字体
font_color1: #a7a7a7,
font_color2: white,
//背景
background_color1: $color-light-gray,
$color-yellow: rgb(0, 255, 0),
background_color2: #283142,
background_color3: #1e6ceb,
background_color4: #323e4e,
//边框
border_color1: #3d414a));
//变量
$color-red: rgb(0, 0, 0);
// $color-yellow: rgb(83, 149, 235);
$color-white: white;
$color-light-gray: #818380;))
@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;
}
}
html
<div class="btn">
<el-button type="warning" @click="theme('light')">浅色</el-button>
<el-button type="danger" @click="theme('dark')">深色</el-button>
</div>
js
//换主题
theme(type) {
// this.$store.commit("upDate", { themeType: type });
window.document.documentElement.setAttribute("data-theme", type);
},
css
@import "@/assets/_handle.scss"; //修改任何元素都可以作为等级最高级 原理就是根据html标签的 [name]来判断主题类型进行修改
body {
@include background_color(background_color4);
.box {
@include font_color("$color-yellow");
@include background_color($color-yellow);
@include border_color("border_color1");
}
.el-button {
// @include background_color($color-yellow);
&:hover {
@include background_color($color-yellow);
}
}
}
vue2 sass主题一键修改功能的更多相关文章
- 【Android进阶】使用第三方平台ShareSDK实现新浪微博的一键分享功能
在公司最近的一个项目中,需要实现一键分享功能,在这里我使用的是第三方平台ShareSDK,将使用经验与大家分享 先看效果图 主界面 分享界面 由于第一次使用,所以需要先进行新浪授权,授权界面 分享结果 ...
- 使用VS中自带的一键打包功能将我们的ASP.NET Core类库打包并将程序包(类库)发布到NuGet平台上进行管理
本章将和大家简单分享下如何使用VS中自带的一键打包功能将我们的ASP.NET Core类库打包并将程序包(类库)发布到NuGet平台上进行管理. 一.注册并登录NuGet平台 NuGet官网:http ...
- 如何让照片中的人物笑起来?HMS Core视频编辑服务一键微笑功能,让人物笑容更自然
最近一键"露齿笑"席卷全网,无论是短视频用户还是社交App用户都在使用这项黑科技.当三两好友聚会拍集体照留念时,为了处理个别人的表情"瑕疵",让大家都尽量保持微 ...
- KingbaseES R6 集群一键修改集群和数据库参数测试案例
案例说明: 集群环境修改集群或数据库参数,需要在每个node上都要修改,在每个节点而执行修改操作,容易出现漏改或节点上参数不一致等错误:在KingbaseES V8R6的集群中增加了,一键修改参数 ...
- KingbaseES R3 集群一键修改集群用户密码案例
案例说明: 在KingbaseES R3集群的最新版本中增加了kingbase_monitor.sh一键修改集群用户密码的功能,本案例是对此功能的测试. kingbaseES R3集群一键修改密码说明 ...
- KingbaseES R6 集群sys_monitor.sh change_password一键修改集群用户密码
案例说明: kingbaseES R6集群用户密码修改,需要修改两处: 1)修改数据库用户密码(alter user): 2)修改.encpwd文件中用户密码: 可以通过sys_monitor.sh ...
- php大力力 [052节] php数据库页面修改功能
php大力力 [052节] php数据库页面修改功能
- android一键分享功能不使用任何第三方sdk
在android中有自带的一键分享功能,不过它会把所有带分享的应用都找出来,如果我们只需要一些常见的分享应用,该如何做呢? 下面看我的效果图(横屏和竖屏自动适配): 接下来看我的调用(支持图片和文字分 ...
- 项目开发-->一键登录功能汇总
开发网站经常会提供一些一键登录功能,如:QQ.新浪微博.淘宝账号.开心网账号.人人网账号等进行快捷登录,下面记录几个常用的开放平台地址,方便以后开发需要. 1.QQ互联 2.新浪微博 网站接入QQ互联 ...
随机推荐
- 安装Backstage.io应用
Backstage介绍 What's Backstage? Backstage is an open platform for building developer portals. Powered ...
- Java将字符串的首字母转换大小写
//首字母转小写public static String toLowerCaseFirstOne(String s){ if(Character.isLowerCase(s.charAt(0))) ...
- BlockingCollection实现生产者消费者
很简单的代码,看注释 class Program { private static ManualResetEvent _manualResetEvent = new ManualResetEvent( ...
- Python raise...from... 是啥?
调试程序时看某些库的源代码,发现有如下代码读不懂,不理解后面这个from干什么用的. try: ... except KeyError: raise **Error('') from None try ...
- Golang | 测试与性能调优
Test 我们在日常的工作过程中,自测是不可缺少的,公司还会要求所有的公共方法必须要写单测,在别的语言中,我们如果想要写单测还需要使用到测试框架,但是Go语言中,直接支持测试,并且使用起来非常简单. ...
- mpvue使用scss
安装scss 安装命令如下,不带版本号可能会导致报错 npm i sass-loader@7.3.1 -D npm i node-sass@4.14.1 -D 然后修改 build 文件夹下的 web ...
- 用js实现倒计时效果
首先获得两个时间的时间戳 var newdate = new Date('2021-01-22 21:25:00').getTime(); var olddate = new Date().getTi ...
- ArcGIS使用技巧(五)——批量裁剪
新手,若有错误还请指正! 最近用到了,所以记下来,用同一矢量范围裁剪多幅栅格数据.用到了ArcGIS中的迭代模型(图1): 图 1 首先,需要做一个准备工作,就是把需要裁剪的栅格数据放在同一数据库中( ...
- python基础练习题(题目 两个乒乓球队进行比赛,各出三人。甲队为a,b,c三人,乙队为x,y,z三人。已抽签决定比赛名单。有人向队员打听比赛的名单。a说他不和x比,c说他不和x,z比,请编程序找出三队赛手的名单)
day14 --------------------------------------------------------------- 实例022:比赛对手 题目 两个乒乓球队进行比赛,各出三人. ...
- 【远程文件浏览器】Unity+Lua开发调试利器
Remote File Explorer是一个跨平台的远程文件浏览器,用户通过Unity Editor就能操作运行在手机上的游戏或是应用的的目录文件.比如当项目打包运行到设备上时,可通过Remote ...