feat: 添加独立搜索按钮,移除输入框内搜索图标
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="search-filter-bar">
|
||||
<div class="search-input-wrapper">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入关键词搜索项目"
|
||||
@@ -8,13 +9,9 @@
|
||||
class="search-input"
|
||||
@keyup.enter.native="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
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user