Vue中使用sass实现换肤功能


Posted in Javascript onSeptember 07, 2018

先给大家展示下效果图:

 Vue中使用sass实现换肤功能

先给大家看一下目录和主要文件:

Vue中使用sass实现换肤功能

解释一下主要文件:

base.scss: 一些通用样式文件。

mixin.scss: 定义mixin方法的文件。

varibale.scss: 颜色,字体,背景的配置文件

以下就拿封装的head组件代码来展示以下实现逻辑,现在大家主要是来理解,不要着急复制代码,在文章最后会贴出三个主要文件的代码的。

Vue中使用sass实现换肤功能

为什么会在 background:$background-color-theme; 地方标注错误?

如果之前用过sass的同学可能会知道,这样虽然实现了css样式变量化,但是后期没有办法作出灵活更改的。

所以需要把设置背景颜色封装成一个mixin方法(包括字体大小,字体颜色,都需要进行封装)

请看mixin.scss中的代码:

Vue中使用sass实现换肤功能

主要原理:

通过设置html的attribute属性在封装的函数中进行判断,进行相应的设置不同的颜色

css中 [ ] 可以识别到在html标签上设置的属性,所以在html上对应属性发生变化时,就会执行相应的样式,

这一步有点类似于平时给div添加一个.active属性,css自动执行相应样式。

更换主题时的具体操作:

Vue中使用sass实现换肤功能

下边是主要文件完整的代码

base.scss示例代码:

@charset "utf-8";
$font_default_color:$font-color-shallow3;
$font_default_size:$font_medium_s;
*{
 margin:0;padding:0;box-sizing:border-box;color:$font_default_color;
 /*@include font-dpr($font_default_size);*/
}
a{text-decoration:none;color:$font_default_color;}
.sub-page { //routerView
 position: fixed;top: 0;bottom: 0;width: 100%;background:#fff;right: 0;left: 0;z-index: 5;
}
#content{width:100%;position:absolute;@include px2rem(top,88px);bottom:0;overflow-x:auto;}
.width{
 width:100%;
}
/*竖向居中*/
.table-cell{
 display:table-cell;vertical-align:middle;text-align:center;
}
.middle{
 vertical-align:middle;
}
/*弹性盒*/
.flex{
 display: inline-flex;display: -webkit-flex;display: flex;
}
/*弹性盒-子元素可竖向居中*/
.flex-middle{
 display :flex; display:-webkit-flex; align-items:center; -webkit-align-items:center; justify-content:center ;
}
.tl{
 text-align:left;
}
.tc{
 text-align:center;
}
.tr{
 text-align:right;
}
.fl{
 float:left;
}
.fr{
 float:right;
}
.clear::after{
 /*原理: overflow!=visible ;display!=block;float!=none;position!=static||relative 都可为元素创建BFC;消除边距重叠或者浮动产生的影响*/
 content:'';overflow:hidden;clear:both;
}

mixin.scss示例代码:

@charset "utf-8";
@import "./variable";/*引入配置*/
@mixin font_size($size){/*通过该函数设置字体大小,后期方便统一管理;*/
 @include font-dpr($size);
}
@mixin font_color($color){/*通过该函数设置字体颜色,后期方便统一管理;*/
 color:$color;
 [data-theme="theme1"] & {
 color:$font-color-theme1;
 }
 [data-theme="theme2"] & {
 color:$font-color-theme2;
 }
 [data-theme="theme3"] & {
 color:$font-color-theme3;
 }
}
@mixin bg_color($color){/*通过该函数设置主题颜色,后期方便统一管理;*/
 background-color:$color;
 [data-theme="theme1"] & {
 background-color:$background-color-theme1;
 }
 [data-theme="theme2"] & {
 background-color:$background-color-theme2;
 }
 [data-theme="theme3"] & {
 background-color:$background-color-theme3;
 }
}
/*px转rem*/
@mixin px2rem($property,$px,$px2:false,$px3:false,$px4:false){
 $rem:75px;/* 设计稿尺寸/10 */
 @if $px and $px2 and $px3 and $px4 {
 #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem ($px3 / $rem) + rem ($px4 / $rem) + rem;
 }
 @else if $px and $px2 {
 #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem;
 //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem ($px2 * 1.4 / $rem) + rem;}
 }
 @else{
 #{$property}: ($px / $rem) + rem!important;
 //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem;}
 }
}
/*根据dpr计算font-size*/
@mixin font-dpr($font-size){
 font-size: $font-size;
 //[data-model="pad"] & { font-size: $font-size * 1.4; }
 [data-dpr="2"] & { font-size: $font-size * 2;}
 [data-dpr="3"] & { font-size: $font-size * 3;}
}
/*弹性盒属性*/
%flexbox{
 display: inline-flex;display: -webkit-flex;display: flex;
}
/*弹性盒比例*/
@mixin flex($num:1){
 -webkit-box-flex:$num;-moz-box-flex:$num;-webkit-flex:$num;-ms-flex:$num;flex:$num;
}
/*超行溢出显示省略号*/
@mixin overflow($num:1,$fontSize:0,$lineHeight:1.5){
 display: -webkit-box;-webkit-line-clamp:$num; overflow: hidden;
 /*! autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */
 @if $fontSize!=0 and $lineHeight{/*高度需要撑开*/
 line-height:$lineHeight;
 @if $lineHeight < 1.2 {
  line-height:1.2; /*最小需要1.2,否则在部分安卓机下第$num+1行会顶部漏出*/
 }
 height: $num * $fontSize * $lineHeight;
 [data-dpr="2"] & { height: $num * $fontSize * $lineHeight * 2!important;}
 [data-dpr="3"] & { height: $num * $fontSize * $lineHeight * 3!important;}
 }
}
//transition兼容写法
@mixin transition($content:all .2s){
 -moz-transition: $content;
 -webkit-transition: $content;
 -o-transition: $content;
 transition: $content;
}
//transfrom兼容
@mixin translateX($num:-50%){
 -ms-transform: translateX($num);
 -moz-transform: translateX($num);
 -webkit-transform: translateX($num);
 -o-transform: translateX($num);
 transform: translateX($num);
}
@mixin translateY($num:-50%){
 -ms-transform: translateY($num);
 -moz-transform: translateY($num);
 -webkit-transform: translateY($num);
 -o-transform: translateY($num);
 transform: translateY($num);
}
@mixin rotate($deg:90deg){
 -ms-transform:rotate($deg);
 -moz-transform:rotate($deg);
 -webkit-transform:rotate($deg);
 -o-transform:rotate($deg);
 transform:rotate($deg);
}

variable.scss示例代码:

//颜色定义规范
$background-color-theme: #3f8e4d;//背景主题颜色默认
$background-color-theme1: red;//背景主题颜色1
$background-color-theme2: #652BF5;//背景主题颜色2
$background-color-theme3: deepskyblue;//背景主题颜色3
$background-color-themesec: #edc148;//背景次要主题颜色
$font-color-theme : #3f8e4d;//字体主题颜色默认
$font-color-theme1 : red;//字体主题颜色1
$font-color-theme2 : #652BF5;//字体主题颜色2
$font-color-theme3 : deepskyblue;//字体主题颜色3
$font-color-themesec : #edc148;//字体次要主题颜色
$font-color-shallow0 : #000;
$font-color-shallow1 : #111;
$font-color-shallow2 : #222;
$font-color-shallow3 : #333;
$font-color-shallow4 : #444;
$font-color-shallow5 : #555;
$font-color-shallow6 : #666;
$font-color-shallow7 : #777;
$font-color-shallow8 : #888;
$font-color-shallow9 : #999;
$font-color-shallowdb : #dbdbdb;
//字体定义规范
$font_little_s:10px;
$font_little:12px;
$font_medium_s:14px;
$font_medium:16px;
$font_large_s:18px;
$font_large:20px;

mine.vue中更换主题时的操作代码

<template>
 <div id="bookcaselist">
 <v-head :title="title" :showBack="showBack"></v-head>
 <div id="content">
  <p @click="changeTheme('theme1')"></p>
  <p @click="changeTheme('theme2')"></p>
  <p @click="changeTheme('theme3')"></p>
 </div>
 <v-foot :activeIndex="3"></v-foot>
 </div>
</template>
<script>
export default {
 name: 'mine',
 data () {
 return {
  title: '我的',
  showBack: false
 }
 },
 methods: {
 changeTheme (theme) {
  window.document.documentElement.setAttribute('data-theme', theme)
 }
 },
 components: {
 }
}
</script>
<style scoped="" lang="scss">
 p{
 @include px2rem(width,100px);
 @include px2rem(height,100px);
 @include px2rem(margin,20px);
 float:left;
 }
 p:first-child{
 background-color:red;
 }
 p:nth-child(2){
 background-color:#652BF5;
 }
 p:last-child{
 background-color:deepskyblue;
 }
</style>

其实过程和逻辑都比较简单,大家理解一下,有不明白的地方在下方评论区评论,有错误的地方也欢迎大家指出,看到后我会回复

总结

以上所述是小编给大家介绍的Vue中使用sass实现换肤功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js跟随滚动条滚动浮动代码
Dec 31 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
javascript实现时钟动画
Dec 03 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 #Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 #Javascript
koa socket即时通讯的示例代码
Sep 07 #Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 #Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 #Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 #Javascript
You might like
那些年一起学习的PHP(一)
2012/03/21 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
js字符串转成JSON
2013/11/07 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
理解javascript回调函数
2014/12/28 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
Python中将字典转换为列表的方法
2016/09/21 Python
python logging日志模块的详解
2017/10/29 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python模块导入的方法
2019/10/24 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
个人简历自我鉴定
2013/10/11 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
学生会离职感言
2014/02/11 职场文书
就业协议书范本
2014/04/11 职场文书
公司会议策划方案
2014/05/17 职场文书
结对共建工作方案
2014/06/02 职场文书
网络营销策划方案
2014/06/04 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL