From c0fa72ca6df0de8a772b45d30084f608c4421528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 18 Aug 2017 14:38:26 +0800
Subject: [PATCH] update ColorPicker

---
 examples/routers/color-picker.vue            |  7 +--
 src/components/color-picker/color-picker.vue | 47 +++-----------------
 src/styles/components/color-picker.less      |  8 ++++
 3 files changed, 19 insertions(+), 43 deletions(-)

diff --git a/examples/routers/color-picker.vue b/examples/routers/color-picker.vue
index 0d499f3a..54ca6715 100644
--- a/examples/routers/color-picker.vue
+++ b/examples/routers/color-picker.vue
@@ -1,11 +1,11 @@
 <template>
     <div style="margin: 100px;">
-        {{ color.rgba }}
+        {{ color }}
         <!--<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"></color-picker>
-        <color-picker v-model="color" :alpha="false" :recommend="false"></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>-->
         <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>-->
@@ -17,7 +17,8 @@
         props: {},
         data () {
             return {
-                color: 'rgba(245,5,78,.8)'
+                color: 'rgba(124,24,24,.5)',
+                color2: ''
             };
         },
         computed: {},
diff --git a/src/components/color-picker/color-picker.vue b/src/components/color-picker/color-picker.vue
index ed2017bf..fdefdb7a 100644
--- a/src/components/color-picker/color-picker.vue
+++ b/src/components/color-picker/color-picker.vue
@@ -4,7 +4,10 @@
             <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
             <div :class="inputClasses">
                 <div :class="[prefixCls + '-color']">
-                    <div :style="{backgroundColor: displayedColor}"></div>
+                    <div :class="[prefixCls + '-color-empty']" v-if="value === '' && !visible">
+                        <Icon type="ios-close-empty"></Icon>
+                    </div>
+                    <div v-else :style="{backgroundColor: displayedColor}"></div>
                 </div>
             </div>
         </div>
@@ -29,6 +32,7 @@
 <script>
     import tinycolor from 'tinycolor2';
 
+    import Icon from '../icon/icon.vue';
     import Dropdown from '../dropdown/dropdown.vue';
     import DropdownMenu from '../dropdown/dropdown-menu.vue';
     import RecommendColors from './recommend-colors.vue';
@@ -44,6 +48,7 @@
     const inputPrefixCls = 'ivu-input';
 
     function _colorChange (data, oldHue) {
+        data = data === '' ? '#ff0000' : data;
         const alpha = data && data.a;
         let color;
 
@@ -93,7 +98,7 @@
 
     export default {
         name: 'ColorPicker',
-        components: { Dropdown, DropdownMenu, Confirm, RecommendColors, Saturation, Hue, Alpha },
+        components: { Icon, Dropdown, DropdownMenu, Confirm, RecommendColors, Saturation, Hue, Alpha },
         props: {
             value: {
                 type: String
@@ -218,44 +223,6 @@
             }
         },
         methods: {
-            formatColor () {
-                const defaultColor = {
-                    hex: '#ff0000',
-                    hsl: {
-                        h: 0,
-                        s: 1,
-                        l: 0.5,
-                        a: 1
-                    },
-                    hsv: {
-                        h: 0,
-                        s: 1,
-                        v: 1,
-                        a: 1
-                    },
-                    rgba: {
-                        r: 255,
-                        g: 0,
-                        b: 0,
-                        a: 1
-                    },
-                    a: 1
-                };
-                if (this.value) {
-                    const color = tinycolor(this.value);
-                    const hex = color.toHex();
-                    const hsl = color.toHsl();
-                    const hsv = color.toHsv();
-                    const rgba = color.toRgb();
-
-                    defaultColor.hex = hex;
-                    defaultColor.hsl = hsl;
-                    defaultColor.hsv = hsv;
-                    defaultColor.rgba = rgba;
-                    defaultColor.a = rgba.a;
-                }
-                return defaultColor;
-            },
             childChange (data) {
                 this.colorChange(data);
             },
diff --git a/src/styles/components/color-picker.less b/src/styles/components/color-picker.less
index 240f7be3..de1c7999 100644
--- a/src/styles/components/color-picker.less
+++ b/src/styles/components/color-picker.less
@@ -17,6 +17,14 @@
             box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
             border-radius: 2px;
         }
+        &-empty{
+            background: #fff;
+            overflow: hidden;
+            text-align: center;
+            i{
+                font-size: 20px;
+            }
+        }
     }
     &-large &-color{
         width: 20px;