update ColorPicker

梁灏
1 parent e7893a68
Showing 3 changed files with 88 additions and 30 deletions Show diff stats
examples/routers/color-picker.vue
src/components/color-picker/color-picker.vue
src/styles/components/color-picker.less
@@ -4,11 +4,12 @@
         <!--<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 v-model="color" alpha :recommend="true" placement="bottom" size="default"></color-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>
         <!--<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>-->
+        <Button @click="do2">do2</Button>
     </div>
 </template>
 <script>
@@ -16,31 +17,14 @@
         props: {},
         data () {
             return {
-                color: {
-                    hex: '#194d33',
-                    hsl: {
-                        h: 150,
-                        s: 0.5,
-                        l: 0.2,
-                        a: 1
-                    },
-                    hsv: {
-                        h: 150,
-                        s: 0.66,
-                        v: 0.30,
-                        a: 1
-                    },
-                    rgba: {
-                        r: 25,
-                        g: 77,
-                        b: 51,
-                        a: 1
-                    },
-                    a: 1
-                }
+                color: '#ff4290'
             };
         },
         computed: {},
-        methods: {}
+        methods: {
+            do2 () {
+                this.$refs.xxx.do2();
+            }
+        }
     };
 </script>
 \ No newline at end of file
 <template>
-    <Dropdown trigger="click" :transfer="transfer" :placement="placement">
+    <Dropdown 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">
-                <div :class="[prefixCls + '-color']" style="background-color: rgb(32, 160, 255);"></div>
+                <div :class="[prefixCls + '-color']">
+                    <div :style="{backgroundColor: displayedColor}"></div>
+                </div>
             </div>
         </div>
         <Dropdown-menu slot="list">
@@ -19,7 +21,7 @@
                 </div>
                 <recommend-colors v-if="colors.length" :list="colors" :class="[prefixCls + '-picker-colors']"></recommend-colors>
                 <recommend-colors v-if="!colors.length && recommend" :list="recommendedColor" :class="[prefixCls + '-picker-colors']"></recommend-colors>
-                <Confirm></Confirm>
+                <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
             </div>
         </Dropdown-menu>
     </Dropdown>
@@ -94,7 +96,7 @@
         components: { Dropdown, DropdownMenu, Confirm, RecommendColors, Saturation, Hue, Alpha },
         props: {
             value: {
-                type: Object
+                type: String
             },
             alpha: {
                 type: Boolean,
@@ -139,6 +141,7 @@
             return {
                 val: _colorChange(this.value),
                 prefixCls: prefixCls,
+                visible: false,
                 recommendedColor: [
                     '#2d8cf0',
                     '#19be6b',
@@ -170,7 +173,6 @@
                 },
                 set (newVal) {
                     this.val = newVal;
-                    this.$emit('input', newVal);
                 }
             },
             wrapClasses () {
@@ -190,14 +192,70 @@
                         [`${inputPrefixCls}-disabled`]: this.disabled
                     }
                 ];
+            },
+            displayedColor () {
+                let color;
+                if (this.visible) {
+                    const rgba = this.saturationColors.rgba;
+                    color = {
+                        r: rgba.r,
+                        g: rgba.g,
+                        b: rgba.b,
+                        a: rgba.a
+                    };
+                } else {
+                    color = tinycolor(this.value).toRgb();
+                }
+                return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
             }
         },
         watch: {
             value (newVal) {
                 this.val = _colorChange(newVal);
+            },
+            visible () {
+                this.val = _colorChange(this.value);
             }
         },
         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);
             },
@@ -226,6 +284,16 @@
                 if (checked === passed) {
                     return data;
                 }
+            },
+            handleToggleVisible (visible) {
+                this.visible = visible;
+            },
+            handleSuccess () {
+                this.$emit('input', this.val);
+            },
+            handleClear () {
+                this.$emit('input', '');
+                // todo
             }
         }
     };
@@ -7,10 +7,16 @@
     &-color{
         width: 18px;
         height: 18px;
-        box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
         border-radius: 2px;
         position: relative;
         top: 2px;
+        div{
+            width: 100%;
+            height: 100%;
+            box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
+            border-radius: 2px;
+        }
     }
     &-large &-color{
         width: 20px;