Vue+scss白天和夜间模式切换功能的实现方法


Posted in Vue.js onJanuary 05, 2021

本文主要介绍了Vue+scss白天和夜间模式切换功能的实现方法,分享给大家,具体如下:

效果图

Vue+scss白天和夜间模式切换功能的实现方法 

图片被压缩了不够清晰。

安装Scss

注:若安装失败可以考虑使用cnpm,或者切换npm源等方式安装。

npm install node-sass --save-dev  //安装node-sass
npm install sass-loader --save-dev //安装sass-loader
npm install style-loader --save-dev //安装style-loader

新建页面DarkModelPage.vue

文件所在位置:src/DarkModelPage.vue

命名路由路径:/dark-model-page

<template>
  <div id="DarkModelPage">
    
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped lang="scss">

</style>

在src/assets新建目录scss

在src/assets/scss新建目录common

然后需要新建三个scss文件分别是

  • _themes.scss
  • _handle.scss
  • common.scss

_themes.scss

$themes: (
 light: (
  background_color: #cccccc,//背景色
  text-color: rgba(0, 0, 0, 0.65), // 主文本色
 ),
 dark: (
  background_color: #181c27,//背景
  text-color: rgba(255, 255, 255, 0.65), // 主文本色
 )
);

_handle.scss

@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: themed($color)!important;
 }
}
//获取字体颜色
@mixin font_color($color) {
 @include themeify {
  color: themed($color)!important;
 }
}

common.scss

@import "@/assets/scss/common/_handle.scss";
/**
自定义的公共样式...
**/

DarkModelPage.vue中使用

<template>
  <div id="DarkModelPage">
    <div>
      <h1 class="title">天小天个人网</h1>
      <a class="btn" @click="modelBrn">模式切换</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "DarkModelPage",
  data(){
    return {
     dark:false,
    }
  },
  methods:{
    modelBrn(){
      this.dark = !this.dark;
      if(this.dark){
        window.document.documentElement.setAttribute( "data-theme", 'dark' );
      }else{
         window.document.documentElement.setAttribute( "data-theme", 'light' );
      }
    },
  },
  mounted() {
    window.document.documentElement.setAttribute( "data-theme", 'light' );
  },
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/common/common';

#DarkModelPage{
  //在此使用了背景颜色变量
  @include background_color("background_color");
  //再次使用了文字颜色变量
  @include font_color("text-color");

  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content:center;
  align-items: center;
  transition: background 1s , color 0.6s;
  .title{
    margin-bottom: 20px;
  }
  .btn{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 40px;
    margin: 0 auto;
  }
}
</style>

注:如需更多颜色及样式切换,只需要在_themes.scss设置好变量,通过 _handle.scss设置切换函数,即可以在页面中通过该函数对指定样式进行设置。

本文演示视频: 点击浏览

到此这篇关于Vue+scss白天和夜间模式切换功能的实现方法的文章就介绍到这了,更多相关Vue 白天和夜间模式切换 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue 实现上传组件
May 31 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 #Vue.js
vue3弹出层V3Popup实例详解
Jan 04 #Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 #Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 #Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 #Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 #Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 #Vue.js
You might like
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php写的简易聊天室代码
2011/06/04 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python CSV模块使用实例
2015/04/09 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Python的randrange()方法使用教程
2015/05/15 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python数据库小程序源代码
2019/09/15 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
商务经理岗位职责
2014/08/03 职场文书
天猫活动策划方案
2014/08/21 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
教师师德师风整改措施
2014/10/24 职场文书
教育实习指导教师评语
2014/12/31 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书