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 15:23:00 +08:00
parent 1f61a55983
commit 77950c307b
3 changed files with 40 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<Dropdown ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible"> <Dropdown :class="[prefixCls]" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible">
<div :class="wrapClasses"> <div :class="wrapClasses">
<i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
<div :class="inputClasses"> <div :class="inputClasses">
@ -13,25 +13,27 @@
</div> </div>
<Dropdown-menu slot="list"> <Dropdown-menu slot="list">
<div :class="[prefixCls + '-picker']"> <div :class="[prefixCls + '-picker']">
<div :class="[prefixCls + '-picker-panel']"> <div :class="[prefixCls + '-picker-wrapper']">
<Saturation v-model="saturationColors" @change="childChange"></Saturation> <div :class="[prefixCls + '-picker-panel']">
<Saturation v-model="saturationColors" @change="childChange"></Saturation>
</div>
<div :class="[prefixCls + '-picker-hue-slider']">
<Hue v-model="saturationColors" @change="childChange"></Hue>
</div>
<div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
<Alpha v-model="saturationColors" @change="childChange"></Alpha>
</div>
<recommend-colors
v-if="colors.length"
:list="colors"
:class="[prefixCls + '-picker-colors']"
@picker-color="handleSelectColor"></recommend-colors>
<recommend-colors
v-if="!colors.length && recommend"
:list="recommendedColor"
:class="[prefixCls + '-picker-colors']"
@picker-color="handleSelectColor"></recommend-colors>
</div> </div>
<div :class="[prefixCls + '-picker-hue-slider']">
<Hue v-model="saturationColors" @change="childChange"></Hue>
</div>
<div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
<Alpha v-model="saturationColors" @change="childChange"></Alpha>
</div>
<recommend-colors
v-if="colors.length"
:list="colors"
:class="[prefixCls + '-picker-colors']"
@picker-color="handleSelectColor"></recommend-colors>
<recommend-colors
v-if="!colors.length && recommend"
:list="recommendedColor"
:class="[prefixCls + '-picker-colors']"
@picker-color="handleSelectColor"></recommend-colors>
<Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm> <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
</div> </div>
</Dropdown-menu> </Dropdown-menu>
@ -265,15 +267,22 @@
}, },
getFormatColor () { getFormatColor () {
const value = this.saturationColors; const value = this.saturationColors;
const format = this.format;
let color; let color;
if (this.format) {
if (this.format === 'hsl') { 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(); color = tinycolor(value.hsl).toHslString();
} else if (this.format === 'hsv') { } else if (format === 'hsv') {
color = tinycolor(value.hsv).toHsvString(); color = tinycolor(value.hsv).toHsvString();
} else if (format === 'hex') {
color = value.hex;
} else if (format === 'rgb') {
color = rgba;
} }
} else if (this.alpha) { } else if (this.alpha) {
color = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`; color = rgba;
} else { } else {
color = value.hex; color = value.hex;
} }

7
src/styles/components/color-picker.less
View file

@ -1,6 +1,9 @@
@color-picker-prefix-cls: ~"@{css-prefix}color-picker"; @color-picker-prefix-cls: ~"@{css-prefix}color-picker";
.@{color-picker-prefix-cls} { .@{color-picker-prefix-cls} {
& .@{select-dropdown-prefix-cls} {
padding: 0;
}
&-rel{ &-rel{
line-height: 0; line-height: 0;
} }
@ -38,7 +41,9 @@
} }
&-picker{ &-picker{
padding: 4px 8px 0; &-wrapper{
padding: 8px 8px 0;
}
&-panel{ &-panel{
width: 200px; width: 200px;
margin: 0 auto; margin: 0 auto;