vue element框架動態修改夜間模式

zmxcode發表於2021-02-07
Vue框架模式

主要步驟：

  • 生成夜間模式的element主題
  • 動態更換element主題
  • 側邊欄動態修改
  • 按鈕觸發動態修改

生成夜間模式的element主題

文件地址

需要注意的點：1.除去專案內安裝的包之外，gulp還需要全域性安裝 2.gulpfile.js檔案中的customThemeName可修改樣式的類名

動態更換element主題

切換對應深色主題

toggleClass(document.body, 'theme-dark')

/**
 * @param {HTMLElement} element
 * @param {string} className
 */

export function toggleClass(element, className) {
  if (!element || !className) {
    return
  }
  let classString = element.className
  const nameIndex = classString.indexOf(className)
  if (nameIndex === -1) {
    classString += '' + className
  } else {
    classString =
      classString.substr(0, nameIndex) +
      classString.substr(nameIndex + className.length)
  }
  element.className = classString
}

側邊欄樣式修改

思路 定義兩套scss變數動態根據主題動態修改

scss檔案

<!--動態定義-->
@mixin body_color($color){ //@mixin 後面的函式名稱為自定義。
  background-color: $color;   //背景色預設為引數
  [data-theme="dark"] & {    //如果data-theme的值為dark，background-color就使用$bodyBgDark
    background-color: $bodyBgDark;   
  }
}

<!--引用並傳入預設值-->
#app {
  @include body_color($bodyBg);
}

js檔案

<!--給element設定data-theme屬性，scss檔案中就可以接收到對應屬性的值-->
window.document.documentElement.setAttribute('data-theme', 'dark')

按鈕觸發動態修改

點選按鈕的事件將主題名稱儲存至倉庫，並根據情況觸發toggleClass和setAttribute的方法實現夜間模式

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章