update ColorPicker

This commit is contained in:
梁灏 2017-08-18 15:52:06 +08:00
parent 77950c307b
commit 59dc2df009
3 changed files with 48 additions and 30 deletions

View file

@ -34,7 +34,10 @@
:class="[prefixCls + '-picker-colors']"
@picker-color="handleSelectColor"></recommend-colors>
</div>
<Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
<div :class="[prefixCls + '-confirm']">
<span :class="[prefixCls + '-confirm-color']">{{ formatColor }}</span>
<Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
</div>
</div>
</Dropdown-menu>
</Dropdown>
@ -58,7 +61,7 @@
const inputPrefixCls = 'ivu-input';
function _colorChange (data, oldHue) {
data = data === '' ? '#ff0000' : data;
data = data === '' ? '#2d8cf0' : data;
const alpha = data && data.a;
let color;
@ -170,12 +173,16 @@
'#00c2b1',
'#ac7a33',
'#1d35ea',
'#42bd82',
'#8bc34a',
'#f16b62',
'#ea4ca3',
'#0d94aa',
'#febd79',
'#3b90fc',
'#5d4037',
'#00bcd4',
'#f06292',
'#cddc39',
'#607d8b',
'#000000',
'#ffffff'
]
@ -222,6 +229,29 @@
color = tinycolor(this.value).toRgb();
}
return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
},
formatColor () {
const value = this.saturationColors;
const format = this.format;
let color;
const rgba = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`;
if (format) {
if (format === 'hsl') {
color = tinycolor(value.hsl).toHslString();
} else if (format === 'hsv') {
color = tinycolor(value.hsv).toHsvString();
} else if (format === 'hex') {
color = value.hex;
} else if (format === 'rgb') {
color = rgba;
}
} else if (this.alpha) {
color = rgba;
} else {
color = value.hex;
}
return color;
}
},
watch: {
@ -265,31 +295,10 @@
handleToggleVisible (visible) {
this.visible = visible;
},
getFormatColor () {
const value = this.saturationColors;
const format = this.format;
let color;
const rgba = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`;
if (format) {
if (format === 'hsl') {
color = tinycolor(value.hsl).toHslString();
} else if (format === 'hsv') {
color = tinycolor(value.hsv).toHsvString();
} else if (format === 'hex') {
color = value.hex;
} else if (format === 'rgb') {
color = rgba;
}
} else if (this.alpha) {
color = rgba;
} else {
color = value.hex;
}
return color;
},
handleSuccess () {
this.$emit('input', this.getFormatColor());
const color = this.formatColor;
this.$emit('input', color);
this.$emit('on-change', color);
this.$refs.picker.handleClose();
},
handleClear () {

View file

@ -2,7 +2,7 @@
<div>
<template v-for="(item, index) in list">
<span @click="handleClick(index)"><em :style="{'background': item}"></em></span>
<br v-if="(index + 1) % 10 === 0 && index !== 0 && (index + 1) !== list.length">
<br v-if="(index + 1) % 12 === 0 && index !== 0 && (index + 1) !== list.length">
</template>
</div>
</template>

View file

@ -45,7 +45,7 @@
padding: 8px 8px 0;
}
&-panel{
width: 200px;
width: 240px;
margin: 0 auto;
box-sizing: initial;
position: relative;
@ -197,4 +197,13 @@
transform: translateX(-2px);
}
}
&-confirm{
position: relative;
&-color{
position: absolute;
top: 11px;
left: 8px;
}
}
}