vue+element で動的スキニングを実装するためのサンプルコード

<テンプレート>
  <el-カラーピッカー
    クラス="テーマピッカー"
    ポッパークラス="テーマピッカードロップダウン"
    v-model="テーマ"
    :predefine="事前定義色"
  </el-カラーピッカー>
</テンプレート>
 
<スクリプト>
const version = require("element-ui/package.json").version; // node_modules からの element-ui バージョン
const ORIGINAL_THEME = "#409EFF"; // デフォルトの色
エクスポートデフォルト{
  名前: "ThemePicker",
  小道具: {
    デフォルト： {
      // 外部から渡されるトピックを初期化します。タイプ: String
      // デフォルト: '#2668b1'
      // デフォルト: `${localStorage.getItem("tremePackers")==null?"#C60404":localStorage.getItem("tremePackers")}`
    }
    // size: { // 外部から渡されるトピックを初期化します // type: String,
    // デフォルト: 'small'
    // },
  },
  データ（） {
    戻る {
      chalk: "", // theme-chalk css の内容
      テーマ: ORIGINAL_THEME、
      showSuccess: true, // スキンの変更成功メッセージをポップアップするかどうか predefineColors: [
        "#2668b1",
        "#52b493",
        "#429798",
        "#32789c",
        "#1944a5",
        "#5944bc",
        "#995dcd",
        "#ce7e5b",
        "#ee8b9b",
        「#283551」
      ]
    };
  },
  マウント() {
    this.theme = this.defaultTheme;
    // this.$emit('onThemeChange', this.theme)
    this.showSuccess = true;
  },
  計算: {
    デフォルトテーマ() {
      this.$store.state.theme を返します。
    }
  },
  時計：
    非同期テーマ(val, oldVal) {
          if (typeof val !== "string") return;
          テーマ クラスターを this.getThemeCluster(val.replace("#", ""));
          const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
          const getHandler = (変数、ID) => {
            戻り値 () => {
              const オリジナルクラスタ = this.getThemeCluster(
                ORIGINAL_THEME.replace("#", "")
              );
              定数newStyle = this.updateStyle(
                this[変数]、
                オリジナルクラスター、
                テーマクラスター
              );
 
              styleTag = document.getElementById(id); とします。
              if (!styleTag) {
                styleTag = document.createElement("style");
                styleTag.setAttribute("id", id);
                // document.head.appendChild(スタイルタグ)
                書類
                  .getElementsByTagName("スタイル")[0]
                  .insertBefore(スタイルタグ、null);
              }
              styleTag.innerText = 新しいスタイル;
            };
          };
 
          const chalkHandler = getHandler("chalk", "chalk-style");
 
          もし (!this.chalk) {
            const url = `../../assets/style/theme/index.css`; // ローカル CSS スタイル アドレス // const url = `./dist/index.css`; // プロジェクト パッケージ化後の CSS アドレス (元のファイルは public フォルダーに配置されます)
            // const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`; // 会社のイントラネットの場合、この URL は適用されません this.getCSSString(url, chalkHandler, "chalk");
 
          } それ以外 {
            チャコールハンドラ();
          }
 
          定数スタイル = [].slice
            .call(document.querySelectorAll("スタイル"))
            .filter(スタイル => {
              定数テキスト = style.innerText;
              戻る （
                新しい正規表現(oldVal, "i").test(テキスト) &&
                !/Chalk 変数/.test(テキスト)
              );
            });
          スタイル.forEach(スタイル => {
            const { innerText } = スタイル;
            if (typeof innerText !== "string") return;
            style.innerText = this.updateStyle(
              内部テキスト、
              オリジナルクラスター、
              テーマクラスター
            );
          });
          this.$store.commit("themColor", val);//変更した色をストアに保存します
          this.$emit("onThemeChange", val);
 
        // 外部操作に応答する // localStorage に保存する
        // localStorage.setItem('tremePackers',val);
        // if(this.showSuccess) {
        // this.$message({
        // メッセージ: 'スキンの変更に成功しました',
        // タイプ: '成功'
        // })
        // } それ以外 {
        // this.showSuccess = true
        // }
      
    }
  },
  メソッド: {
    スタイルを更新(スタイル、古いクラスタ、新しいクラスタ) {
      newStyle = style; とします。
      oldCluster.forEach((色, インデックス) => {
        newStyle = newStyle.replace(新しい正規表現(色、"ig")、新しいクラスター[インデックス]);
      });
      新しいスタイルを返します。
    },
    
    getCSSString(url, コールバック, 変数) {
      const xhr = 新しい XMLHttpRequest();
      xhr.onreadystatechange = () => {
        xhr.readyState === 4 && xhr.status === 200 の場合 {
          this[変数] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
          折り返し電話（）;
        }
      };
      xhr.open("GET", url);
      xhr.send();
    },
 
    getThemeCluster(テーマ) {
      const tintColor = (色, 色合い) => {
        red = parseInt(color.slice(0, 2), 16) とします。
        緑をparseInt(color.slice(2, 4), 16)とします。
        blue = parseInt(color.slice(4, 6), 16) とします。
 
        （色合い === 0）の場合{
          // 原色が RGB 空間にある場合
          [赤、緑、青].join(","); を返します。
        } それ以外 {
          red += Math.round(tint * (255 - red));
          緑 += Math.round(tint * (255 - 緑));
          blue += Math.round(tint * (255 - blue));
 
          赤 = red.toString(16);
          緑 = green.toString(16);
          青 = blue.toString(16);
 
          `#${red}${green}${blue}` を返します。
        }
      };
 
      const shadeColor = (色、シェード) => {
        red = parseInt(color.slice(0, 2), 16) とします。
        緑をparseInt(color.slice(2, 4), 16)とします。
        blue = parseInt(color.slice(4, 6), 16) とします。
 
        red = Math.round((1 - shade) * red);
        緑 = Math.round((1 - shade) * 緑);
        blue = Math.round((1 - shade) * blue);
 
        赤 = red.toString(16);
        緑 = green.toString(16);
        青 = blue.toString(16);
 
        `#${red}${green}${blue}` を返します。
      };
 
      const クラスター = [テーマ];
      (i = 0; i <= 9; i++ とします) {
        clusters.push(tintColor(テーマ、Number((i / 10).toFixed(2))));
      }
      clusters.push(shadeColor(テーマ、0.1));
      クラスターを返します。
    }
  }
};
</スクリプト>
 
<スタイル>
.theme-picker .el-color-picker__trigger {
  垂直位置合わせ: 中央;
}
 
.theme-picker-dropdown .el-color-dropdown__link-btn {
  表示: なし;
}
.el-color-picker--小さい .el-color-picker__trigger {
  境界線: なし;
}
</スタイル>