vue+iview+less 實(shí)現(xiàn)換膚功能

更新時(shí)間：2018年08月17日 11:12:41 作者：krify

這篇文章主要介紹了vue+iview+less 實(shí)現(xiàn)換膚功能,項(xiàng)目搭建用的vue—cli，css框架選擇的iview，具體操作流程大家跟隨腳本之家小編一起看看吧

項(xiàng)目搭建用的vue—cli，css框架選擇的iview

1、首先安裝less支持

npm install --save-dev less-loader less

然后去build文件夾下的webpack.base.conf.js文件中，添加對.less的支持

2、準(zhǔn)備工作做好了，開始換膚

2.1新建一個(gè)文件夾styles，在里面新建一個(gè)文件theme.less

定義一個(gè).theme()方法，寫上需要的顏色參數(shù)如圖：

2.2 styles文件夾下再新建一個(gè)存放各類主題的color.less文件，里面根據(jù)自己需求定義各類主題，記得把theme.less文件引入

 @import url('./theme.less');
  .theme1{
    .theme();//默認(rèn)的樣式
  }
  .theme2{
    .theme(rgb(141, 139, 219),#fff,#eee,rgb(130, 126, 240));
  }
  .theme3{
    .theme(rgb(172, 214, 200),#615f5f,#fff,rgb(91, 139, 123));
  }

2.3 在main.js中引入color.less文件

import './styles/color.less'

2.4 在進(jìn)行主題選擇的.vue文件中，進(jìn)行如下操作

 <Dropdown>
    <a href="javascript:void(0)" rel="external nofollow" >
      下拉菜單
      <Icon type="arrow-down-b"></Icon>
    </a>
    <DropdownMenu slot="list">
      <DropdownItem @click.native="changeColor(1)">搖滾主題</DropdownItem>
      <DropdownItem @click.native="changeColor(2)">新時(shí)代主題</DropdownItem>
      <DropdownItem @click.native="changeColor(3)">基礎(chǔ)主題</DropdownItem>
    </DropdownMenu>
  </Dropdown>
   //更換主題
   changeColor(num){
    //把className theme1，theme2，theme3掛載在app.vue的<div id="app"></div>上
    document.getElementById('app').className ='theme'+num ;
    this.localStorageDate()
   },
   //存儲(chǔ)localStoarge，用于進(jìn)入系統(tǒng)時(shí)，記住用戶上一次的選擇，自動(dòng)加載用戶上一次選擇的主題主題，記得在mounted()里面調(diào)用
   localStorageDate(){
    localStorage.setItem('app',document.getElementById('app').className)
   }

總結(jié)

以上所述是小編給大家介紹的vue+iview+less 實(shí)現(xiàn)換膚功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue中nextTick用法實(shí)例
在本篇文章里小編給大家整理了關(guān)于vue中nextTick用法實(shí)例以及相關(guān)代碼內(nèi)容，需要的朋友們可以參考下。
2019-09-09
淺談Vue SPA 首屏加載優(yōu)化實(shí)踐
本篇文章主要介紹了淺談Vue SPA 首屏加載優(yōu)化實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
Ant Design Vue Pro靜態(tài)路由如何改為動(dòng)態(tài)路由
這篇文章主要介紹了Ant Design Vue Pro靜態(tài)路由如何改為動(dòng)態(tài)路由問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue大數(shù)據(jù)表格卡頓問題的完美解決方案
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問題的完美解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue實(shí)現(xiàn)手機(jī)號碼的校驗(yàn)實(shí)例代碼（防抖函數(shù)的應(yīng)用場景）
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)手機(jī)號碼的校驗(yàn)的相關(guān)資料，主要是防抖函數(shù)的應(yīng)用場景，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue組件更新數(shù)據(jù)v-model不生效的解決
這篇文章主要介紹了Vue組件更新數(shù)據(jù)v-model不生效的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于el-table實(shí)現(xiàn)行內(nèi)增刪改功能
這篇文章主要介紹了基于el-table實(shí)現(xiàn)行內(nèi)增刪改功能,用過通過操作按鈕點(diǎn)擊刪除或者編輯功能即可實(shí)現(xiàn)相應(yīng)的效果,下面小編給大家分享實(shí)例代碼感興趣的朋友跟隨小編一起看看吧
2024-04-04
Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
Vue面試題及Vue知識(shí)點(diǎn)整理
這篇文章主要介紹了Vue面試題及Vue知識(shí)點(diǎn)整理，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-10-10
vue.js 初體驗(yàn)之Chrome 插件開發(fā)實(shí)錄
這篇文章主要介紹了vue.js 初體驗(yàn)之Chrome 插件開發(fā)實(shí)錄 ,需要的朋友可以參考下
2017-05-05