Commit 93a5f34fd48552e469e927eb4cac1825d93c9d7b
1 parent
0aefe4aa
update ColorPicker
Showing
2 changed files
with
23 additions
and
6 deletions
Show diff stats
examples/routers/color-picker.vue
| @@ -4,8 +4,8 @@ | @@ -4,8 +4,8 @@ | ||
| 4 | <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> | 4 | <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> |
| 5 | <!--<color-picker placement="bottom-start" size="large"></color-picker>--> | 5 | <!--<color-picker placement="bottom-start" size="large"></color-picker>--> |
| 6 | <!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>--> | 6 | <!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>--> |
| 7 | - <color-picker ref="xxx" v-model="color" alpha :recommend="true" placement="bottom" size="default"></color-picker> | ||
| 8 | - <color-picker v-model="color" :alpha="false" :recommend="false" placement="bottom" size="default"></color-picker> | 7 | + <color-picker ref="xxx" v-model="color" alpha :recommend="true"></color-picker> |
| 8 | + <color-picker v-model="color" :alpha="false" :recommend="false"></color-picker> | ||
| 9 | <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>--> | 9 | <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>--> |
| 10 | <!--<color-picker placement="bottom-start" size="small"></color-picker>--> | 10 | <!--<color-picker placement="bottom-start" size="small"></color-picker>--> |
| 11 | <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>--> | 11 | <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>--> |
| @@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
| 17 | props: {}, | 17 | props: {}, |
| 18 | data () { | 18 | data () { |
| 19 | return { | 19 | return { |
| 20 | - color: '#ff4290' | 20 | + color: 'rgba(245,5,78,.8)' |
| 21 | }; | 21 | }; |
| 22 | }, | 22 | }, |
| 23 | computed: {}, | 23 | computed: {}, |
src/components/color-picker/color-picker.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Dropdown trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible"> | 2 | + <Dropdown ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible"> |
| 3 | <div :class="wrapClasses"> | 3 | <div :class="wrapClasses"> |
| 4 | <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> | 4 | <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> |
| 5 | <div :class="inputClasses"> | 5 | <div :class="inputClasses"> |
| @@ -288,12 +288,29 @@ | @@ -288,12 +288,29 @@ | ||
| 288 | handleToggleVisible (visible) { | 288 | handleToggleVisible (visible) { |
| 289 | this.visible = visible; | 289 | this.visible = visible; |
| 290 | }, | 290 | }, |
| 291 | + getFormatColor () { | ||
| 292 | + const value = this.saturationColors; | ||
| 293 | + let color; | ||
| 294 | + if (this.format) { | ||
| 295 | + if (this.format === 'hsl') { | ||
| 296 | + color = tinycolor(value.hsl).toHslString(); | ||
| 297 | + } else if (this.format === 'hsv') { | ||
| 298 | + color = tinycolor(value.hsv).toHsvString(); | ||
| 299 | + } | ||
| 300 | + } else if (this.alpha) { | ||
| 301 | + color = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`; | ||
| 302 | + } else { | ||
| 303 | + color = value.hex; | ||
| 304 | + } | ||
| 305 | + return color; | ||
| 306 | + }, | ||
| 291 | handleSuccess () { | 307 | handleSuccess () { |
| 292 | - this.$emit('input', this.val); | 308 | + this.$emit('input', this.getFormatColor()); |
| 309 | + this.$refs.picker.handleClose(); | ||
| 293 | }, | 310 | }, |
| 294 | handleClear () { | 311 | handleClear () { |
| 295 | this.$emit('input', ''); | 312 | this.$emit('input', ''); |
| 296 | - // todo | 313 | + this.$refs.picker.handleClose(); |
| 297 | } | 314 | } |
| 298 | } | 315 | } |
| 299 | }; | 316 | }; |