<template>
|
<div class="search-container">
|
<el-select
|
v-model="selectedType"
|
slot="prepend"
|
placeholder="请选择"
|
class="type-select"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<div class="inputBox">
|
<input type="text" v-model="searchText" class="search-input" />
|
<div class="searchBtn">搜索</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "SearchBox",
|
data() {
|
return {
|
searchText: "", // 输入框内容
|
selectedType: "", // 下拉框选中值
|
options: [
|
// 下拉选项
|
{ value: "all", label: "全部" },
|
{ value: "name", label: "名称" },
|
{ value: "id", label: "ID" },
|
{ value: "code", label: "编码" },
|
],
|
};
|
},
|
methods: {
|
// 搜索处理
|
handleSearch() {
|
this.$emit("search", {
|
text: this.searchText,
|
type: this.selectedType,
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
/* 组合样式 */
|
.search-container {
|
max-width: 800px;
|
display: flex;
|
align-items: center;
|
background-color: #fff;
|
}
|
|
/* 输入框样式 */
|
.search-input {
|
background-color:transparent;
|
|
}
|
|
.inputBox {
|
border: 1px solid #B9A587;
|
height: 38px;
|
width: 400px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-right: 5px;
|
border-radius: 5px;
|
border-top-left-radius: 0;
|
border-bottom-left-radius: 0;
|
padding-left: 10px;
|
}
|
|
.searchBtn {
|
width: 70px;
|
height: 30px;
|
background-color: #937950;
|
margin-left: 10px;
|
cursor: pointer;
|
font-size: 14px;
|
text-align: center;
|
line-height: 30px;
|
color: #fff;
|
}
|
|
/* 下拉框样式 */
|
.type-select {
|
width: 120px;
|
}
|
|
/* 调整间距 */
|
.el-select /deep/ .el-input__inner {
|
border-top-right-radius: 0;
|
border-bottom-right-radius: 0;
|
border: 1px solid #B9A587;
|
background-color: transparent;
|
border-right: none;
|
|
}
|
|
.el-input-group__prepend {
|
padding: 0;
|
border: none;
|
}
|
</style>
|
