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 router安装及使用方法解析
Dec 02 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
详解Vue router路由
Nov 20 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue如何清除浏览器历史栈
May 25 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
学习php中的正则表达式
2014/08/17 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
javascript拖拽应用实例(二)
2016/03/25 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
我的求职计划书
2014/01/10 职场文书
便利店促销方案
2014/02/20 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
公司委托书格式范文
2014/04/04 职场文书
医院科室评语
2015/01/04 职场文书
清明节主题班会
2015/08/14 职场文书
学生安全责任协议书
2016/03/22 职场文书