Beispielcode zur Implementierung von dynamischem Skinning mit vue+element

<Vorlage>
  <el-Farbwähler
    Klasse = "Themenauswahl"
    Popper-Klasse = "Themenauswahl-Dropdown"
    v-Modell="Thema"
    :predefine="Farben vordefinieren"
  ></el-Farbauswahl>
</Vorlage>
 
<Skript>
const version = require("element-ui/package.json").version; // element-ui-Version von node_modules
const ORIGINAL_THEME = "#409EFF"; // Standardfarbe
Standard exportieren {
  Name: "ThemePicker",
  Requisiten: {
    Standard: {
      // Initialisiere das Thema, das von außen übergeben werden kann. Typ: String
      // Standard: '#2668b1'
      // Standard: `${localStorage.getItem("tremePackers")==null?"#C60404":localStorage.getItem("tremePackers")}`
    }
    // size: { // Initialisiere das Thema, das von außen übergeben werden kann // type: String,
    // Standard: „klein“
    // },
  },
  Daten() {
    zurückkehren {
      Kreide: "", // Inhalt des Theme-Kreide-CSS
      Thema: ORIGINAL_THEME,
      showSuccess: true, // Ob die Meldung über den erfolgreichen Skin-Wechsel angezeigt werden soll predefineColors: [
        „#2668b1“,
        "#52b493",
        "#429798",
        "#32789c",
        "#1944a5",
        "#5944bc",
        "#995dcd",
        "#ce7e5b",
        "#ee8b9b",
        "#283551"
      ]
    };
  },
  montiert() {
    dieses.Thema = dieses.Standardthema;
    // dies.$emit('onThemeChange', dieses.thema)
    Dies.showSuccess = true;
  },
  berechnet: {
    Standardthema() {
      gib dies zurück.$store.state.theme;
    }
  },
  betrachten:
    asynchrones Thema(Wert, alterWert) {
          wenn (Typ von Wert !== "Zeichenfolge") zurückgeben;
          const themeCluster = this.getThemeCluster(val.replace("#", ""));
          const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
          const getHandler = (Variable, ID) => {
            zurückgeben () => {
              const originalCluster = this.getThemeCluster(
                ORIGINAL_THEME.replace("#", "")
              );
              const neuerStyle = this.updateStyle(
                diese[Variable],
                ursprünglicher Cluster,
                ThemenCluster
              );
 
              Geben Sie styleTag = document.getElementById(id) ein.
              wenn (!styleTag) {
                styleTag = document.createElement("Stil");
                styleTag.setAttribute("id", id);
                // Dokument.head.appendChild(styleTag)
                dokumentieren
                  .getElementsByTagName("Stil")[0]
                  .insertBefore(styleTag, null);
              }
              styleTag.innerText = neuerStil;
            };
          };
 
          const chalkHandler = getHandler("Kreide", "Kreide-Stil");
 
          wenn (!diese.Kreide) {
            const url = `../../assets/style/theme/index.css`; //Lokale CSS-Style-Adresse // const url = `./dist/index.css`; //CSS-Adresse nach Projektpaketierung (die Originaldatei wird im öffentlichen Ordner abgelegt)
            // const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`; //Wenn es sich um ein Firmenintranet handelt, ist diese URL nicht anwendbar this.getCSSString(url, chalkHandler, "chalk");
 
          } anders {
            KreideHandler();
          }
 
          const Stile = [].slice
            .call(document.querySelectorAll("Stil"))
            .filter(style => {
              const text = style.innerText;
              zurückkehren (
                neuer RegExp(alterWert, "i").test(Text) &&
                !/Kreidevariablen/.test(Text)
              );
            });
          Stile.fürJeden(Stil => {
            const { innerText } = Stil;
            wenn (Typ des inneren Textes !== "Zeichenfolge") zurückgeben;
            Stil.innerText = dieser.updateStyle(
              innererText,
              ursprünglicher Cluster,
              ThemenCluster
            );
          });
          this.$store.commit("themColor", val);//Speichere die geänderte Farbe im Store
          dies.$emit("onThemeChange", val);
 
        // Auf externe Operationen reagieren // Im localStorage speichern
        // localStorage.setItem('tremePackers',val);
        // wenn(diese.showSuccess) {
        // diese.$nachricht({
        // Meldung: ‚Skin-Änderung erfolgreich‘,
        // Typ: "Erfolg"
        // })
        // } anders {
        // dies.showSuccess = true
        // }
      
    }
  },
  Methoden: {
    updateStyle(Stil, alterCluster, neuerCluster) {
      lassen Sie newStyle = Stil;
      oldCluster.forEach((Farbe, Index) => {
        neuerStil = neuerStil.replace(neuer RegExp(Farbe, "ig"), neuerCluster[Index]);
      });
      gib neuen Stil zurück;
    },
    
    getCSSString(url, Rückruf, Variable) {
      const xhr = neue XMLHttpRequest();
      xhr.onreadystatechange = () => {
        wenn (xhr.readyState === 4 && xhr.status === 200) {
          dies[Variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
          Rückruf();
        }
      };
      xhr.open("GET", URL);
      xhr.senden();
    },
 
    getThemeCluster(Thema) {
      const tintColor = (Farbe, Farbton) => {
        lass rot = parseInt(color.slice(0, 2), 16);
        lass grün = parseInt(color.slice(2, 4), 16);
        lass blau = parseInt(color.slice(4, 6), 16);
 
        wenn (Farbton === 0) {
          // wenn die Primärfarbe in ihrem RGB-Raum liegt
          return [rot, grün, blau].join(",");
        } anders {
          rot += Math.round(Farbton * (255 - rot));
          grün += Math.round(Farbton * (255 - grün));
          blau += Math.round(Farbton * (255 - blau));
 
          rot = rot.toString(16);
          grün = grün.toString(16);
          blau = blau.toString(16);
 
          gibt `#${rot}${grün}${blau}` zurück;
        }
      };
 
      const shadeColor = (Farbe, Farbton) => {
        lass rot = parseInt(color.slice(0, 2), 16);
        lass grün = parseInt(color.slice(2, 4), 16);
        lass blau = parseInt(color.slice(4, 6), 16);
 
        rot = Math.round((1 - Farbton) * rot);
        grün = Math.round((1 - Farbton) * grün);
        blau = Math.round((1 - Farbton) * blau);
 
        rot = rot.toString(16);
        grün = grün.toString(16);
        blau = blau.toString(16);
 
        gibt `#${rot}${grün}${blau}` zurück;
      };
 
      const clusters = [Thema];
      für (lass i = 0; i <= 9; i++) {
        clusters.push(FarbtonFarbe(Thema, Nummer((i / 10).toFixed(2))));
      }
      clusters.push(Schattenfarbe(Design, 0,1));
      Rücklaufcluster;
    }
  }
};
</Skript>
 
<Stil>
.theme-picker .el-color-picker__trigger {
  vertikale Ausrichtung: Mitte;
}
 
.theme-picker-dropdown .el-color-dropdown__link-btn {
  Anzeige: keine;
}
.el-color-picker--klein .el-color-picker__trigger {
  Rand: keiner;
}
</Stil>