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

效果圖

圖片被壓縮了不夠清晰。

安裝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

然后需要新建三個(gè)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 把局部變量強(qiáng)升為全局變量 $theme-map: $theme-map !global; //判斷html的data-theme的屬性值 #{}是sass的插值表達(dá)式 //& sass嵌套里的父容器標(biāo)識(shí) @content是混合器插槽，像vue的slot [data-theme='#{$theme-name}'] & { @content; } }}//聲明一個(gè)根據(jù)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'>天小天個(gè)人網(wǎng)</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設(shè)置好變量，通過 _handle.scss設(shè)置切換函數(shù)，即可以在頁面中通過該函數(shù)對(duì)指定樣式進(jìn)行設(shè)置。

本文演示視頻： 點(diǎn)擊瀏覽

到此這篇關(guān)于Vue+scss白天和夜間模式切換功能的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue 白天和夜間模式切換 內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！