ElementUI主题颜色动态切换并缓存

这篇具有很好参考价值的文章主要介绍了ElementUI主题颜色动态切换并缓存。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天给大家分享一下在Vue中使用ElementUI时,想切换主题颜色的两种方式。

第一种:静态改变项目中的主题颜色

比较简单,稍微带过:
项目中创建element-variables.scss文件,编写内容:

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

之后,在项目的入口文件中,直接引入以上样式文件即可(无需引入 Element 编译好的 CSS 文件)文章来源地址https://www.toymoban.com/news/detail-632245.html

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'

Vue.use(Element)

第二种:重点!!!动态切换主题颜色并做缓存

  1. 创建theme.js文件,作为工具类,并写入以下内容:
const __DEFUALT__COLOR = "#409EFF"
const version = require('element-ui/package.json').version

class Theme {
  constructor() {
    const color = this._getLocalTheme() || __DEFUALT__COLOR;
    const oldVal = this._getLocalTheme() || __DEFUALT__COLOR;
    this.changeTheme(color, oldVal);
    this.chalk = ''
  }
  async changeTheme($color, oldVal) {
    const themeCluster = this._getThemeCluster($color.replace('#', ''))
    const originalCluster = this._getThemeCluster(oldVal.replace('#', ''))
    const getHandler = (id) => {
      return () => {
        const originalCluster = this._getThemeCluster(__DEFUALT__COLOR.replace('#', ''))
        const newStyle = this._updateStyle(this.chalk, originalCluster, themeCluster)

        let styleTag = document.getElementById(id)
        if (!styleTag) {
          styleTag = document.createElement('style')
          styleTag.setAttribute('id', id)
          document.head.appendChild(styleTag)
        }
        styleTag.innerText = newStyle
      }
    }
    if (!this.chalk) {
      const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
      await this._getCSSString(url, 'chalk')
    }
    const chalkHandler = getHandler('chalk-style')
    chalkHandler()
    const styles = [].slice.call(document.querySelectorAll('style'))
      .filter(style => {
        const text = style.innerText
        return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
      })
    styles.forEach(style => {
      const { innerText } = style
      if (typeof innerText !== 'string') return
      style.innerText = this._updateStyle(innerText, originalCluster, themeCluster)
    })
    this._setLocalTheme("--primary-color", $color)
  }
  _getLocalTheme(key = "--primary-color") {
    return key && localStorage.getItem(key);
  }
  _setLocalTheme(key, value) {
    localStorage[key] = value;
  }
  _getThemeCluster(theme) {
    const tintColor = (color, tint) => {
      let red = parseInt(color.slice(0, 2), 16)
      let green = parseInt(color.slice(2, 4), 16)
      let blue = parseInt(color.slice(4, 6), 16)

      if (tint === 0) { // when primary color is in its rgb space
        return [red, green, blue].join(',')
      } else {
        red += Math.round(tint * (255 - red))
        green += Math.round(tint * (255 - green))
        blue += Math.round(tint * (255 - blue))

        red = red.toString(16)
        green = green.toString(16)
        blue = blue.toString(16)

        return `#${red}${green}${blue}`
      }
    }

    const shadeColor = (color, shade) => {
      let red = parseInt(color.slice(0, 2), 16)
      let green = parseInt(color.slice(2, 4), 16)
      let blue = parseInt(color.slice(4, 6), 16)

      red = Math.round((1 - shade) * red)
      green = Math.round((1 - shade) * green)
      blue = Math.round((1 - shade) * blue)

      red = red.toString(16)
      green = green.toString(16)
      blue = blue.toString(16)

      return `#${red}${green}${blue}`
    }

    const clusters = [theme]
    for (let i = 0; i <= 9; i++) {
      clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
    }
    clusters.push(shadeColor(theme, 0.1))
    return clusters
  }
  _updateStyle(style, oldCluster, newCluster) {
    let newStyle = style
    oldCluster.forEach((color, index) => {
      newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
    })
    return newStyle
  }
  _getCSSString(url) {
    return new Promise(resolve => {
      const xhr = new XMLHttpRequest()
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          this.chalk = xhr.responseText.replace(/@font-face{[^}]+}/, '')
          resolve()
        }
      }
      xhr.open('GET', url)
      xhr.send()
    })
  }
}

export default Theme

  1. 然后在项目入口main.js中引入即可
import Vue from 'vue'
import Theme from "./utils/theme
Vue.prototype.$theme = new Theme()
  1. 在ThemePicker中使用
<template>
  <el-color-picker
    v-model="theme"
    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
  />
</template>

<script>

export default {
  data() {
    return {
      theme: ''
    }
  },
  computed: {
    defaultTheme() {
      return this.$store.state.settings.theme
    }
  },
  watch: {
    defaultTheme: {
      handler: function(val, oldVal) {
        this.theme = val
      },
      immediate: true
    },
    theme(val, oldVal) {
      this.$theme.changeTheme(val, oldVal)
      this.$store.dispatch('settings/changeSetting', {
        key: 'theme',
        value: val
      })
    }
  }
}
</script>

<style>
.theme-message,
.theme-picker-dropdown {
  z-index: 99999 !important;
}

.theme-picker .el-color-picker__trigger {
  height: 26px !important;
  width: 26px !important;
  padding: 2px;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}
</style>

到了这里,关于ElementUI主题颜色动态切换并缓存的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ElementUI Table 翻页缓存数据

    Element UI Table 翻页保存之前的数据,网上找了一些,大部分都是用**:row-key** 和 reserve-selection ,但是我觉得有bug,我明明翻页了…但是全选的的个框还是勾着的(可能是使用方法不对,要是有好使的…请cute我一下…感谢) 所以自己写了一个… 手动勾选的时候,将数据保存 查看文档,发现

    2024年02月11日
    浏览(28)
  • uniapp切换主题颜色(后台管理系统)

    需求:在现有已经做好的后台管理系统添加一个切换主题颜色的功能 分析:该项目用了很多uniapp的组件,css样式没有统一,类名也没有统一 使用混合mixin.scss,并使用vuex 效果图 功能:按钮背景颜色、部分样式、字体图标、分页跟随主题颜色变化也变化 每一个用户喜欢的主题

    2024年02月10日
    浏览(45)
  • elementui中table表格单元格背景、文字颜色修改(包含鼠标移入移出)

    一、改变背景颜色 1、在el-table表头中添加属性::cell-style=“addClass” (设置表头背景颜色:header-cell-style=“{ background: ‘#999999’, color: ‘#000’ }”) 2、data模拟假数据: 3、在methods中: 二、鼠标移入改变背景、文字颜色 1、在el-table表头中添加属性:@cell-mouse-enter=“cellMouseEn

    2024年02月03日
    浏览(71)
  • Vue结合ElementUi修改<el-table>表格的背景颜色和表头样式

    修改table的表头背景 和 字体颜色: 以下是修改el-table表格内容的背景色和边框样式:

    2024年02月11日
    浏览(63)
  • vue+elementUI 分页切换时保存勾选框为选中状态

    1、el-table指定 row-key 属性为row.id 确保唯一性 2、el-table-column设置 reserve-selection 属性为true 会在数据更新之后保留之前选中的数据( reserve-selection   仅对 type=selection 的列有效 )

    2024年01月19日
    浏览(46)
  • ElementUI动态添加表单项

    昨天感冒发烧了,脑子不好使。在实现这个动态表单项时一直报错脑瓜子嗡嗡的! 不过好在昨天休息好了,今天起来趁脑瓜子好使,一会就弄好了。 这里记录一下 其实就是利用了vue的v-for循环渲染。通过添加数组实现动态添加表单项 

    2024年02月13日
    浏览(31)
  • Vue项目如何配置、切换主题颜色(mixin + scss方式,简单高效)

    但图多 基本样式: 红色主题: 蓝色主题: 看到这里,是不是有人已经开始安耐不住了 ?😏 一. 首先,引入scss依赖(node-sass, sass-loader) 二.项目样式文件目录介绍 1.此处我将项目中的公共样式文件放到了 src/style目录下,其中 index.scss是以供全局使用的一些基本样式,在main

    2024年02月04日
    浏览(43)
  • elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px

    被压缩的图表: 正常显示 1.需求:点击tab切换echarts 2.所用技术:引的vue.js elementUI 切换用的是elementUI中的Tabs标签页 3.遇到了几个问题: 1》报错:[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute’ of null” 2》点击切换 tabs,导致echarts宽挤到一起,只有100px 3》点

    2024年02月04日
    浏览(46)
  • ElementUI之动态树+数据表格+分页->动态树,动态表格

    动态树 动态表格 1.动态树 2.动态表格  

    2024年02月07日
    浏览(53)
  • elementUI表单验证之动态表单验证

    elementUI 中 Form 组件提供了表单验证的功能,只需要通过  rules  属性传入约定的验证规则,并将 Form-Item 的  prop  属性设置为需校验的字段名即可。 (1)常用表单验证 (2)自定义验证规则(:validator)  有些需要自定义的校验规则可以作为变量写在data中,然后赋值

    2024年02月11日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包