Merge pull request #4353 from icarusion/ColorPicker-add-editable-prop

ColorPicker add editable prop

examples/routers/color-picker.vue

@@ -1,152 +1,17 @@
 <template>
     <div style="margin: 100px;">
-        {{color}}
+        {{ color1 }}
-        <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
+        <ColorPicker v-model="color1" />
-        <color-picker
+        <ColorPicker v-model="color2" :editable="false"/>
-            v-model="color"
-            placement="bottom-start"
-            @on-change="c1"
-            @on-active-change="c2"></color-picker>
-        <Input value="hello" style="display: inline-block" />
-        <Date-picker
-            type="date"
-            placeholder="选择日期"
-            style="width: 200px"></Date-picker>
-        <color-picker
-            ref="xxx"
-            v-model="color"
-            :recommend="true"
-            format="rgb"
-            alpha
-            @on-change="onChange"
-            @on-active-change="onActiveChange"></color-picker>
-        <color-picker
-            v-model="color2"
-            :alpha="true"
-            :recommend="false"
-            format="hsv"></color-picker>
-        <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
-        <color-picker
-            v-model="color"
-            placement="bottom-start"
-            ></color-picker>
-        <Date-picker
-            type="date"
-            placeholder="选择日期"
-            style="width: 200px"></Date-picker>
-        <color-picker
-            ref="yyy"
-            :colors="colors"
-            v-model="color"
-            format="rgb"
-            alpha></color-picker>
-        <Button @click="setColor">set color</Button>
-
-        <br><br><br><br>
-        {{openState}}
-        <ColorPicker
-            v-model="color7"
-            :hue="false"
-            @on-open-change="onOpenChange"></ColorPicker>
-        <ColorPicker
-            v-model="color7"
-            :hue="false"
-            :hide-drop-down="hideDropDown"
-            @on-open-change="onOpenChange"></ColorPicker>
-
-        <br><br><br><br>
-        <ColorPicker
-            v-model="color7"
-            disabled></ColorPicker>
     </div>
 </template>
-
 <script>
-export default {
+    export default {
-    props: {},
+        data () {
-
+            return {
-    data() {
+                color1: '#19be6b',
-        return {
+                color2: ''
-            color: 'rgba(12,34,255,.85)',
+            };
-            color2: '',
+        }
-            color7: '#19be6b',
+    };
-            openState: false,
-            colors: [
-                '#2d8cf0',
-                '#19be6b',
-                '#ff9900',
-                '#ed3f14',
-                '#00b5ff',
-                '#19c919',
-                '#f9e31c',
-                '#ea1a1a',
-                '#9b1dea',
-                '#00c2b1',
-                '#ac7a33',
-                '#1d35ea',
-                '#8bc34a',
-                '#f16b62',
-                '#ea4ca3',
-                '#0d94aa',
-                '#febd79',
-                '#5d4037',
-                '#00bcd4',
-                '#f06292',
-                '#cddc39',
-                '#607d8b',
-                '#000000',
-                '#ffffff',
-                '#2d8cf0',
-                '#19be6b',
-                '#ff9900',
-                '#ed3f14',
-                '#00b5ff',
-                '#19c919',
-                '#f9e31c',
-                '#ea1a1a',
-                '#9b1dea',
-                '#00c2b1',
-                '#ac7a33',
-                '#1d35ea',
-                '#8bc34a',
-                '#f16b62',
-                '#ea4ca3',
-                '#0d94aa',
-                '#febd79',
-                '#5d4037',
-            ],
-            hideDropDown: false,
-        };
-    },
-
-    computed: {},
-
-    mounted() {
-        setInterval(this.toggleShowHide, 2000);
-    },
-
-    methods: {
-        setColor() {
-            this.color = '#26bc77';
-        },
-        c1(d) {
-            console.log(d);
-        },
-        c2(d) {
-            console.log(d);
-        },
-        onOpenChange(state) {
-            this.openState = state;
-        },
-        onChange(d) {
-            console.log(d);
-        },
-        onActiveChange(d) {
-            console.log(d);
-        },
-        toggleShowHide() {
-            this.hideDropDown = !this.hideDropDown;
-        },
-    },
-};
 </script>

src/components/color-picker/color-picker.vue

@@ -82,7 +82,12 @@
                                 @picker-color="handleSelectColor"></recommend-colors>
                         </div>
                         <div :class="[prefixCls + '-confirm']">
-                            <span :class="[prefixCls + '-confirm-color']">{{formatColor}}</span>
+                            <span :class="confirmColorClasses">
+                                <template v-if="editable">
+                                    <i-input :value="formatColor" size="small" @on-enter="handleEditColor" @on-blur="handleEditColor"></i-input>
+                                </template>
+                                <template v-else>{{formatColor}}</template>
+                            </span>
                             <i-button
                                 ref="clear"
                                 :tabindex="0"
@@ -118,6 +123,7 @@ import RecommendColors from './recommend-colors.vue';
 import Saturation from './saturation.vue';
 import Hue from './hue.vue';
 import Alpha from './alpha.vue';
+import iInput from '../input/input.vue';
 import Locale from '../../mixins/locale';
 import {oneOf} from '../../utils/assist';
 import Emitter from '../../mixins/emitter';
@@ -127,7 +133,7 @@ import {changeColor, toRGBAString} from './utils';
 export default {
     name: 'ColorPicker',
 
-    components: {Drop, RecommendColors, Saturation, Hue, Alpha},
+    components: {Drop, RecommendColors, Saturation, Hue, Alpha, iInput},
 
     directives: {clickOutside, TransferDom},
 
@@ -209,6 +215,10 @@ export default {
             type: String,
             default: undefined,
         },
+        editable: {
+            type: Boolean,
+            default: true
+        },
     },
 
     data() {
@@ -334,6 +344,14 @@ export default {
 
             return saturationColors.hex;
         },
+        confirmColorClasses () {
+            return [
+                `${this.prefixCls}-confirm-color`,
+                {
+                    [`${this.prefixCls}-confirm-color-editable`]: this.editable
+                }
+            ];
+        }
     },
 
     watch: {
@@ -419,6 +437,10 @@ export default {
             this.val = changeColor(color);
             this.$emit('on-active-change', this.formatColor);
         },
+        handleEditColor (event) {
+            const value = event.target.value;
+            this.handleSelectColor(value);
+        },
         handleFirstTab(event) {
             if (event.shiftKey) {
                 event.preventDefault();

src/styles/components/color-picker.less

@@ -289,6 +289,10 @@
             position: absolute;
             top: 11px;
             left: 8px;
+
+            &-editable{
+                top: 8px;
+            }
         }
     }
 }