From 6122a050927f064c5a62799af45c78dbd01aa275 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 6 Nov 2022 12:30:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=96=E8=89=B2=E5=99=A8=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=80=8F=E6=98=8E=E8=89=B2=E9=A2=84=E8=AE=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorPicker/index.vue | 33 ++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index cb650be9..1b5588a1 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -21,6 +21,9 @@
     <div class="picker-field">
       <EditableInput class="input" :value="color" @colorChange="value => changeColor(value)" />
       <div class="straw" @click="openEyeDropper()"><IconNeedle /></div>
+      <div class="transparent" @click="selectPresetColor('#00000000')">
+        <Checkboard />
+      </div>
     </div>
 
     <div class="picker-presets">
@@ -357,15 +360,41 @@ const customEyeDropper = () => {
   display: flex;
   margin-bottom: 8px;
 
+  .transparent {
+    width: 24px;
+    height: 24px;
+    margin-top: 4px;
+    margin-left: 8px;
+    position: relative;
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      width: 26px;
+      height: 2px;
+      position: absolute;
+      top: 11px;
+      left: -1px;
+      transform: rotate(-45deg);
+      background-color: #f00;
+    }
+
+    .checkerboard {
+      background-size: auto;
+    }
+  }
+
   .straw {
     width: 24px;
     height: 24px;
     margin-top: 4px;
-    margin-left: 4px;
+    margin-left: 8px;
     display: flex;
-    justify-content: flex-end;
+    justify-content: center;
     align-items: center;
     font-size: 20px;
+    background-color: #f5f5f5;
+    outline: 1px solid #f1f1f1;
     cursor: pointer;
   }
   .input {