您好,登錄后才能下訂單哦!
這篇文章主要講解了Vue+Scss動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的方法,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
根據(jù)預(yù)設(shè)的配色方案,在前端實(shí)現(xiàn)動(dòng)態(tài)切換系統(tǒng)主題顏色。
大概的思路就是給html根標(biāo)簽設(shè)置一個(gè)data-theme屬性,然后通過js切換data-theme的屬性值,Scss根據(jù)此屬性來判斷使用對(duì)應(yīng)主題變量。這里可以選擇持久化Vux或接口來保存用戶選擇的主題。
一、首先需要給項(xiàng)目下載配置Scss
1.安裝依賴
npm install node-sass sass-loader --save-dev
2.找到build中webpack.base.conf.js,在rules中添加scss規(guī)則
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'v] }
3.在vue文件中使用
<style lang='scss' scoped> </style>
二、在vue項(xiàng)目全局中引入scss
1.安裝 sass-resources-loader
npm install sass-resources-loader --save-dev
2.然后修改build中的utils.js
將
scss: generateLoaders('sass')
修改為:
scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { //你自己的scss全局文件的路徑 resources: path.resolve(__dirname, '../src/style/_common.scss') } } )
三、準(zhǔn)備工作已經(jīng)做完準(zhǔn)備開干
1.新建一個(gè)Scss文件_themes.scss,里面可以配置不同的主題配色方案
//當(dāng)HTML的data-theme為dark時(shí),樣式引用dark //data-theme為其他值時(shí),就采用組件庫的默認(rèn)樣式 //這里我只定義了兩套主題方案,想要再多只需在`$themes`里加就行了 //注意一點(diǎn)是,每套配色方案里的key可以自定義但必須一致,不然就會(huì)混亂 $themes: ( light: ( //字體 font_color1: #414141, font_color2: white, //背景 background_color1: #fff, background_color2: #f0f2f5, background_color3: red, background_color4: #2674e7, //邊框 border_color1: #3d414a, ), dark: ( //字體 font_color1: #a7a7a7, font_color2: white, //背景 background_color1: #1b2531, background_color2: #283142, background_color3: #1e6ceb, background_color4: #323e4e, //邊框 border_color1: #3d414a, ) );
這里定義了一個(gè)map--$themes,分別存放對(duì)應(yīng)主題的顏色變量集合。
注意,scss文件名建議用下劃線開頭,如_themes.scss,防止執(zhí)行時(shí)被編譯成單獨(dú)的css文件。
2.定義另外一個(gè)sass文件_handle.scss來操作1中的$theme變量(當(dāng)然兩個(gè)文件可以合并,分開寫是想把配置和操作解耦),上代碼:
@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-color: themed($color)!important; } } //獲取字體顏色 @mixin font_color($color) { @include themeify { color: themed($color)!important; } } //獲取邊框顏色 @mixin border_color($color) { @include themeify { border-color: themed($color)!important; } }
themeify方法用于獲取HTML的data-theme值。
themed方法用于根據(jù)HTML的data-theme值及調(diào)用者傳過來的key去_themes.scss里獲取相應(yīng)的顏色。
上面可以根據(jù)自己的使用場(chǎng)景自定義混入器,上面只定義了三個(gè)常用的背景&邊框&字體的顏色。
3.具體在vue中使用,直接引入對(duì)應(yīng)混入器就好,取哪個(gè)顏色,傳哪個(gè)key,就這么簡單
<style lang="scss" scoped> @import "@/style/_handle.scss"; .common-util { font-size: 18px; @include font_color("font_color1"); @include background_color("background_color1"); @include border_color("border_color1"); } </style>
3.使用js動(dòng)態(tài)切換HTML的屬性data-theme的值
html
<DropdownMenu slot="list"> <DropdownItem @click.native="theme('iview')">默認(rèn)</DropdownItem> <DropdownItem @click.native="theme('light')">淺色</DropdownItem> <DropdownItem @click.native="theme('dark')">深色</DropdownItem> </DropdownMenu>
js
//換主題 theme(type) { this.$store.commit('upDate', {themeType: type}); window.document.documentElement.setAttribute( "data-theme", type ); } 切換后會(huì)發(fā)現(xiàn)你的css選擇器前面多了一些東西[data-theme="dark"] [data-theme="dark"] .ivu-layout-sider, [data-theme="dark"] .ivu-menu-light, [data-theme="dark"] .ivu-layout-header { background-color: #283142!important; }
看完上述內(nèi)容,是不是對(duì)Vue+Scss動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。