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

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

View File

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