update ColorPicker

梁灏
1 parent 5a9cda85
Showing 4 changed files with 100 additions and 8 deletions Show diff stats
examples/routers/color-picker.vue
src/components/color-picker/color-picker.vue
src/components/input/input.vue
src/styles/components/color-picker.less
 <template>
-
+    <div style="margin: 100px;">
+        <!--<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 placement="bottom-start" size="default"></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>-->
+    </div>
 </template>
 <script>
     export default {
 <template>
-
+    <Dropdown trigger="click" :transfer="transfer" :placement="placement">
+        <div :class="wrapClasses">
+            <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
+            <div :class="inputClasses">
+                <div :class="[prefixCls + '-color']" style="background-color: rgb(32, 160, 255);"></div>
+            </div>
+        </div>
+        <Dropdown-menu slot="list">
+            <p>常用于各种自定义下拉内容的场景。</p>
+            <div style="text-align: right;margin:10px;">
+                <Button type="primary">关闭</Button>
+            </div>
+        </Dropdown-menu>
+    </Dropdown>
 </template>
 <script>
+    import Dropdown from '../dropdown/dropdown.vue';
+    import DropdownMenu from '../dropdown/dropdown-menu.vue';
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-color-picker';
+    const inputPrefixCls = 'ivu-input';
+
     export default {
-        props: {},
+        name: 'ColorPicker',
+        components: { Dropdown, DropdownMenu },
+        props: {
+            value: {
+                type: String
+            },
+            alpha: {
+                type: Boolean,
+                default: false
+            },
+            format: {
+                validator (value) {
+                    return oneOf(value, ['hsl', 'hsv', 'hex', 'rgb']);
+                }
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large', 'default']);
+                }
+            },
+            placement: {
+                validator (value) {
+                    return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
+                },
+                default: 'bottom'
+            },
+            transfer: {
+                type: Boolean,
+                default: false
+            }
+        },
         data () {
-            return {};
+            return {
+                prefixCls: prefixCls,
+                currentValue: this.value
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-rel`,
+                    `${inputPrefixCls}-wrapper`,
+                    `${inputPrefixCls}-wrapper-${this.size}`
+                ];
+            },
+            inputClasses () {
+                return [
+                    `${prefixCls}-input`,
+                    `${inputPrefixCls}`,
+                    `${inputPrefixCls}-${this.size}`,
+                    {
+                        [`${inputPrefixCls}-disabled`]: this.disabled
+                    }
+                ];
+            }
         },
-        computed: {},
-        methods: {}
+        methods: {
+
+        }
     };
 </script>
 \ No newline at end of file
@@ -74,7 +74,7 @@
             },
             size: {
                 validator (value) {
-                    return oneOf(value, ['small', 'large']);
+                    return oneOf(value, ['small', 'large', 'default']);
                 }
             },
             placeholder: {
 @color-picker-prefix-cls: ~"@{css-prefix}color-picker";
  
 .@{color-picker-prefix-cls} {
-
+    &-rel{
+        line-height: 0;
+    }
+    &-color{
+        width: 20px;
+        height: 100%;
+        border: 1px solid @text-color;
+    }
 }
 \ No newline at end of file