update ColorPicker

examples/routers/color-picker.vue

@@ -1,11 +1,11 @@
 <template>
     <div style="margin: 100px;">
         <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
-        <color-picker placement="bottom-start" size="large"></color-picker>
+        <!--<color-picker placement="bottom-start" size="large"></color-picker>-->
         <!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>-->
-        <color-picker placement="bottom-start" size="default"></color-picker>
+        <color-picker recommend alpha 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>
+        <!--<color-picker placement="bottom-start" size="small"></color-picker>-->
         <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>-->
     </div>
 </template>

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

@@ -7,9 +7,17 @@
             </div>
         </div>
         <Dropdown-menu slot="list">
-            <p>常用于各种自定义下拉内容的场景。</p>
+            <div :class="[prefixCls + '-picker']">
-            <div style="text-align: right;margin:10px;">
+                <div :class="[prefixCls + '-picker-panel']"></div>
-                <Button type="primary">关闭</Button>
+                <div :class="[prefixCls + '-picker-hue-slider']">
+                    <Slider v-model="hueNumber" :min="0" :max="255"></Slider>
+                </div>
+                <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
+                    <Slider v-model="alphaNumber" :min="0" :max="100"></Slider>
+                </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', prefixCls + '-picker-colors-recommended']"></recommend-colors>
+                <Confirm></Confirm>
             </div>
         </Dropdown-menu>
     </Dropdown>
@@ -17,6 +25,9 @@
 <script>
     import Dropdown from '../dropdown/dropdown.vue';
     import DropdownMenu from '../dropdown/dropdown-menu.vue';
+    import Slider from '../slider/slider.vue';
+    import RecommendColors from './recommend-colors.vue';
+    import Confirm from '../date-picker/base/confirm.vue';
     import { oneOf } from '../../utils/assist';
 
     const prefixCls = 'ivu-color-picker';
@@ -24,7 +35,7 @@
 
     export default {
         name: 'ColorPicker',
-        components: { Dropdown, DropdownMenu },
+        components: { Dropdown, DropdownMenu, Slider, Confirm, RecommendColors },
         props: {
             value: {
                 type: String
@@ -33,11 +44,21 @@
                 type: Boolean,
                 default: false
             },
+            recommend: {
+                type: Boolean,
+                default: false
+            },
             format: {
                 validator (value) {
                     return oneOf(value, ['hsl', 'hsv', 'hex', 'rgb']);
                 }
             },
+            colors: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
             disabled: {
                 type: Boolean,
                 default: false
@@ -61,7 +82,31 @@
         data () {
             return {
                 prefixCls: prefixCls,
-                currentValue: this.value
+                currentValue: this.value,
+                hueNumber: 0,
+                alphaNumber: 0,
+                recommendedColor: [
+                    '#2d8cf0',
+                    '#19be6b',
+                    '#ff9900',
+                    '#ed3f14',
+                    '#00b5ff',
+                    '#19c919',
+                    '#f9e31c',
+                    '#ea1a1a',
+                    '#9b1dea',
+                    '#00c2b1',
+                    '#ac7a33',
+                    '#1d35ea',
+                    '#42bd82',
+                    '#f16b62',
+                    '#ea4ca3',
+                    '#0d94aa',
+                    '#febd79',
+                    '#3b90fc',
+                    '#000000',
+                    '#ffffff'
+                ]
             };
         },
         computed: {

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

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <template v-for="(item, index) in list">
+            <span><em :style="{'background': item}"></em></span>
+            <br v-if="(index + 1) % 10 === 0 && index !== 0 && (index + 1) !== list.length">
+        </template>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            list: Array
+        },
+        data () {
+            return {
+
+            };
+        },
+        methods: {
+
+        }
+    };
+</script>

src/styles/components/color-picker.less

@@ -21,4 +21,45 @@
         height: 14px;
         top: 3px;
     }
+
+    &-picker{
+        padding: 8px 8px 0;
+        &-panel{
+            width: 200px;
+            height: 200px;
+            margin: 0 auto;
+            background: #47cb89;
+            border-radius: 50%;
+        }
+        &-hue-slider{
+
+        }
+        &-alpha-slider{
+
+        }
+        &-colors{
+            margin-top: 8px;
+            span{
+                display: inline-block;
+                width: 18px;
+                height: 18px;
+                em{
+                    display: block;
+                    width: 16px;
+                    height: 16px;
+                    border: 1px solid transparent;
+                    cursor: pointer;
+                    border-radius: 2px;
+                }
+            }
+        }
+        &-colors-recommended{
+            span:last-child em{
+                border: 1px solid #6b6f78;
+            }
+        }
+        .@{picker-prefix-cls}-confirm{
+            margin-top: 8px;
+        }
+    }
 }