From b6bda1dcb5654a238e5222276603505447655074 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Wed, 16 Aug 2017 13:52:50 +0800
Subject: [PATCH] update ColorPicker
---
examples/routers/color-picker.vue | 10 +++++++++-
src/components/color-picker/color-picker.vue | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
src/components/input/input.vue | 2 +-
src/styles/components/color-picker.less | 9 ++++++++-
4 files changed, 100 insertions(+), 8 deletions(-)
diff --git a/examples/routers/color-picker.vue b/examples/routers/color-picker.vue
index 5bc4676..f0091b0 100644
--- a/examples/routers/color-picker.vue
+++ b/examples/routers/color-picker.vue
@@ -1,5 +1,13 @@
<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 {
diff --git a/src/components/color-picker/color-picker.vue b/src/components/color-picker/color-picker.vue
index 5bc4676..7a62808 100644
--- a/src/components/color-picker/color-picker.vue
+++ b/src/components/color-picker/color-picker.vue
@@ -1,13 +1,90 @@
<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
diff --git a/src/components/input/input.vue b/src/components/input/input.vue
index c05f739..f13d072 100644
--- a/src/components/input/input.vue
+++ b/src/components/input/input.vue
@@ -74,7 +74,7 @@
},
size: {
validator (value) {
- return oneOf(value, ['small', 'large']);
+ return oneOf(value, ['small', 'large', 'default']);
}
},
placeholder: {
diff --git a/src/styles/components/color-picker.less b/src/styles/components/color-picker.less
index 72cfa9a..8c0991f 100644
--- a/src/styles/components/color-picker.less
+++ b/src/styles/components/color-picker.less
@@ -1,5 +1,12 @@
@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
--
libgit2 0.21.4