Commit 8dab987ec7d6a6d3f1ebb2ff1ae5eab45310891f
1 parent
7863e907
update ColorPicker
Showing
2 changed files
with
9 additions
and
1 deletions
Show diff stats
examples/routers/color-picker.vue
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | <div style="margin: 100px;"> | 2 | <div style="margin: 100px;"> |
| 3 | {{ color }} | 3 | {{ color }} |
| 4 | <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> | 4 | <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> |
| 5 | - <color-picker v-model="color" placement="bottom-start" size="large"></color-picker> | 5 | + <color-picker @on-change="c1" @on-active-change="c2" v-model="color" placement="bottom-start" size="large"></color-picker> |
| 6 | <Date-picker transfer type="date" placeholder="选择日期" style="width: 200px"></Date-picker> | 6 | <Date-picker transfer type="date" placeholder="选择日期" style="width: 200px"></Date-picker> |
| 7 | <color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker> | 7 | <color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker> |
| 8 | <color-picker v-model="color2" format="hsv" :alpha="true" :recommend="false"></color-picker> | 8 | <color-picker v-model="color2" format="hsv" :alpha="true" :recommend="false"></color-picker> |
| @@ -25,6 +25,12 @@ | @@ -25,6 +25,12 @@ | ||
| 25 | methods: { | 25 | methods: { |
| 26 | setColor () { | 26 | setColor () { |
| 27 | this.color = '#26bc77'; | 27 | this.color = '#26bc77'; |
| 28 | + }, | ||
| 29 | + c1 (d) { | ||
| 30 | + console.log(d); | ||
| 31 | + }, | ||
| 32 | + c2 (d) { | ||
| 33 | + console.log(d); | ||
| 28 | } | 34 | } |
| 29 | } | 35 | } |
| 30 | }; | 36 | }; |
src/components/color-picker/color-picker.vue
| @@ -215,6 +215,7 @@ | @@ -215,6 +215,7 @@ | ||
| 215 | }, | 215 | }, |
| 216 | set (newVal) { | 216 | set (newVal) { |
| 217 | this.val = newVal; | 217 | this.val = newVal; |
| 218 | + this.$emit('on-active-change', this.formatColor); | ||
| 218 | } | 219 | } |
| 219 | }, | 220 | }, |
| 220 | classes () { | 221 | classes () { |
| @@ -347,6 +348,7 @@ | @@ -347,6 +348,7 @@ | ||
| 347 | }, | 348 | }, |
| 348 | handleClear () { | 349 | handleClear () { |
| 349 | this.$emit('input', ''); | 350 | this.$emit('input', ''); |
| 351 | + this.$emit('on-change', ''); | ||
| 350 | this.handleClose(); | 352 | this.handleClose(); |
| 351 | }, | 353 | }, |
| 352 | handleSelectColor (color) { | 354 | handleSelectColor (color) { |