update ColorPicker

梁灏
1 parent c0fa72ca
Showing 4 changed files with 26 additions and 16 deletions Show diff stats
examples/routers/color-picker.vue
src/components/color-picker/color-picker.vue
src/components/color-picker/recommend-colors.vue
src/styles/components/color-picker.less
@@ -4,12 +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 ref="xxx" v-model="color" alpha :recommend="true"></color-picker>
+        <color-picker ref="xxx" v-model="color" :recommend="true"></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>-->
-        <Button @click="do2">do2</Button>
+        <Button @click="setColor">set color</Button>
     </div>
 </template>
 <script>
@@ -17,14 +17,14 @@
         props: {},
         data () {
             return {
-                color: 'rgba(124,24,24,.5)',
+                color: '',
                 color2: ''
             };
         },
         computed: {},
         methods: {
-            do2 () {
-                this.$refs.xxx.do2();
+            setColor () {
+                this.color = '#26bc77';
             }
         }
     };
@@ -4,10 +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 :class="[prefixCls + '-color-empty']" v-if="value === '' && !visible">
+                    <div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible">
                         <Icon type="ios-close-empty"></Icon>
                     </div>
-                    <div v-else :style="{backgroundColor: displayedColor}"></div>
+                    <div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div>
                 </div>
             </div>
         </div>
@@ -22,8 +22,16 @@
                 <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
                     <Alpha v-model="saturationColors" @change="childChange"></Alpha>
                 </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>
+                <recommend-colors
+                    v-if="colors.length"
+                    :list="colors"
+                    :class="[prefixCls + '-picker-colors']"
+                    @picker-color="handleSelectColor"></recommend-colors>
+                <recommend-colors
+                    v-if="!colors.length && recommend"
+                    :list="recommendedColor"
+                    :class="[prefixCls + '-picker-colors']"
+                    @picker-color="handleSelectColor"></recommend-colors>
                 <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
             </div>
         </Dropdown-menu>
@@ -278,6 +286,9 @@
             handleClear () {
                 this.$emit('input', '');
                 this.$refs.picker.handleClose();
+            },
+            handleSelectColor (color) {
+                this.val = _colorChange(color);
             }
         }
     };
 <template>
     <div>
         <template v-for="(item, index) in list">
-            <span><em :style="{'background': item}"></em></span>
+            <span @click="handleClick(index)"><em :style="{'background': item}"></em></span>
             <br v-if="(index + 1) % 10 === 0 && index !== 0 && (index + 1) !== list.length">
         </template>
     </div>
@@ -11,13 +11,10 @@
         props: {
             list: Array
         },
-        data () {
-            return {
-
-            };
-        },
         methods: {
-
+            handleClick (index) {
+                this.$emit('picker-color', this.list[index]);
+            }
         }
     };
 </script>
 \ No newline at end of file
@@ -152,6 +152,7 @@
             bottom: 0;
             left: 0;
             overflow: hidden;
+            border-radius: 2px;
         }
         &-checkerboard{
             position: absolute;
@@ -167,6 +168,7 @@
             right: 0;
             bottom: 0;
             left: 0;
+            border-radius: 2px;
         }
         &-container{
             cursor: pointer;