本文主要介紹了Vue+scss白天和夜間模式切換功能的實現(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

然后需要新建三個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白天和夜間模式切換功能的實現(xiàn)方法的文章就介紹到這了,更多相關Vue 白天和夜間模式切換 內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！