feat: 添加独立搜索按钮,移除输入框内搜索图标

This commit is contained in:
wkc
2026-02-28 10:49:17 +08:00
parent fa28351ac2
commit bcabc2a240

View File

@@ -1,20 +1,17 @@
<template>
<div class="search-filter-bar">
<el-input
v-model="searchKeyword"
placeholder="请输入关键词搜索项目"
clearable
size="small"
class="search-input"
@keyup.enter.native="handleSearch"
@clear="handleSearch"
>
<i
slot="suffix"
class="el-icon-search search-icon"
@click="handleSearch"
<div class="search-input-wrapper">
<el-input
v-model="searchKeyword"
placeholder="请输入关键词搜索项目"
clearable
size="small"
class="search-input"
@keyup.enter.native="handleSearch"
@clear="handleSearch"
/>
</el-input>
<el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
</div>
<div class="tab-filters">
<div
v-for="tab in tabs"
@@ -102,20 +99,15 @@ export default {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.search-input {
width: 240px;
height: 40px;
.search-input-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.search-icon {
cursor: pointer;
color: #909399;
transition: color 0.2s;
margin-right: 8px;
&:hover {
color: #3B82F6;
}
.search-input {
width: 240px;
// Let Element UI's size="small" control the height naturally
}
.tab-filters {