vue-element-admin 官方实现动态换肤的功能两部完成主题切换

最新推荐文章于 2025-04-01 10:00:00 发布

·G|(

最新推荐文章于 2025-04-01 10:00:00 发布

阅读量639

点赞数 1

文章标签： vue.js 前端 vue elementui

本文链接：https://blog.youkuaiyun.com/2202_75663419/article/details/137152060

版权

1.新建一个名为 ThemePicker 的组件

<template>
  <el-color-picker
    class="theme-picker"
    popper-class="theme-picker-dropdown"
    :predefine="[
      '#256DCB',
      '#409EFF',
      '#1890ff',
      '#304156',
      '#212121',
      '#11a983',
      '#13c2c2',
      '#6959CD',
      '#f5222d',
      '#F80',
    ]"
    v-model="theme"
  ></el-color-picker>
</template>

<script>
const version = require("element-ui/package.json").version; // element-ui version from node_modules
const ORIGINAL_THEME = "#409EFF"; // default color

export default {
  mounted() {
    this.applyTheme();
  },
  data() {
    return {
      chalk: "", // content of theme-chalk css
      theme: localStorage.getItem("theme") || ORIGINAL_THEME,
    };
  },
  watch: {
    theme(val, oldVal) {
      if (typeof val !== "string") return;
      localStorage.setItem("theme", val);
      const themeCluster = this.getThemeCluster(val.replace("#", ""));
      const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
      console.log(