Commit 77950c307b4b03c6039f11db84f37b9a46e4b965
1 parent
1f61a559
update ColorPicker
Showing
3 changed files
with
40 additions
and
26 deletions
Show diff stats
examples/routers/color-picker.vue
| ... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 | <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> |
| 5 | 5 | <!--<color-picker placement="bottom-start" size="large"></color-picker>--> |
| 6 | 6 | <!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>--> |
| 7 | - <color-picker ref="xxx" v-model="color" :recommend="true"></color-picker> | |
| 7 | + <color-picker ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker> | |
| 8 | 8 | <color-picker v-model="color2" :alpha="false" :recommend="false"></color-picker> |
| 9 | 9 | <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>--> |
| 10 | 10 | <!--<color-picker placement="bottom-start" size="small"></color-picker>--> |
| ... | ... | @@ -17,7 +17,7 @@ |
| 17 | 17 | props: {}, |
| 18 | 18 | data () { |
| 19 | 19 | return { |
| 20 | - color: '', | |
| 20 | + color: 'rgba(255,255,255,.85)', | |
| 21 | 21 | color2: '' |
| 22 | 22 | }; |
| 23 | 23 | }, | ... | ... |
src/components/color-picker/color-picker.vue
| 1 | 1 | <template> |
| 2 | - <Dropdown ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible"> | |
| 2 | + <Dropdown :class="[prefixCls]" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible"> | |
| 3 | 3 | <div :class="wrapClasses"> |
| 4 | 4 | <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> |
| 5 | 5 | <div :class="inputClasses"> |
| ... | ... | @@ -13,25 +13,27 @@ |
| 13 | 13 | </div> |
| 14 | 14 | <Dropdown-menu slot="list"> |
| 15 | 15 | <div :class="[prefixCls + '-picker']"> |
| 16 | - <div :class="[prefixCls + '-picker-panel']"> | |
| 17 | - <Saturation v-model="saturationColors" @change="childChange"></Saturation> | |
| 18 | - </div> | |
| 19 | - <div :class="[prefixCls + '-picker-hue-slider']"> | |
| 20 | - <Hue v-model="saturationColors" @change="childChange"></Hue> | |
| 21 | - </div> | |
| 22 | - <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']"> | |
| 23 | - <Alpha v-model="saturationColors" @change="childChange"></Alpha> | |
| 16 | + <div :class="[prefixCls + '-picker-wrapper']"> | |
| 17 | + <div :class="[prefixCls + '-picker-panel']"> | |
| 18 | + <Saturation v-model="saturationColors" @change="childChange"></Saturation> | |
| 19 | + </div> | |
| 20 | + <div :class="[prefixCls + '-picker-hue-slider']"> | |
| 21 | + <Hue v-model="saturationColors" @change="childChange"></Hue> | |
| 22 | + </div> | |
| 23 | + <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']"> | |
| 24 | + <Alpha v-model="saturationColors" @change="childChange"></Alpha> | |
| 25 | + </div> | |
| 26 | + <recommend-colors | |
| 27 | + v-if="colors.length" | |
| 28 | + :list="colors" | |
| 29 | + :class="[prefixCls + '-picker-colors']" | |
| 30 | + @picker-color="handleSelectColor"></recommend-colors> | |
| 31 | + <recommend-colors | |
| 32 | + v-if="!colors.length && recommend" | |
| 33 | + :list="recommendedColor" | |
| 34 | + :class="[prefixCls + '-picker-colors']" | |
| 35 | + @picker-color="handleSelectColor"></recommend-colors> | |
| 24 | 36 | </div> |
| 25 | - <recommend-colors | |
| 26 | - v-if="colors.length" | |
| 27 | - :list="colors" | |
| 28 | - :class="[prefixCls + '-picker-colors']" | |
| 29 | - @picker-color="handleSelectColor"></recommend-colors> | |
| 30 | - <recommend-colors | |
| 31 | - v-if="!colors.length && recommend" | |
| 32 | - :list="recommendedColor" | |
| 33 | - :class="[prefixCls + '-picker-colors']" | |
| 34 | - @picker-color="handleSelectColor"></recommend-colors> | |
| 35 | 37 | <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm> |
| 36 | 38 | </div> |
| 37 | 39 | </Dropdown-menu> |
| ... | ... | @@ -265,15 +267,22 @@ |
| 265 | 267 | }, |
| 266 | 268 | getFormatColor () { |
| 267 | 269 | const value = this.saturationColors; |
| 270 | + const format = this.format; | |
| 268 | 271 | let color; |
| 269 | - if (this.format) { | |
| 270 | - if (this.format === 'hsl') { | |
| 272 | + | |
| 273 | + const rgba = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`; | |
| 274 | + if (format) { | |
| 275 | + if (format === 'hsl') { | |
| 271 | 276 | color = tinycolor(value.hsl).toHslString(); |
| 272 | - } else if (this.format === 'hsv') { | |
| 277 | + } else if (format === 'hsv') { | |
| 273 | 278 | color = tinycolor(value.hsv).toHsvString(); |
| 279 | + } else if (format === 'hex') { | |
| 280 | + color = value.hex; | |
| 281 | + } else if (format === 'rgb') { | |
| 282 | + color = rgba; | |
| 274 | 283 | } |
| 275 | 284 | } else if (this.alpha) { |
| 276 | - color = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`; | |
| 285 | + color = rgba; | |
| 277 | 286 | } else { |
| 278 | 287 | color = value.hex; |
| 279 | 288 | } | ... | ... |
src/styles/components/color-picker.less
| 1 | 1 | @color-picker-prefix-cls: ~"@{css-prefix}color-picker"; |
| 2 | 2 | |
| 3 | 3 | .@{color-picker-prefix-cls} { |
| 4 | + & .@{select-dropdown-prefix-cls} { | |
| 5 | + padding: 0; | |
| 6 | + } | |
| 4 | 7 | &-rel{ |
| 5 | 8 | line-height: 0; |
| 6 | 9 | } |
| ... | ... | @@ -38,7 +41,9 @@ |
| 38 | 41 | } |
| 39 | 42 | |
| 40 | 43 | &-picker{ |
| 41 | - padding: 4px 8px 0; | |
| 44 | + &-wrapper{ | |
| 45 | + padding: 8px 8px 0; | |
| 46 | + } | |
| 42 | 47 | &-panel{ |
| 43 | 48 | width: 200px; |
| 44 | 49 | margin: 0 auto; | ... | ... |