Merge pull request #461 from lockiechen/staging

bugfix(input): Search没有按规范实现
TencentBlueKing · Dec 4, 2023 · 9bf7f40 · 9bf7f40
2 parents 1022dd2 + 0e3620d
commit 9bf7f40
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git 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
@@ -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
@@ -163,6 +163,13 @@
             }
         }
     }
+
+    .input-right-icon {
+        cursor: pointer;
+        &:hover {
+            color: $primaryColor;
+        }
+    }
 }
 
 .bk-form-input,