本文主要介紹了Vue+scss白天和夜間模式切換功能的實現方法，分享給大家，具體如下：

效果圖

圖片被壓縮了不夠清晰。

安裝Scss

注：若安裝失敗可以考慮使用cnpm，或者切換npm源等方式安裝。

npm install node-sass --save-dev //安裝node-sassnpm install sass-loader --save-dev //安裝sass-loadernpm 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

$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 @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 白天和夜間模式切換 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！