Vue开发页面怎么实现白天黑夜的模式切换功�

Admin 2022-06-08 群英技术资�

这篇文章主要介绍了Vue开发页面怎么实现白天黑夜的模式切换功能相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue开发页面怎么实现白天黑夜的模式切换功能文章都会有所收获,下面我们一起来看看吧�

本文主要介绍了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开发页面怎么实现白天黑夜的模式切换功能”就介绍到这了,如果大家觉得不错可以参考了解看看,如果想要了解更多,欢迎关注群英网络,小编每天都会为大家更新不同的知识�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部