溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析

發(fā)布時(shí)間：2020-08-25 19:44:26 來源：腳本之家 閱讀：179 作者：ican 欄目：web開發(fā)

需求：網(wǎng)站換膚，主題切換。網(wǎng)站的主題色可以在幾種常用顏色之間進(jìn)行切換，還有相關(guān)圖片、圖標(biāo)也要跟隨主題進(jìn)行切換。

不多說，先看下最終的實(shí)現(xiàn)效果：

Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析 

文章由兩部分組成：css切換，圖片圖標(biāo)切換

css切換

1.在 static 目錄下新建一個(gè) styles 文件夾，在 styles 下新建一個(gè) theme.scss 文件（項(xiàng)目使用了sass，會自動(dòng)編譯成css文件，如果沒有使用這些預(yù)處理工具可以直接新建 theme.css），將需要替換的 CSS 聲明在此文件中。

.theme-test-btn {
  background-color: #409eff;
  border-color: #409eff;
}

.theme-test-btn:hover,
.theme-test-btn:focus {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

2.在 src/assets/js/const/ 目錄下新建 theme-colors.js，用于聲明所有可選的主題，每種顏色都對應(yīng)一個(gè)關(guān)鍵詞，方便區(qū)分

const colors = [
  {
    themeId: 0,
    primaryBtn: '#409eff', // 主要按鈕的背景色
    priBtnHover: '#66b1ff', // 主要按鈕的懸浮、聚焦背景色
  },
  {
    themeId: 1,
    primaryBtn: '#67c23a',
    priBtnHover: '#85ce61',
  },
  {
    themeId: 2,
    primaryBtn: '#e6a23c',
    priBtnHover: '#ebb563',
  },
];

export default colors;

3.通過 ajax 獲取 theme.css ，將顏色值替換為關(guān)鍵詞。

data() {
  return {
    active: 0,
    themeStyleStr: '', // 存放 替換成關(guān)鍵詞的 theme.css 內(nèi)容
    colors: themeColors, // 所有可選的主題顏色數(shù)組。即：theme-colors.js 文件export的數(shù)組
  };
},
mounted() {
  // 通過 ajax 獲取 theme.css 的內(nèi)容，并將顏色值替換為關(guān)鍵詞
  this.$http.getThemeFile().then(res => {
    this.themeStyleStr = this.getStyleTemplate(res);
  });
},
methods: {
  // 獲取樣式模板：將顏色值替換為關(guān)鍵詞。
  getStyleTemplate(data) {
    let color = this.colors[0];
    delete color.themeId;
    let colorMap = {};
    Object.keys(color).forEach(key => {
      colorMap[color[key]] = key;
    });
    Object.keys(colorMap).forEach(key => {
      data = data.replace(new RegExp(key, 'ig'), colorMap[key]);
    });
    return data;
  },
}
this.$http.getThemeFile 方法

// 使用原生ajax獲取換膚的樣式文件
getThemeFile() {
  return new Promise(resolve => {
    const url = location.origin + '/static/styles/theme.css';
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      }
    };
    xhr.open('GET', url);
    xhr.send();
  });
}

4.把關(guān)鍵詞再換回剛剛生成的相應(yīng)的顏色值，并在頁面上添加 style 標(biāo)簽

methods: {
  // 點(diǎn)擊切換主題
  changeTheme(index) {
    this.active = index;
    this.setNewStyle(this.themeStyleStr, this.colors[index]);
  },
  // 根據(jù)選擇的主題顏色，把關(guān)鍵詞換成相應(yīng)的主題顏色，并在頁面上添加 style 標(biāo)簽
  setNewStyle(originalStyle, colors) {
    let oldEl = document.getElementById('theme-style');
    let cssText = originalStyle;
    Object.keys(colors).forEach(key => {
      cssText = cssText.replace(new RegExp(key, 'ig'), colors[key]);
    });
    const style = document.createElement('style');
    style.innerHTML = cssText;
    style.id = 'theme-style';
    oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style);
  }
}

圖片圖標(biāo)切換

1.圖片切換和圖標(biāo)切換是同樣的原理。在之前新建好的 theme.scss 文件追加圖標(biāo)引入的樣式。

.theme-test-icon {
  background: url("/static/images/common/list-modify-icon.svg");
}

2.在之前新建好的 theme-colors.js 文件追加圖標(biāo)路徑

/*圖片統(tǒng)一使用一個(gè)路徑，更換主題時(shí)需要在images文件夾下新建主題文件夾，與原始路徑對應(yīng)，圖片文件名須一致
應(yīng)避免 primaryBtn 與 primaryBtnHover 同時(shí)出現(xiàn)，因?yàn)檎齽t匹配 primaryBtn 會把 primaryBtnHover 部分匹配出來，達(dá)不到效果*/

const colors = [
  {
    themeId: 0,
    primaryBtn: '#409eff', // 主要按鈕的背景色
    priBtnHover: '#66b1ff', // 主要按鈕的懸浮、聚焦背景色
    imagePath: '/static/images', // 圖片絕對路徑
  },
  {
    themeId: 1,
    primaryBtn: '#67c23a',
    priBtnHover: '#85ce61',
    imagePath: '/static/images/theme1',
  },
  {
    themeId: 2,
    primaryBtn: '#e6a23c',
    priBtnHover: '#ebb563',
    imagePath: '/static/images/theme2',
  },
];
export default colors;

3.引入需要主題切換的圖片/圖標(biāo)，存放于 /static/images/ 之下，每個(gè)額外的主題圖片需要一個(gè)文件夾進(jìn)行存放，例如 /theme1 或者 /theme2。

注意：各個(gè)主題的圖片文件名要保持不變；圖片路徑是根據(jù) theme.scss 里面引入圖片樣式的路徑來決定的，可以根據(jù)項(xiàng)目實(shí)際情況進(jìn)行調(diào)整。

 Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析

總結(jié)

以上所述是小編給大家介紹的Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手