需求是 做一個(gè)深色主題和淺色主題切換的效果

方法一 多套css

這個(gè)方法也是最簡(jiǎn)單，也是最無(wú)聊的。

<!-- 中心 --><template> 動(dòng)態(tài)獲取父級(jí)class名稱，進(jìn)行一個(gè)父級(jí)class的多次定義 <div :class='className'> <div v-on:click='chang()'> {{ className == 'box' ? '開(kāi)燈' : '關(guān)燈' }} </div> </div></template><script>export default { name: 'Centre', data() { return { className: 'box' }; }, methods: { // 改變class chang() { this.className === 'box' ? (this.className = 'boxs') : (this.className = 'box'); } },};</script><style lang='scss'>當(dāng)class為box 使用witch的css@import './style/witch.scss';當(dāng)class為boxs 使用black的css@import './style/black.scss';.switch { position: fixed; top: 4px; right: 10px; z-index: 50; width: 60px; height: 60px; background: #fff; line-height: 60px; border-radius: 20%;}</style>

每個(gè)css文件樣式大致相同，只是最外層的父級(jí)不一樣，分別為.box 和.boxs

方法二 scss動(dòng)態(tài)切換變量

我自己是分為了2個(gè)主要文件來(lái)做的

_variable.scss 變量管理文件var()為css3中提出的聲明樣式變量的方法var(屬性名,屬性值)注意屬性值不能是字符串

// 主題切換$bgColor:var(--backgroundColor,rgb(255,255,255));$fontColor:var(--fonntColor,rgb(0,0,0));$bgmColor:var(--backgroundMColor,rgb(238,238,238));$tableColor:var(--tableColor,rgb(218,218,218));$borderColor:var(--borderColor,rgb(238,238,238));$tablesColor:var(--tablesColor,rgb(255,255,255));$inputColor:var(--inputColor,rgb(255,255,255))

創(chuàng)建的_variable.scss 文件我在vue.config.js進(jìn)行了一個(gè)全局的配置，沒(méi)有在組件中引入

css: { loaderOptions: { // 此文件為主題切換文件 sass: { prependData: `@import './src/styles/_variable.scss';`, }, }, },

2.publicStyle.js這個(gè)方法可以去修改var定義的變量document.getElementsByTagName('body')[0].style.setProperty('屬性名', '替換的屬性值f');

// 主題切換const cut = (cutcheack) => { document.getElementsByTagName('body')[0].style.setProperty('--backgroundColor', cutcheack ? '#121212' : '#fff'); document.getElementsByTagName('body')[0].style.setProperty('--fonntColor', cutcheack ? '#cecece' : '#333'); document.getElementsByTagName('body')[0].style.setProperty('--backgroundMColor', cutcheack ? '#333' : '#eee'); document.getElementsByTagName('body')[0].style.setProperty('--tableColor', cutcheack ? '#000' : '#d8d8d8'); document.getElementsByTagName('body')[0].style.setProperty('--tablesColor', cutcheack ? '#222' : '#fff'); document.getElementsByTagName('body')[0].style.setProperty('--inputColor', cutcheack ? '#666' : '#fff'); document.getElementsByTagName('body')[0].style.setProperty('--borderColor', cutcheack ? '#666' : '#fff');};export default cut;

組件中使用

<!-- 首頁(yè) --><template><div class=’home’> <el-switch v-model='cutcheack' active-color='#333' inactive-color='#13ce66' active-text='主題' @change='switchs'></el-switch></div></template><script>import cut from '../../utils/publicStyle.js';export default { name: 'Home', data() { return { cutcheack: false, //主題切換 }; }, methods: { // 左側(cè)導(dǎo)航隱藏或顯示 // 切換主題 switchs() { cut(this.cutcheack); }, },};</script><style lang=’scss’ scope>.home { height: 100%; width: 100%;background:$bgColor; .el-container { height: 100%; color:$fontColor; }}</style>

到此這篇關(guān)于VUE項(xiàng)目實(shí)現(xiàn)主題切換的文章就介紹到這了,更多相關(guān)VUE 實(shí)現(xiàn)主題切換內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！