vue項目添加換膚功能

 此功能僅是告知方法，寫的過於粗糙，關鍵在於第三、四、五步，具體的哪些元素的主題需要變更，根據你的項目而定，例如nav背景色、圖標顏色、button背景色等元素，

具體的樣式自己完成即可，樣式最好使用變量的形式，為了直觀，我就直接更改的，建議使用css變量的形式，事先定義好各個主題的色值，直接引入即可

1、在navbar中寫好換膚的HTML和對應的點擊事件，並把改成顏色作為參數傳過去

 

2、我這里使用的是elementUI的<el-dropdown>

<el-dropdown trigger="hover" type="primary">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="changeColor('red')"><span class="icon iconfont icongerenzhongxin" />red</el-dropdown-item >
<el-dropdown-item @click.native="changeColor('yellow')"><span class="icon iconfont iconxiugaimima" />yellow</el-dropdown-item >
<el-dropdown-item @click.native="changeColor('green')"><span class="icon iconfont iconxiugaimima" />gren</el-dropdown-item >
<el-dropdown-item @click.native="changeColor('blue')"><span class="icon iconfont icontuichu" />blue</el-dropdown-item >
</el-dropdown-menu >
</el-dropdown >

3、然后是換膚的點擊事件的函數

// 換膚
changeColor (color) {
  console.log('顏色值', color)
  window.document.documentElement.setAttribute('data-theme', color)
  localStorage.setItem('theme', color)
},

4、在main.js中最后邊添加判斷，如果有值，則用，沒有值則賦值為默認色

let theme = localStorage.getItem('theme')
console.log('主題色值', theme)
if (!theme) {
  theme = 'default'
}
window.document.documentElement.setAttribute('data-theme', theme)

5、最后一步，在引入的樣式中定義各種主題色

 

 6、最后的結果展示