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

ElemeFE · Aug 15, 2018 · 50d6ff1 · 50d6ff1
1 parent b70da53
commit 50d6ff1
Showing 1 changed file with 9 additions and 2 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();
+        // 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;