基于Vue2.0和Typescript怎么實(shí)現(xiàn)多主題切換

這篇“基于Vue2.0和Typescript怎么實(shí)現(xiàn)多主題切換”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“基于Vue2.0和Typescript怎么實(shí)現(xiàn)多主題切換”文章吧。

第一步： 需要?jiǎng)?chuàng)建一個(gè)colorConfig.ts文件，用于配置主題信息 （我創(chuàng)建的目錄是src/config/colorConfig.ts）

colorConfig.ts文件的主要定義的內(nèi)容

 /**
 * 全局顏色配置項(xiàng)，換膚配置
 * 主題名稱theme1以及對(duì)應(yīng)的顏色名稱color1后面根據(jù)實(shí)際主題名和顏色名進(jìn)行修改
 * 主題名稱和顏色名稱可以實(shí)際情況定義
 */

const COLOR_MAP = {
   // 第一套主題顏色
  theme1: {
    color1: '#FFCDD2', // 主要背景
    color2: '#E1BEE7', // 文字顏色
    color3: '#70767f', // 按鈕顏色（灰色）
    color4: '#EF9A9A',
    color5: '#F06292', //彈框背景灰色
    color6: '#7986CB', //主要內(nèi)容區(qū)域背景
    color7: '#64B5F6', //選中狀態(tài)
  },
  // 第二套主題顏色
  theme2: {
    color1: '#FF7043', // 主要背景
    color2: '#4E342E', // 文字顏色
    color3: '#263238', // 按鈕顏色（灰色）
    color4: '#FF6E40',
    color5: '#DD2C00', //彈框背景灰色
    color6: '#616161', //主要內(nèi)容區(qū)域背景
    color7: '#212121', //選中狀態(tài)
  },
  // 第三套主題顏色
  theme3: {
    color1: '#E65100', // 主要背景
    color2: '#FF6D00', // 文字顏色
    color3: '#1B5E20', // 按鈕顏色（灰色）
    color4: '#827717',
    color5: '#00C853', //彈框背景灰色
    color6: '#0091EA', //主要內(nèi)容區(qū)域背景
    color7: '#00BFA5', //選中狀態(tài)
  }
}

/**
 * 類型定義
 * 定義COLOR_MAP中的主題類型，及每個(gè)主題中顏色值的類型
 */
export type THEME_TYPE = keyof (typeof COLOR_MAP)
type THEME_ITEM = keyof (typeof COLOR_MAP['theme1'])


/**
 * 主題切換
 * @param theme 主題，默認(rèn)使用主題一
 */
export function changeTheme (theme: THEME_TYPE = 'theme1'): void {
  const themeList = Object.keys(COLOR_MAP[theme]) as THEME_ITEM[]
  themeList.forEach((v: THEME_ITEM) => {
    document.body.style.setProperty(`--${v}`, COLOR_MAP[theme][v])
  })
}

第二步,根據(jù)接口獲取當(dāng)前主題信息，并進(jìn)行切換設(shè)置

 // 在App.vue中引入主題模塊
 import { changeTheme } from '@/config/colorConfig'
 
 // 在created讀取緩存信息
 created () {
   const theme = localStorage.getItem('theme') || 'theme1'
   // 將主題獲取到的主題存到vuex中，記錄當(dāng)前的主題信息，默認(rèn)主題一 theme1
   store.commit('common/setTheme', theme)
   changeTheme(theme)
   
   
   // 如果主題信息存儲(chǔ)在后端，此時(shí)需要獲取主題信息 (不建議使用）
   getThemeInfo()
 }
 
 /**
 * 主題信息也可以存儲(chǔ)在后端，定義獲取后臺(tái)存儲(chǔ)的主題信息的方法（不過不建議后端存主題信息，直接  localstorage就夠了，還能防止主題閃屏問題）
 */
  async getThemeInfo() {
      // 入?yún)?
      const requestData = {
        method: 'xxxx',
        params: { method: 'xxx' }
      }
      const response = await this.$axios({
        method: 'POST',
        url: `${this.$baseUrl}/xxxx/xxxx/`,
        data: requestData
      }).catch(() => {
        // 接口響應(yīng)失敗默認(rèn)主題一
        store.commit('common/setTheme', 'theme1')
        changeTheme('theme1')  
      })
      let { code, data } = response?.data || {}
      // 根據(jù)code碼獲取接口響應(yīng)狀態(tài)
      if (code === '0000') {
        const theme = data?.theme
        // 將主題獲取到的主題存到vuex中，記錄當(dāng)前的主題信息，默認(rèn)主題一 theme1
        store.commit('common/setTheme', theme ? theme : 'theme1')
        changeTheme(theme ? theme : 'theme1')
      } else {
        // 接口響應(yīng)失敗默認(rèn)主題一
        store.commit('common/setTheme', 'theme1')
        changeTheme('theme1')
      }
    
}

第三步，切換主題時(shí)，更新緩存

  import { changeTheme, THEME_TYPE } from '@/config/colorConfig'
  
  // 主題切換
  themeChange(themeVal): void {
    changeTheme(themeVal as THEME_TYPE)
    store.commit('common/setTheme', themeVal)
    // 存儲(chǔ)到緩存中
    localStorage.setItem('theme', themeVal)
    
    // 也可以通過接口調(diào)用將themeVal，保存到后端
  }

第四步， 頁面上使用css變量來動(dòng)態(tài)展示顏色值

  /*例如var(--color1)*/
  #app {
      width: 100%;
      height: 100%;
      background-color: var(--color1);
      box-sizing: border-box;
      color: var(--color2);
      font-size: 1rem;
   }

效果圖如下圖所示

以上就是關(guān)于“基于Vue2.0和Typescript怎么實(shí)現(xiàn)多主題切換”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。