這篇文章將為大家詳細講解有關(guān)怎么在vue中使用less實現(xiàn)一個換膚功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
創(chuàng)新互聯(lián)建站是專業(yè)的鐵西網(wǎng)站建設(shè)公司,鐵西接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行鐵西網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
新建了一個 theme.less文件,代碼如下:
@theme:@themea; @themea:pink; @themeb:blue; @themec:gray;
如我最開始的想法,應(yīng)該是通過點擊事件來改變變量 @theme 的值。
我用了element-ui這個框架,所以我的下拉菜單的代碼也不復雜:
<el-dropdown class="colorBtn " trigger="click" @command="changeColor"> <span class="el-dropdown-link " >換膚</span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="a" @click="change_type(a)">夢幻粉</el-dropdown-item> <el-dropdown-item command="b" @click="change_type(b)">天空藍</el-dropdown-item> <el-dropdown-item command="c" @click="change_type(c)">霧霾灰</el-dropdown-item> </el-dropdown-menu> </el-dropdown>
點擊事件的回調(diào)事件綁定在command事件,我定義了一個changeColor的方法
changeColor(command){ console.log(command);//能獲取到當前點擊的元素的command }
于是,問題來了,我怎么通過點擊事件來改變@theme的值呢?我陷入了沉(搜)思(索)……
終于找到了一個迂回解決問題的方法,其實一開始的想法也沒有問題,但是需要再包裝一層。怎么包裝呢?我們雖然暫時控制不了變量值,但是我們可以控制元素的類名。
我們可以將換膚的部分抽出來用less函數(shù)來表示,將theme.less代碼改成下面代碼
其中 @backcolor是背景色,@fcolor是字體顏色
.theme(@backcolor:#EEA2AD,@fcolor:#fff) { .header { color: @fcolor; background: @backcolor; width: 100%; height: 2rem; position: relative; h5 { width: 100%; text-align: center; line-height: 2rem; font-size: 1rem; } .go-back { width: 2rem; height: 2rem; text-align: center; color: #fff; font-size: 0.8rem; float: left; line-height: 2rem; margin-left: 1rem; position: absolute; left: 0; top: 0; } .header-cont { width: 100%; text-align: center; line-height: 2rem; font-size: 1rem; color: #fff; } .colorBtn { width: 2rem; height: 2rem; text-align: center; color: #fff; font-size: 0.8rem; line-height: 2rem; margin-right: 1rem; position: absolute; top: 0; right: 0; } } }
新建一個color.less,設(shè)置幾種不同的皮膚樣式。這里不同的皮膚樣式,我用themea,themeb,themec….來表示,對應(yīng)組件中的command值。當我點擊粉色的時候,調(diào)用相應(yīng)的函數(shù)給元素添加相對應(yīng)的類名。不要忘記引用 theme.less
@import url('./theme.less'); .themea{ .theme();//默認的樣式 } .themeb{ .theme(blue,#fff); } .themec{ .theme(#111,#999); }
當點擊換膚的下拉菜單時,調(diào)用的changeColor方法需要給元素添加不同的類名,當然color.less文件記得引用。
changeColor(command){ console.log(command); document.getElementById('app').className ='theme'+command ; }
關(guān)于怎么在vue中使用less實現(xiàn)一個換膚功能就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
網(wǎng)站題目:怎么在vue中使用less實現(xiàn)一個換膚功能
URL鏈接:http://muchs.cn/article16/pdpogg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、網(wǎng)站營銷、Google、服務(wù)器托管、微信公眾號、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)