From 50d6ff154da492310c7c9d83238ac6e277eedd96 Mon Sep 17 00:00:00 2001
From: cnwhy <w.why@163.com>
Date: Wed, 15 Aug 2018 15:48:01 +0800
Subject: [PATCH] =?UTF-8?q?color-picker:=20=E4=B8=80=E4=BA=9B=E6=83=85?=
 =?UTF-8?q?=E5=86=B5=E4=B8=8B=E5=8F=96=E8=89=B2=E5=85=89=E6=A0=87=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E4=B8=8D=E5=87=86=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/color-picker/src/components/sv-panel.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/color-picker/src/components/sv-panel.vue b/packages/color-picker/src/components/sv-panel.vue
index be670080d3..bb4244bd30 100644
--- a/packages/color-picker/src/components/sv-panel.vue
+++ b/packages/color-picker/src/components/sv-panel.vue
@@ -47,9 +47,16 @@
         const value = this.color.get('value');
 
         const el = this.$el;
-        let { width, height } = el.getBoundingClientRect();
+        // let { width, height } = el.getBoundingClientRect();
 
-        if (!height) height = width * 3 / 4;
+        // if (!height) height = width * 3 / 4;
+        // 的宽高比应为 14/9 (280*180), 非 4/3
+
+        /*
+          此处无需使用 getBoundingClientRect ,
+          直接使用 clientWidth , clientHeight 更好, 且不受 CSS transform 影响, 动画期间也能正常获取
+        */
+        let { clientWidth: width, clientHeight: height } = el;
 
         this.cursorLeft = saturation * width / 100;
         this.cursorTop = (100 - value) * height / 100;