color-picker: 一些情况下取色光标定位不准问题修复

ElemeFE · Aug 15, 2018 · 4f0dcde · 4f0dcde
1 parent b70da53
commit 4f0dcde
Showing 1 changed file with 10 additions and 3 deletions.
diff --git 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();
-
-        if (!height) height = width * 3 / 4;
+        // let { width, height } = el.getBoundingClientRect();
+
+        // if (!height) height = width * 3 / 4; 
+        // 的宽高比应为 14/9 , 非 4/3
+        
+        /*
+          此处无需使用 getBoundingClientRect , 
+          直接使用 clientWidth , clientHeight, 且不受 CSS transform 影响, 动画期间也能正常获取
+        */
+        let { clientWidth: width, clientHeight: height } = el;
 
         this.cursorLeft = saturation * width / 100;
         this.cursorTop = (100 - value) * height / 100;