github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

ColorPicker: active-change only triggers on user interaction (#10903) 

* ColorPicker: only emit active-change event source from dropdown, fixed #10901

* Update main.vue
pull/10944/head
Bo Zhang 2018-04-29 17:31:52 +08:00 committed by 杨奕
parent 61a25c5553
commit a8248ddfef
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/color-picker/src/main.vue
View File

@ -63,12 +63,9 @@
displayedColor() {
if (!this.value && !this.showPanelColor) {
return 'transparent';
} else {
const { r, g, b } = this.color.toRgb();
return this.showAlpha
? `rgba(${ r }, ${ g }, ${ b }, ${ this.color.get('alpha') / 100 })`
: `rgb(${ r }, ${ g }, ${ b })`;
}
return this.displayedRgb(this.color, this.showAlpha);
},
_elFormItemSize() {
@ -99,7 +96,16 @@
}
},
displayedColor(val) {
this.$emit('active-change', val);
const outerColor = new Color({
enableAlpha: this.showAlpha,
format: this.colorFormat
});
outerColor.fromString(this.value);
const outerColorRgb = this.displayedRgb(outerColor, this.showAlpha);
if (val !== outerColorRgb) {
this.$emit('active-change', val);
}
}
},
@ -132,6 +138,16 @@
this.showPanelColor = false;
}
});
},
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 })`;
}
},