<template><div:class="['el-color-picker',colorDisabled ? 'is-disabled' : '',colorSize ? `el-color-picker--${ colorSize }` : '']"v-clickoutside="hide"><div class="el-color-picker__mask" v-if="colorDisabled"></div><div class="el-color-picker__trigger" @click="handleTrigger"><span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }"><span class="el-color-picker__color-inner":style="{backgroundColor: displayedColor}"></span><span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span></span><span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span></div><picker-dropdownref="dropdown":class="['el-color-picker__panel', popperClass || '']"v-model="showPicker"@pick="confirmValue"@clear="clearValue":color="color":show-alpha="showAlpha":predefine="predefine"></picker-dropdown></div>
</template><script>import Color from './color';import PickerDropdown from './components/picker-dropdown.vue';import Clickoutside from 'element-ui/src/utils/clickoutside';import Emitter from 'element-ui/src/mixins/emitter';export default {name: 'ElColorPicker',mixins: [Emitter],props: {// value / v-model    绑定值  string
      value: String,// 是否支持透明度选择
      showAlpha: Boolean,// 写入 v-model 的颜色的格式    string    hsl / hsv / hex / rgb    hex（show-alpha 为 false）/ rgb（show-alpha 为 true）
      colorFormat: String,// 是否禁用
      disabled: Boolean,// 尺寸
      size: String,// ColorPicker 下拉框的类名
      popperClass: String,// 预定义颜色
      predefine: Array},inject: {elForm: {default: ''},elFormItem: {default: ''}},// 自定义指令,点击元素外面事件
    directives: { Clickoutside },computed: {// 背景色调用了 displayedColor 这个 computed 属性：
      displayedColor() {if (!this.value && !this.showPanelColor) {return 'transparent';}return this.displayedRgb(this.color, this.showAlpha);},_elFormItemSize() {return (this.elFormItem || {}).elFormItemSize;},colorSize() {return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;},colorDisabled() {return this.disabled || (this.elForm || {}).disabled;}},watch: {value(val) {if (!val) {this.showPanelColor = false;} else if (val && val !== this.color.value) {this.color.fromString(val);}},color: {// 深度监视
        deep: true,// 自定义监听事件
        handler() {this.showPanelColor = true;}},// 监听背景色改变,转换成rgb颜色往上传递,
      displayedColor(val) {if (!this.showPicker) return;// 新建一个color类
        const currentValueColor = new Color({enableAlpha: this.showAlpha, // props接收的是否支持透明度选择
          format: this.colorFormat, // props接收的写入v-model颜色格式
        });currentValueColor.fromString(this.value);// 转换成rgb格式
        const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);if (val !== currentValueColorRgb) {// 面板中当前显示的颜色发生改变时触发this.$emit('active-change', val);}}},methods: {// 展开/关闭下拉面板
      handleTrigger() {if (this.colorDisabled) return;this.showPicker = !this.showPicker;},// 点击面板确定按钮
      confirmValue() {const value = this.color.value;// 当绑定值变化时触发this.$emit('input', value);this.$emit('change', value);// 往上通知el-formthis.dispatch('ElFormItem', 'el.form.change', value);this.showPicker = false;},// 点击面板清空按钮
      clearValue() {this.$emit('input', null);this.$emit('change', null);if (this.value !== null) {this.dispatch('ElFormItem', 'el.form.change', null);}this.showPanelColor = false;this.showPicker = false;this.resetColor();},// 点击元素外自定义指令
      hide() {this.showPicker = false;this.resetColor();},// 重置颜色值
      resetColor() {this.$nextTick(_ => {if (this.value) {this.color.fromString(this.value);} else {this.showPanelColor = false;}});},// 将color转变为rgb(a)模式
      displayedRgb(color, showAlpha) {if (!(color instanceof Color)) {throw Error('color should be instance of Color Class');}const { r, g, b } = color.toRgb();return showAlpha? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`: `rgb(${ r }, ${ g }, ${ b })`;}},mounted() {const value = this.value;if (value) {this.color.fromString(value);}this.popperElm = this.$refs.dropdown.$el;},data() {// 新建color类,并赋值
      const color = new Color({enableAlpha: this.showAlpha,format: this.colorFormat});return {color,showPicker: false,showPanelColor: false};},components: {PickerDropdown}};
</script>

<template><transition name="el-zoom-in-top" @after-leave="doDestroy"><divclass="el-color-dropdown"v-show="showPopper"><div class="el-color-dropdown__main-wrapper"><!-- 接收父组件传递的color对象,传递给子组件 --><hue-slider ref="hue" :color="color" vertical style="float: right;"></hue-slider><sv-panel ref="sl" :color="color"></sv-panel></div><alpha-slider v-if="showAlpha" ref="alpha" :color="color"></alpha-slider><!-- predefine, 父组件props接收额预定义颜色 --><predefine v-if="predefine" :color="color" :colors="predefine"></predefine><div class="el-color-dropdown__btns"><span class="el-color-dropdown__value"><el-inputv-model="customInput"@keyup.native.enter="handleConfirm"@blur="handleConfirm":validate-event="false"size="mini"></el-input></span><el-buttonsize="mini"type="text"class="el-color-dropdown__link-btn"@click="$emit('clear')">{{ t('el.colorpicker.clear') }}</el-button><el-buttonplainsize="mini"class="el-color-dropdown__btn"@click="confirmValue">{{ t('el.colorpicker.confirm') }}</el-button></div></div></transition>
</template><script>import SvPanel from './sv-panel';import HueSlider from './hue-slider';import AlphaSlider from './alpha-slider';import Predefine from './predefine';import Popper from 'element-ui/src/utils/vue-popper';import Locale from 'element-ui/src/mixins/locale';import ElInput from 'element-ui/packages/input';import ElButton from 'element-ui/packages/button';export default {name: 'el-color-picker-dropdown',mixins: [Popper, Locale],components: {SvPanel,HueSlider,AlphaSlider,ElInput,ElButton,Predefine},props: {color: {required: true},showAlpha: Boolean,predefine: Array},data() {return {customInput: ''};},computed: {// 中间传递作用,接收父组件value值传
      currentColor() {const parent = this.$parent;return !parent.value && !parent.showPanelColor ? '' : parent.color.value;}},methods: {// 点击确认按钮
      confirmValue() {this.$emit('pick');},// 按Enter键或失焦的时候
      handleConfirm() {//  转换input框中的值this.color.fromString(this.customInput);}},mounted() {this.$parent.popperElm = this.popperElm = this.$el;this.referenceElm = this.$parent.$el;},watch: {showPopper(val) {if (val === true) {this.$nextTick(() => {const { sl, hue, alpha } = this.$refs;sl && sl.update();hue && hue.update();alpha && alpha.update();});}},// 子组件监听此变量改变事件
      currentColor: {immediate: true,handler(val) {this.customInput = val;}}}};
</script>

/*其实 color.js 主要是定义了一个 Color 类，简单说下其中一些方法的作用：set 用于设置 Color 中的变量。get 用于获取 _hue _saturation _value _alpha 这四个值。toRgb 方法将当前颜色的值（除了透明度）以 RGB 的形式返回。fromString 方法将传入的颜色值解析成 HSV 格式，并赋值给 _hue _saturation _value 和 _alpha。doOnChange 方法将会计算颜色值组成字符串传给 value。
*/// hsv 转 hsl
const hsv2hsl = function (hue, sat, val) {return [hue,(sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,hue / 2];
};// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
// 是否为 1.0
const isOnePointZero = function (n) {return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
};
// 是否为百分比
const isPercentage = function (n) {return typeof n === 'string' && n.indexOf('%') !== -1;
};// Take input from [0, n] and return it as [0, 1]
const bound01 = function (value, max) {if (isOnePointZero(value)) value = '100%';const processPercent = isPercentage(value);value = Math.min(max, Math.max(0, parseFloat(value)));// Automatically convert percentage into numberif (processPercent) {value = parseInt(value * max, 10) / 100;}// Handle floating point rounding errorsif ((Math.abs(value - max) < 0.000001)) {return 1;}// Convert into [0, 1] range if it isn't alreadyreturn (value % max) / parseFloat(max);
};
// 十进制转十六进制
const INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };
// 转为十六进制颜色值
const toHex = function ({ r, g, b }) {const hexOne = function (value) {value = Math.min(Math.round(value), 255);const high = Math.floor(value / 16);const low = value % 16;return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);};if (isNaN(r) || isNaN(g) || isNaN(b)) return '';return '#' + hexOne(r) + hexOne(g) + hexOne(b);
};
// 十六进制转十进制
const HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };
// 解析十六进制
const parseHexChannel = function (hex) {if (hex.length === 2) {return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);}return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
};
// hsl 转 hsv
const hsl2hsv = function (hue, sat, light) {sat = sat / 100;light = light / 100;let smin = sat;const lmin = Math.max(light, 0.01);let sv;let v;light *= 2;sat *= (light <= 1) ? light : 2 - light;smin *= lmin <= 1 ? lmin : 2 - lmin;v = (light + sat) / 2;sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);return {h: hue,s: sv * 100,v: v * 100};
};// `rgbToHsv`
// Converts an RGB color value to HSV
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
// *Returns:* { h, s, v } in [0,1]
// rgb 转 hsv
const rgb2hsv = function (r, g, b) {r = bound01(r, 255);g = bound01(g, 255);b = bound01(b, 255);const max = Math.max(r, g, b);const min = Math.min(r, g, b);let h, s;let v = max;const d = max - min;s = max === 0 ? 0 : d / max;if (max === min) {h = 0; // achromatic} else {switch (max) {case r:h = (g - b) / d + (g < b ? 6 : 0);break;case g:h = (b - r) / d + 2;break;case b:h = (r - g) / d + 4;break;}h /= 6;}return { h: h * 360, s: s * 100, v: v * 100 };
};// `hsvToRgb`
// Converts an HSV color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
// hsv 转 rgb
const hsv2rgb = function (h, s, v) {h = bound01(h, 360) * 6;s = bound01(s, 100);v = bound01(v, 100);const i = Math.floor(h);const f = h - i;const p = v * (1 - s);const q = v * (1 - f * s);const t = v * (1 - (1 - f) * s);const mod = i % 6;const r = [v, q, p, p, t, v][mod];const g = [t, v, v, q, p, p][mod];const b = [p, p, t, v, v, q][mod];return {r: Math.round(r * 255),g: Math.round(g * 255),b: Math.round(b * 255)};
};export default class Color {constructor(options) {this._hue = 0;this._saturation = 100;this._value = 100;this._alpha = 100;this.enableAlpha = false;this.format = 'hex';this.value = '';options = options || {};for (let option in options) {if (options.hasOwnProperty(option)) {this[option] = options[option];}}this.doOnChange();}set (prop, value) {if (arguments.length === 1 && typeof prop === 'object') {for (let p in prop) {if (prop.hasOwnProperty(p)) {this.set(p, prop[p]);}}return;}this['_' + prop] = value;this.doOnChange();}// 获取属性值 _hueget (prop) {return this['_' + prop];}// 颜色值转为 rgb 返回toRgb () {return hsv2rgb(this._hue, this._saturation, this._value);}// 格式化传入的值fromString (value) {if (!value) {this._hue = 0;this._saturation = 100;this._value = 100;this.doOnChange();return;}// 定义计算出结果后：赋值、改变。const fromHSV = (h, s, v) => {this._hue = Math.max(0, Math.min(360, h));this._saturation = Math.max(0, Math.min(100, s));this._value = Math.max(0, Math.min(100, v));this.doOnChange();};if (value.indexOf('hsl') !== -1) {const parts = value.replace(/hsla|hsl|\(|\)/gm, '').split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));if (parts.length === 4) {this._alpha = Math.floor(parseFloat(parts[3]) * 100);} else if (parts.length === 3) {this._alpha = 100;}if (parts.length >= 3) {const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);fromHSV(h, s, v);}} else if (value.indexOf('hsv') !== -1) {const parts = value.replace(/hsva|hsv|\(|\)/gm, '').split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));if (parts.length === 4) {this._alpha = Math.floor(parseFloat(parts[3]) * 100);} else if (parts.length === 3) {this._alpha = 100;}if (parts.length >= 3) {fromHSV(parts[0], parts[1], parts[2]);}} else if (value.indexOf('rgb') !== -1) {const parts = value.replace(/rgba|rgb|\(|\)/gm, '').split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));if (parts.length === 4) {this._alpha = Math.floor(parseFloat(parts[3]) * 100);} else if (parts.length === 3) {this._alpha = 100;}if (parts.length >= 3) {const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);fromHSV(h, s, v);}} else if (value.indexOf('#') !== -1) {const hex = value.replace('#', '').trim();if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) return;let r, g, b;if (hex.length === 3) {r = parseHexChannel(hex[0] + hex[0]);g = parseHexChannel(hex[1] + hex[1]);b = parseHexChannel(hex[2] + hex[2]);} else if (hex.length === 6 || hex.length === 8) {r = parseHexChannel(hex.substring(0, 2));g = parseHexChannel(hex.substring(2, 4));b = parseHexChannel(hex.substring(4, 6));}if (hex.length === 8) {this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);} else if (hex.length === 3 || hex.length === 6) {this._alpha = 100;}const { h, s, v } = rgb2hsv(r, g, b);fromHSV(h, s, v);}}compare (color) {return Math.abs(color._hue - this._hue) < 2 &&Math.abs(color._saturation - this._saturation) < 1 &&Math.abs(color._value - this._value) < 1 &&Math.abs(color._alpha - this._alpha) < 1;}// 更具计算结果定义当前颜色值 valuedoOnChange () {const { _hue, _saturation, _value, _alpha, format } = this;if (this.enableAlpha) {switch (format) {case 'hsl':const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);this.value = `hsla(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%, ${_alpha / 100})`;break;case 'hsv':this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%, ${_alpha / 100})`;break;default:const { r, g, b } = hsv2rgb(_hue, _saturation, _value);this.value = `rgba(${r}, ${g}, ${b}, ${_alpha / 100})`;}} else {switch (format) {case 'hsl':const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%)`;break;case 'hsv':this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%)`;break;case 'rgb':const { r, g, b } = hsv2rgb(_hue, _saturation, _value);this.value = `rgb(${r}, ${g}, ${b})`;break;default:this.value = toHex(hsv2rgb(_hue, _saturation, _value));}}}
};

// 选择器拖动效果逻辑
import Vue from 'vue';
let isDragging = false;export default function (element, options) {if (Vue.prototype.$isServer) return;// 移动函数const moveFn = function (event) {if (options.drag) {options.drag(event);}};// 抬起函数const upFn = function (event) {// 移除鼠标移动监听document.removeEventListener('mousemove', moveFn);// 移除鼠标抬起监听document.removeEventListener('mouseup', upFn);document.onselectstart = null;document.ondragstart = null;isDragging = false;// 结束if (options.end) {options.end(event);}};// 给元素添加鼠标按下事件监听element.addEventListener('mousedown', function (event) {if (isDragging) return;// 禁止选择,禁止复制document.onselectstart = function () { return false; };//禁止鼠标拖动，如拖动图片、连接等document.ondragstart = function () { return false; };// 给元素添加鼠标移动和鼠标抬起事件监听document.addEventListener('mousemove', moveFn);document.addEventListener('mouseup', upFn);isDragging = true;// 开始if (options.start) {options.start(event);}});
}

<template>
<!-- 透明度选择器 --><div class="el-color-alpha-slider" :class="{ 'is-vertical': vertical }"><div class="el-color-alpha-slider__bar"@click="handleClick"ref="bar":style="{background: background}"></div><div class="el-color-alpha-slider__thumb"ref="thumb":style="{left: thumbLeft + 'px',top: thumbTop + 'px'}"></div></div>
</template><script>import draggable from '../draggable';export default {name: 'el-color-alpha-slider',props: {color: {required: true},vertical: Boolean},watch: {'color._alpha'() {this.update();},'color.value'() {this.update();}},methods: {handleClick(event) {const thumb = this.$refs.thumb;const target = event.target;if (target !== thumb) {this.handleDrag(event);}},handleDrag(event) {const rect = this.$el.getBoundingClientRect();const { thumb } = this.$refs;if (!this.vertical) {let left = event.clientX - rect.left;left = Math.max(thumb.offsetWidth / 2, left);left = Math.min(left, rect.width - thumb.offsetWidth / 2);this.color.set('alpha', Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100));} else {let top = event.clientY - rect.top;top = Math.max(thumb.offsetHeight / 2, top);top = Math.min(top, rect.height - thumb.offsetHeight / 2);this.color.set('alpha', Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 100));}},getThumbLeft() {if (this.vertical) return 0;const el = this.$el;const alpha = this.color._alpha;if (!el) return 0;const thumb = this.$refs.thumb;return Math.round(alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100);},getThumbTop() {if (!this.vertical) return 0;const el = this.$el;const alpha = this.color._alpha;if (!el) return 0;const thumb = this.$refs.thumb;return Math.round(alpha * (el.offsetHeight - thumb.offsetHeight / 2) / 100);},getBackground() {if (this.color && this.color.value) {const { r, g, b } = this.color.toRgb();return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;}return null;},update() {this.thumbLeft = this.getThumbLeft();this.thumbTop = this.getThumbTop();this.background = this.getBackground();}},data() {return {thumbLeft: 0,thumbTop: 0,background: null};},mounted() {const { bar, thumb } = this.$refs;const dragConfig = {drag: (event) => {this.handleDrag(event);},end: (event) => {this.handleDrag(event);}};draggable(bar, dragConfig);draggable(thumb, dragConfig);this.update();}};
</script>