修复取色框点击位置错乱问题

package.json

@@ -2,7 +2,7 @@
   "name": "svelma-pro",
   "svelte": "src/index.js",
   "description": "Based on svelma project extension and modification",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "author": "KeiferJu",
   "license": "MIT",
   "keywords": [

src/components/ColorPicker/ColorPicker.svelte

@@ -19,13 +19,14 @@
   let focusStatus = false
   function openChrome(event) {
     focusStatus = true
+    panelX = event.clientX - event.offsetX
+    panelY = event.clientY
+    transformX = event.target.offsetWidth + 5
+    console.log(event)
     if (!active) {
-      panelX = event.clientX - event.offsetX
+      setTimeout(() => {
-      panelY = event.clientY
-      transformX = event.target.offsetWidth + 5
-      setTimeout(()=>{
         active = true
-      },100)
+      }, 100)
     }
   }
 
@@ -65,16 +66,23 @@
 <svelte:window on:click={closeChrome} />
 {#if mode === 1}
   <div class="smx-color-picker" style="width: {width}">
-    <input type="text" class="input" on:focus={openChrome} on:blur={()=>focusStatus = false} value={color} style="background: {color};" readonly />
+    <input
+      type="text"
+      class="input"
+      on:click={openChrome}
+      on:blur={() => (focusStatus = false)}
+      value={color}
+      style="background: {color};"
+      readonly />
     {#if active}
       <div
         class="smx-color-panel"
         on:click|stopPropagation
         style="top: {panelY}px;left:{panelX}px;transform: translate({transformX}px, -50%)">
-        <Chrome startColor={color} on:input={handleInput} {fieldsIndex} on:mouseupEvent={mouseupEvent}/>
+        <Chrome startColor={color} on:input={handleInput} {fieldsIndex} on:mouseupEvent={mouseupEvent} />
       </div>
     {/if}
   </div>
 {:else}
-  <Chrome startColor={color} on:input={handleInput} {fieldsIndex}  on:mouseupEvent={mouseupEvent}/>
+  <Chrome startColor={color} on:input={handleInput} {fieldsIndex} on:mouseupEvent={mouseupEvent} />
 {/if}