From 93a5f34fd48552e469e927eb4cac1825d93c9d7b Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Fri, 18 Aug 2017 14:20:14 +0800
Subject: [PATCH] update ColorPicker

---
 examples/routers/color-picker.vue            |  6 +++---
 src/components/color-picker/color-picker.vue | 23 ++++++++++++++++++++---
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/examples/routers/color-picker.vue b/examples/routers/color-picker.vue
index b538fc1..0d499f3 100644
--- a/examples/routers/color-picker.vue
+++ b/examples/routers/color-picker.vue
@@ -4,8 +4,8 @@
         <!--<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" alpha :recommend="true" placement="bottom" size="default"></color-picker>
-        <color-picker v-model="color" :alpha="false" :recommend="false" placement="bottom" size="default"></color-picker>
+        <color-picker ref="xxx" v-model="color" alpha :recommend="true"></color-picker>
+        <color-picker v-model="color" :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>-->
         <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>-->
@@ -17,7 +17,7 @@
         props: {},
         data () {
             return {
-                color: '#ff4290'
+                color: 'rgba(245,5,78,.8)'
             };
         },
         computed: {},
diff --git a/src/components/color-picker/color-picker.vue b/src/components/color-picker/color-picker.vue
index ad4b96f..ed2017b 100644
--- a/src/components/color-picker/color-picker.vue
+++ b/src/components/color-picker/color-picker.vue
@@ -1,5 +1,5 @@
 <template>
-    <Dropdown trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible">
+    <Dropdown 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">
@@ -288,12 +288,29 @@
             handleToggleVisible (visible) {
                 this.visible = visible;
             },
+            getFormatColor () {
+                const value = this.saturationColors;
+                let color;
+                if (this.format) {
+                    if (this.format === 'hsl') {
+                        color = tinycolor(value.hsl).toHslString();
+                    } else if (this.format === 'hsv') {
+                        color = tinycolor(value.hsv).toHsvString();
+                    }
+                } else if (this.alpha) {
+                    color = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`;
+                } else {
+                    color = value.hex;
+                }
+                return color;
+            },
             handleSuccess () {
-                this.$emit('input', this.val);
+                this.$emit('input', this.getFormatColor());
+                this.$refs.picker.handleClose();
             },
             handleClear () {
                 this.$emit('input', '');
-                // todo
+                this.$refs.picker.handleClose();
             }
         }
     };
--
libgit2 0.21.4