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文件中，添加對(duì).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)換膚功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解
這篇文章主要為大家介紹了Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue3之聲明式和編程式導(dǎo)航詳解
這篇文章主要介紹了vue3之聲明式和編程式導(dǎo)航,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue3?錨點(diǎn)定位的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue3?多種方法的錨點(diǎn)定位，使用?Vue?Router?導(dǎo)航守衛(wèi)可以簡(jiǎn)化導(dǎo)航邏輯、統(tǒng)一管理導(dǎo)航邏輯和進(jìn)行權(quán)限控制，但需要學(xué)習(xí)和理解相關(guān)概念，并且需要手動(dòng)編寫和管理導(dǎo)航守衛(wèi)的邏輯,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-07-07
element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式
這篇文章主要介紹了element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue項(xiàng)目中的public、static及指定不編譯文件問題
這篇文章主要介紹了vue項(xiàng)目中的public、static及指定不編譯文件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue數(shù)據(jù)更新UI不刷新顯示的解決辦法
這篇文章主要介紹了vue數(shù)據(jù)更新UI不刷新顯示的解決辦法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue?表格單選按鈕的實(shí)現(xiàn)方式
這篇文章主要介紹了vue?表格單選按鈕的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue 監(jiān)聽屏幕高度的實(shí)例
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法
這篇文章主要介紹了vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
本系列文章介紹一個(gè)簡(jiǎn)單的實(shí)時(shí)定位示例，基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2021-09-09