<template>
??<el-color-picker
????:predefine="predefineColors"
????v-model="themeVal"
????size="mini"
????style="padding-top:18px;"
????class="theme-picker"
????popper-class="theme-picker-dropdown"/>
</template>
<script>
const?version?=?require('element-ui/package.json').version?//?element-ui?版本
const?ORIGINAL_THEME?=?'#409EFF'?//?默認(rèn)顏色
export?default?{
??name:?'TopColor',
??data()?{
????return?{
??????themeVal:?ORIGINAL_THEME,
??????chalk:?'',
??????predefineColors:?[//預(yù)選顏色
????????'#ff4500',
????????'#ff8c00',
????????'#ffd700',
????????'#90ee90',
????????'#00ced1',
????????'#1e90ff',
????????'#c71585'
??????]
????}
??},
??watch:?{//監(jiān)聽選中的顏色
??????themeVal(val,?oldVal)?{
????????this.updateTheme(val,?oldVal)
??????}
??},
??methods:?{
????//調(diào)用更新函數(shù)
??????updateTheme(val,?oldVal)?{
????????if?(typeof?val?!==?'string')?return
????????//聲明常量?head
????????const?head?=?document.getElementsByTagName('head')[0]
????????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)
??????????????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?link?=?[].slice.call(
??????????document.getElementsByTagName('head')[0].getElementsByTagName('link')
????????)
????????for?(let?i?=?0;?i?<?link.length;?i++)?{
??????????const?style?=?link[i]
??????????if?(style.href.includes('css'))?{
????????????this.getCSSString(style.href,?innerText?=>?{
??????????????const?originalCluster?=?this.getThemeCluster(
????????????????ORIGINAL_THEME.replace('#',?'')
??????????????)
??????????????const?newStyle?=?this.updateStyle(
????????????????innerText,
????????????????originalCluster,
????????????????themeCluster
??????????????)
??????????????let?styleTag?=?document.getElementById(i)
??????????????if?(!styleTag)?{
????????????????styleTag?=?document.createElement('style')
????????????????styleTag.id?=?i
????????????????styleTag.innerText?=?newStyle
????????????????head.appendChild(styleTag)
??????????????}
????????????})
??????????}
????????}
????????const?styles?=?[].slice.call(document.querySelectorAll('style'))
????????styles.forEach(style?=>?{
??????????const?{
????????????innerText
??????????}?=?style
??????????if?(typeof?innerText?!==?'string')?return
??????????style.innerText?=?this.updateStyle(
????????????innerText,
????????????originalCluster,
????????????themeCluster
??????????)
????????})
??????},
??????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)?{
????????????if?(variable)?{
??????????????this[variable]?=?xhr.responseText.replace(/@font-face{[^}]+}/,?'')
????????????}
????????????callback(xhr.responseText)
??????????}
????????}
????????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)?{
????????????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>
