当前位置： 移动技术网 > IT编程>网页制作>CSS > vue中使用Element主题自定义肤色

vue中使用Element主题自定义肤色

2019年02月13日  | 移动技术网IT编程  | 我要评论

一、搭建好项目的环境。

二、根据elementui官网的自定义主题（http://element.eleme.io/#/zh-cn/component/custom-theme）来安装【主题生成工具】。

三、在 element-variables.scss 文件里修改 $–color-primary:#409eff，即你想要的主题颜色。然后，执行主题编译命令生成主题(et)，根目录会生成一个theme文件夹。

 

 四、封装动态换肤色themepicker.vue组件。

 

<template>
  <el-color-picker
    class="theme-picker"
    popper-class="theme-picker-dropdown"
    v-model="theme"
    :size="size">
  </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 {
  name: 'themepicker',
  props: {
    default: { // 初始化主题，可由外部传入
      type: string,
      //default: '#eb815b'
      default: ""+localstorage.getitem("tremepackers")+""
    },
    size: { // 初始化主题，可由外部传入
      type: string,
      default: 'small'
    }
  },
  data() {
    return {
      chalk: '', // content of theme-chalk css
      theme: original_theme,
      showsuccess: true, // 是否弹出换肤成功消息
    }
  },
  mounted() {
    if(this.default != null) {
      this.theme = this.default
      this.$emit('onthemechange', this.theme)
      this.showsuccess = false
    }
  },
  watch: {
    theme(val, oldval) {
      if (typeof val !== 'string') return
      const themecluster = this.getthemecluster(val.replace('#', ''))
      const originalcluster = this.getthemecluster(oldval.replace('#', ''))
      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
        }
      }

      const chalkhandler = gethandler('chalk', 'chalk-style')

      if (!this.chalk) {
        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
        this.getcssstring(url, chalkhandler, 'chalk')
      } else {
        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('onthemechange', val)
      //存入localstorage
      localstorage.setitem('tremepackers',val);
      if(this.showsuccess) {
        this.$message({
          message: '换肤成功',
          type: 'success'
        })
      } else {
        this.showsuccess = true
      }
    }
  },
  methods: {
    updatestyle(style, oldcluster, newcluster) {
      let newstyle = style
      oldcluster.foreach((color, index) => {
        newstyle = newstyle.replace(new regexp(color, 'ig'), newcluster[index])
      })
      return newstyle
    },

    getcssstring(url, callback, variable) {
      const xhr = new xmlhttprequest()
      xhr.onreadystatechange = () => {
        if (xhr.readystate === 4 && xhr.status === 200) {
          this[variable] = xhr.responsetext.replace(/@font-face{[^}]+}/, '')
          callback()
        }
      }
      xhr.open('get', url)
      xhr.send()
    },

    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
    }
  }
}
</script>

<style>
.theme-picker .el-color-picker__trigger {
  vertical-align: middle;
}

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

五、直接在组件中引用

 

 六、换肤效果测试。（关闭浏览器再次打开依旧是你所选中的主题肤色）

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网