vue+element-ui实现主题切换功能

element-ui提供了自定义主题 自定义主题

一、安装

• npm i element-theme -g
• npm i element-theme-chalk -D
• npm i https://github.com/ElementUI/theme-chalk -D
• 官网说明安装完成后需要et -i并会有element-variables.scss文件,但是我文件中并未找到 node_modules/.bin/et,所以手动生成了

下图element-variables.scss是自己写的，因为安装完成后并未生成此文件

文件中让内容如下`/* 改变主题色变量 */

 ```
 /* 改变主题色变量,设置完成后会有按钮字体等组件会变化 */
 $--color-primary: #d85f6a;  
 
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 @import "~element-ui/packages/theme-chalk/src/index";
 ```

页面文件：index.vue

     
       红色主题
          蓝色主题
      
	
	文件引入：
	import ColorPicker from "@/layout/colorpicker/index";  
	使用：
    
	方法：
    changeClick(value){
      this.colorVal = value
      localStorage.setItem('skin',value)
      this.$store.commit("setSkin",value)
    },

colorpicker.vue文件,文件内容如下：

效果：

但是到现在有个问题,就是element-ui有自己的ui主题,每次radio切换主题时没问题，但是F5刷新后页面元素颜色会闪烁，顺序：element-ui颜色>当前设置缓存颜色,为了解决这个问题，就优化了代码,在APP.vue中设置，当页面刷新时能更快的渲染
1.新建colorpicker.js文件

2.APP.vue中引入

//colorpicker.js中只保留了 colorpicker.vue 中 methods：中的方法
import  colorpicker from '@/mixins/colorpicker.js'

3.使用mixins模式

mixins:[colorpicker],

在created中使用

  async created() {
      await this.getColor('#409EFF')
      await this.configRouter();
  },
  //将colorpicker.vue中此方法拿出来
  async getColor(val){
      let theme = val
      const oldVal = this.chalk ? theme : ORIGINAL_THEME
      if (typeof val !== 'string') return
      const themeCluster = this.getThemeCluster(val.replace('#', ''))
      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
      const $message = this.$message({
        message: '  Compiling the theme',
        customClass: 'theme-message',
        type: 'success',
        duration: 0,
        iconClass: 'el-icon-loading'
      })
      const getHandler = (variable, id) => {
        return () => {
          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
          const newStyle = this.updateStyle(this[variable], 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', '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.$emit('change', val)
      $message.close()
    },

到此这篇关于vue+element-ui实现主题切换的文章就介绍到这了,更多相关vue主题切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！