update ColorPicker

梁灏
1 parent 0aefe4aa
Showing 2 changed files with 23 additions and 6 deletions Show diff stats
examples/routers/color-picker.vue
src/components/color-picker/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: {},
 <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();
             }
         }
     };