update ColorPicker

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: {},

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);
             },

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;