From 0e3620d8aae0ba80965f7cd99562b0aa989cc2e5 Mon Sep 17 00:00:00 2001
From: lockiechen <33082528+lockiechen@users.noreply.github.com>
Date: Thu, 30 Nov 2023 16:22:24 +0800
Subject: [PATCH] =?UTF-8?q?bugfix(input):=20Search=E6=B2=A1=E6=9C=89?=
 =?UTF-8?q?=E6=8C=89=E8=A7=84=E8=8C=83=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/components/input/readme.md | 21 +++++++++++++++++++++
 src/components/input/input.vue     |  6 +++---
 src/ui/input.css                   |  7 +++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/example/components/input/readme.md b/example/components/input/readme.md
index 6b812a6..72be753 100644
--- a/example/components/input/readme.md
+++ b/example/components/input/readme.md
@@ -59,6 +59,9 @@
             cursor: pointer;
         }
     }
+    .btn-search-input {
+        display: flex;
+    }
 </style>
 
 [[toc]]
@@ -332,6 +335,21 @@
             v-model="value"
             @right-icon-click="handlerIconClick">
         </bk-input>
+        <div class="btn-search-input mt10">
+            <bk-input
+                clearable
+                :placeholder="'搜索'"
+            >
+            <span slot="append"></span>
+            </bk-input>
+            <bk-button
+                theme="primary"
+                style="margin-left: -2px; border-radius: 0 2px 2px 0"
+                @click="handlerIconClick"
+            >
+                搜索
+            </bk-button>
+        </div>
     </div>
 </template>
 <script>
@@ -358,6 +376,9 @@
     .input-demo {
         width: 500px;
     }
+    .btn-search-input {
+        display: flex;
+    }
 </style>
 ```
 :::
diff --git a/src/components/input/input.vue b/src/components/input/input.vue
index dc27e4b..05a1979 100644
--- a/src/components/input/input.vue
+++ b/src/components/input/input.vue
@@ -103,8 +103,8 @@
           ? inputPasswordIcon[0]
           : inputPasswordIcon[1]
       ]"></i>
-      <i @click.stop.prevent="handlerClear" class="bk-icon icon-close-circle-shape clear-icon ml5" v-if="showClearIcon"></i>
-      <i :class="['bk-icon', rightIcon]" v-else-if="rightIcon"></i>
+      <i v-if="showClearIcon" @click.stop.prevent="handlerClear" class="bk-icon icon-close-circle-shape clear-icon ml5 mr5"></i>
+      <i :class="['input-right-icon', 'bk-icon', rightIcon]" v-if="rightIcon"></i>
       <template v-if="type === 'text'">
         <p class="bk-limit-box ml5" style="position: static" v-show="showInputWordLimit">
           <span class="strong">{{ (curValue && curValue.length) || 0 }}</span
@@ -140,8 +140,8 @@
     </bk-input>
   */
 import emitter from '@/mixins/emitter'
-import locale from 'bk-magic-vue/lib/locale'
 import { getStyle } from '@/utils/dom'
+import locale from 'bk-magic-vue/lib/locale'
 
 // const toString = Object.prototype.toString
 
diff --git a/src/ui/input.css b/src/ui/input.css
index 277cacb..ab66742 100644
--- a/src/ui/input.css
+++ b/src/ui/input.css
@@ -163,6 +163,13 @@
             }
         }
     }
+
+    .input-right-icon {
+        cursor: pointer;
+        &:hover {
+            color: $primaryColor;
+        }
+    }
 }
 
 .bk-form-input,