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

方法一 多套css

這個方法也是最簡單，也是最無聊的。

<!-- 中心 --><template> 動態獲取父級class名稱，進行一個父級class的多次定義 <div :class='className'> <div v-on:click='chang()'> {{ className == 'box' ? '開燈' : '關燈' }} </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'>當class為box 使用witch的css@import './style/witch.scss';當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>

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

方法二 scss動態切換變量

我自己是分為了2個主要文件來做的

_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))

創建的_variable.scss 文件我在vue.config.js進行了一個全局的配置，沒有在組件中引入

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

2.publicStyle.js這個方法可以去修改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;

組件中使用

<!-- 首頁 --><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: { // 左側導航隱藏或顯示 // 切換主題 switchs() { cut(this.cutcheack); }, },};</script><style lang=’scss’ scope>.home { height: 100%; width: 100%;background:$bgColor; .el-container { height: 100%; color:$fontColor; }}</style>

到此這篇關于VUE項目實現主題切換的文章就介紹到這了,更多相關VUE 實現主題切換內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！