update ColorPicker

梁灏
1 parent 1f61a559
Showing 3 changed files with 40 additions and 26 deletions Show diff stats
examples/routers/color-picker.vue
src/components/color-picker/color-picker.vue
src/styles/components/color-picker.less
@@ -4,7 +4,7 @@
         <!--<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" :recommend="true"></color-picker>
+        <color-picker ref="xxx" v-model="color" format="rgb" alpha :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>-->
@@ -17,7 +17,7 @@
         props: {},
         data () {
             return {
-                color: '',
+                color: 'rgba(255,255,255,.85)',
                 color2: ''
             };
         },
 <template>
-    <Dropdown ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible">
+    <Dropdown :class="[prefixCls]" 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">
@@ -13,25 +13,27 @@
         </div>
         <Dropdown-menu slot="list">
             <div :class="[prefixCls + '-picker']">
-                <div :class="[prefixCls + '-picker-panel']">
-                    <Saturation v-model="saturationColors" @change="childChange"></Saturation>
-                </div>
-                <div :class="[prefixCls + '-picker-hue-slider']">
-                    <Hue v-model="saturationColors" @change="childChange"></Hue>
-                </div>
-                <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
-                    <Alpha v-model="saturationColors" @change="childChange"></Alpha>
+                <div :class="[prefixCls + '-picker-wrapper']">
+                    <div :class="[prefixCls + '-picker-panel']">
+                        <Saturation v-model="saturationColors" @change="childChange"></Saturation>
+                    </div>
+                    <div :class="[prefixCls + '-picker-hue-slider']">
+                        <Hue v-model="saturationColors" @change="childChange"></Hue>
+                    </div>
+                    <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']"
+                        @picker-color="handleSelectColor"></recommend-colors>
+                    <recommend-colors
+                        v-if="!colors.length && recommend"
+                        :list="recommendedColor"
+                        :class="[prefixCls + '-picker-colors']"
+                        @picker-color="handleSelectColor"></recommend-colors>
                 </div>
-                <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>
@@ -265,15 +267,22 @@
             },
             getFormatColor () {
                 const value = this.saturationColors;
+                const format = this.format;
                 let color;
-                if (this.format) {
-                    if (this.format === 'hsl') {
+
+                const rgba = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`;
+                if (format) {
+                    if (format === 'hsl') {
                         color = tinycolor(value.hsl).toHslString();
-                    } else if (this.format === 'hsv') {
+                    } else if (format === 'hsv') {
                         color = tinycolor(value.hsv).toHsvString();
+                    } else if (format === 'hex') {
+                        color = value.hex;
+                    } else if (format === 'rgb') {
+                        color = rgba;
                     }
                 } else if (this.alpha) {
-                    color = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`;
+                    color = rgba;
                 } else {
                     color = value.hex;
                 }
 @color-picker-prefix-cls: ~"@{css-prefix}color-picker";
 .@{color-picker-prefix-cls} {
+    & .@{select-dropdown-prefix-cls} {
+        padding: 0;
+    }
     &-rel{
         line-height: 0;
     }
@@ -38,7 +41,9 @@
     }
     &-picker{
-        padding: 4px 8px 0;
+        &-wrapper{
+            padding: 8px 8px 0;
+        }
         &-panel{
             width: 200px;
             margin: 0 auto;