diff --git a/examples/routers/color-picker.vue b/examples/routers/color-picker.vue index 445daba..ecddd36 100644 --- a/examples/routers/color-picker.vue +++ b/examples/routers/color-picker.vue @@ -4,7 +4,7 @@ <!--<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" :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> <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>--> <!--<color-picker placement="bottom-start" size="small"></color-picker>--> @@ -17,7 +17,7 @@ props: {}, data () { return { - color: '', + color: 'rgba(255,255,255,.85)', color2: '' }; }, diff --git a/src/components/color-picker/color-picker.vue b/src/components/color-picker/color-picker.vue index 5c0fc64..9301d4a 100644 --- a/src/components/color-picker/color-picker.vue +++ b/src/components/color-picker/color-picker.vue @@ -1,5 +1,5 @@ <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"> <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> <div :class="inputClasses"> @@ -13,25 +13,27 @@ </div> <Dropdown-menu slot="list"> <div :class="[prefixCls + '-picker']"> - <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 :class="[prefixCls + '-picker-wrapper']"> + <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> - <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> </div> </Dropdown-menu> @@ -265,15 +267,22 @@ }, getFormatColor () { const value = this.saturationColors; + const format = this.format; 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(); - } else if (this.format === 'hsv') { + } 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(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`; + color = rgba; } else { color = value.hex; } diff --git a/src/styles/components/color-picker.less b/src/styles/components/color-picker.less index 525721c..1c51f26 100644 --- a/src/styles/components/color-picker.less +++ b/src/styles/components/color-picker.less @@ -1,6 +1,9 @@ @color-picker-prefix-cls: ~"@{css-prefix}color-picker"; .@{color-picker-prefix-cls} { + & .@{select-dropdown-prefix-cls} { + padding: 0; + } &-rel{ line-height: 0; } @@ -38,7 +41,9 @@ } &-picker{ - padding: 4px 8px 0; + &-wrapper{ + padding: 8px 8px 0; + } &-panel{ width: 200px; margin: 0 auto; -- libgit2 0.21.4