drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update ColorPicker

Browse source
This commit is contained in:
梁灏 2017-08-18 14:20:14 +08:00
parent 0aefe4aa09
commit 93a5f34fd4
2 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/routers/color-picker.vue
View file

@ -4,8 +4,8 @@
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
<!--<color-picker placement="bottom-start" size="large"></color-picker>-->
<!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>-->
<color-picker ref="xxx" v-model="color" alpha :recommend="true" placement="bottom" size="default"></color-picker>
<color-picker v-model="color" :alpha="false" :recommend="false" placement="bottom" size="default"></color-picker>
<color-picker ref="xxx" v-model="color" alpha :recommend="true"></color-picker>
<color-picker v-model="color" :alpha="false" :recommend="false"></color-picker>
<!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--<color-picker placement="bottom-start" size="small"></color-picker>-->
<!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>-->
@ -17,7 +17,7 @@
props: {},
data () {
return {
color: '#ff4290'
color: 'rgba(245,5,78,.8)'
};
},
computed: {},

23
src/components/color-picker/color-picker.vue
View file

@ -1,5 +1,5 @@
<template>
<Dropdown trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible">
<Dropdown ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible">
<div :class="wrapClasses">
<i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
<div :class="inputClasses">
@ -288,12 +288,29 @@
handleToggleVisible (visible) {
this.visible = visible;
},
getFormatColor () {
const value = this.saturationColors;
let color;
if (this.format) {
if (this.format === 'hsl') {
color = tinycolor(value.hsl).toHslString();
} else if (this.format === 'hsv') {
color = tinycolor(value.hsv).toHsvString();
}
} else if (this.alpha) {
color = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`;
} else {
color = value.hex;
}
return color;
},
handleSuccess () {
this.$emit('input', this.val);
this.$emit('input', this.getFormatColor());
this.$refs.picker.handleClose();
},
handleClear () {
this.$emit('input', '');
// todo
this.$refs.picker.handleClose();
}
}
};