:predefine="predefineColors" v-model="themeVal" size="mini" style="padding-top:18px;" class="theme-picker" popper-class="theme-picker-dropdown"/> const version = require('element-ui/package.json').version // element-ui 版本 const ORIGINAL_THEME = '#409EFF' // 默认颜色 export default { name: 'TopColor', data() { return { themeVal: ORIGINAL_THEME, chalk: '', predefineColors: [//预选颜色 '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585' ] } }, watch: {//监听选中的颜色 themeVal(val, oldVal) { this.updateTheme(val, oldVal) } }, methods: { //调用更新函数 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 } } } .theme-picker .el-color-picker__trigger { vertical-align: middle; } .theme-picker-dropdown .el-color-dropdown__link-btn { display: none; }