From d8b8fcdca3eff61c919c9366998749e1cfb58860 Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Mon, 30 Nov 2020 19:41:09 +0800
Subject: [PATCH] =?UTF-8?q?fix(h5):=20=E4=BF=AE=E5=A4=8D=E9=9D=9E=E8=B0=83?=
 =?UTF-8?q?=E8=AF=95=E6=A8=A1=E5=BC=8F=E4=B8=8B=20chrome=20=E5=86=85?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E7=B1=BB=E5=9E=8B=20picker=20=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E4=B8=8D=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../h5/view/components/picker/index.vue       | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/platforms/h5/view/components/picker/index.vue b/src/platforms/h5/view/components/picker/index.vue
index e31da8a2f..56b468a3d 100644
--- a/src/platforms/h5/view/components/picker/index.vue
+++ b/src/platforms/h5/view/components/picker/index.vue
@@ -16,6 +16,7 @@
           v-show="visible"
           class="uni-mask uni-picker-mask"
           @click="_cancel"
+          @mousemove="_fixInputPosition"
         />
       </transition>
       <div
@@ -88,6 +89,7 @@
     <div
       v-if="system"
       class="uni-picker-system"
+      @mousemove="_fixInputPosition"
     >
       <input
         ref="input"
@@ -598,6 +600,15 @@ export default {
       this.$nextTick(() => {
         this._change()
       })
+    },
+    _fixInputPosition ($event) {
+      if (this.system === 'chrome') {
+        const rect = this.$el.getBoundingClientRect()
+        const style = this.$refs.input.style
+        const fontSize = 32
+        style.left = `${$event.clientX - rect.left - fontSize * 1.5}px`
+        style.top = `${$event.clientY - rect.top - fontSize * 0.5}px`
+      }
     }
   }
 }
@@ -738,6 +749,8 @@ uni-picker[disabled] {
   border: none;
   height: 100%;
   opacity: 0;
+  /* Chrome 无效 */
+  cursor: pointer;
 }
 
 .uni-picker-system > input.firefox {
@@ -747,12 +760,12 @@ uni-picker[disabled] {
 }
 
 .uni-picker-system > input.chrome {
-  /* 翻转且使用较大字体保证可点击日历按钮 */
+  /* 日历空白位置宽度 32px */
   top: 0;
-  right: 100%;
-  font-size: 9999px;
-  transform-origin: 100% 0;
-  transform: scaleX(-1);
+  left: 0;
+  width: 2em;
+  font-size: 32px;
+  height: 32px;
 }
 
 @media screen and (min-width: 500px) and (min-height: 500px) {
-- 
GitLab