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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue特效之翻牌动画
Apr 20 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 分页原理分析,大家可以看看
2009/12/21 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
js中function()使用方法
2013/12/24 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
django+mysql的使用示例
2018/11/23 Python
Python中的枚举类型示例介绍
2019/01/09 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
python如何编写win程序
2020/06/08 Python
python退出循环的方法
2020/06/18 Python
Python实现画图软件功能方法详解
2020/07/28 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
平面设计岗位职责
2013/12/14 职场文书
早餐连锁店计划书
2014/01/08 职场文书
军人违纪检讨书
2014/02/04 职场文书
教师专业自荐书范文
2014/02/10 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
先进个人材料怎么写
2014/12/30 职场文书
大一学生个人总结
2015/02/15 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python