From f1b483a91a6bf4471bdfc8fe96ba88294e684cf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Sun, 4 Mar 2018 13:51:22 +0800 Subject: [PATCH] ColorPicker: support hsl/hsv model input (#9991) --- packages/color-picker/src/color.js | 6 +++--- .../src/components/picker-dropdown.vue | 21 +------------------ 2 files changed, 4 insertions(+), 23 deletions(-) diff --git a/packages/color-picker/src/color.js b/packages/color-picker/src/color.js index 93d603866..a33e9482f 100644 --- a/packages/color-picker/src/color.js +++ b/packages/color-picker/src/color.js @@ -202,9 +202,9 @@ export default class Color { } const fromHSV = (h, s, v) => { - this._hue = h; - this._saturation = s; - this._value = v; + this._hue = Math.max(0, Math.min(360, h)); + this._saturation = Math.max(0, Math.min(100, s)); + this._value = Math.max(0, Math.min(100, v)); this.doOnChange(); }; diff --git a/packages/color-picker/src/components/picker-dropdown.vue b/packages/color-picker/src/components/picker-dropdown.vue index 9cd193a75..97122b2be 100644 --- a/packages/color-picker/src/components/picker-dropdown.vue +++ b/packages/color-picker/src/components/picker-dropdown.vue @@ -84,26 +84,7 @@ }, handleConfirm() { - const valid = this.showAlpha ? this.validRGBA(this.customInput) : this.validRGBHex(this.customInput); - if (valid) { - this.color.fromString(this.customInput); - } else { - this.customInput = this.currentColor; - } - }, - - validRGBHex(color) { - return /^#[A-Fa-f0-9]{6}$/.test(color); - }, - - validRGBA(color) { - const matches = color.match(/^rgba\((\d+), ?(\d+), ?(\d+), ?([.0-9]+)\)$/); - if (!matches) return false; - const list = matches.map(v => parseInt(v, 10)).slice(1); - if (list.some(v => isNaN(v))) return false; - const [r, g, b, a] = list; - if ([r, g, b].some(v => v < 0 || v > 255) || a < 0 || a > 1) return false; - return true; + this.color.fromString(this.customInput); } },