搜索框组件代码:
<!-- 基础搜索组件。 -->
<template>
<div class="search_wrap" :style="searchWrapStyle">
<!-- 搜索栏 -->
<header class="searchBox">
<input
type="text"
class="input"
:placeholder="placeholder"
v-model="searchValue"
@keyup.enter="handleSearch"
/>
<div class="close" @click="clear">x</div>
<button class="btn-search" @click="handleSearch">{{searchButtonText}}</button>
</header>
<!-- tab栏 -->
<div class="navtab" v-if="tabList.length > 0">
<ul class="navwrap">
<span
class="tabitem"
v-for="(item, index) in tabList"
:key="index"
@click="changeTab(index, item.value)"
>
<span :class="{ active: tabChosen == index }">{{ item.name }}</span>
</span>
</ul>
</div>
</div>
</template>
<script>
export default {
name: '',
components: {},
props: {
// 是否允许输入空值。默认不能。
couldEmpty: {
type: Boolean,
default: false
},
searchWrapStyle: {
type: Object,
default () {
return {
backgroundColor: '#fff'
}
}
},
searchButtonText: {
type: String,
default: '搜索'
},
placeholder: {
type: String,
default: '请输入关键字'
},
// tab栏的数据
tabList: {
type: Array,
default () {
return []
}
}
},
data () {
return {
searchValue: ''
}
},
// 方法集合
methods: {
clear () {
this.searchValue = ''
},
// 搜索
handleSearch () {
console.log('handleSearch')
if (this.searchValue == '' && !this.couldEmpty) {
this.$toast({
message: '请输入关键词!',
position: 'middle'
})
return
}
this.loadList()
},
changeTab (index, value) {
this.tabChosen = index
this.loadList()
},
loadList () {
this.$emit('handSearch', this.searchValue)
}
}
}
</script>
<style rel='stylesheet/less' lang='less' scoped>
//@import url(); 引入公共css类
.search_wrap {
.searchBox {
position: relative;
width: 100%;
height: 1.25rem;
overflow: hidden;
display: flex;
align-items: center;
/* 输入框 */
.input {
margin-left: 0.3rem;
background: #f8f8f8;
border: 1px solid #dcdcdc;
border-radius: 30px;
border-radius: 30px;
display: block;
flex: 1;
height: 0.65rem;
border-radius: 0.3rem;
overflow: hidden;
padding: 0 0.5rem;
font-size: 0.26rem;
}
.close {
width: 0.33rem;
height: 0.33rem;
line-height: 0.33rem;
text-align: center;
background-color: #c8c8c8;
border-radius: 50%;
transform: translateX(-0.65rem);
color: #fff;
}
/* 搜索按钮 */
.btn-search {
display: block;
width: 1.14rem;
height: 100%;
font-size: 0.32rem;
color: #414141;
}
}
.navtab {
width: 100%;
height: 0.7rem;
background: #fff;
// display: flex;
.navwrap {
font-size: 0.26rem;
width: 100%;
color: #c2c2c2;
white-space: nowrap;
overflow-x: auto;
// display: flex;
// justify-content: space-around;
span.tabitem {
// width: 25%;
//
margin-left: 0.6rem;
font-size: 0.26rem;
height: 0.7rem;
line-height: 0.7rem;
display: inline-block;
text-align: center;
span {
display: inline-block;
height: 100%;
}
span.active {
box-sizing: border-box;
border-bottom: 0.04rem solid @theme;
color: @theme;
}
}
span.tabitem:nth-last-of-type(1) {
margin-right: 0rem;
}
li:nth-of-type(5) {
margin-right: 0rem;
}
}
}
}
</style>
使用时的代码(已省略部分无关代码):
<!-- 终端号码搜索 -->
<template>
<container class="query">
<common-header slot="header" title="终端型号" />
<base-search
searchButtonText="查询"
placeholder="请输入终端型号"
slot="header"
:could-empty="true"
@handSearch="getSearchTerminalList"
></base-search>
<div class="content">
<div class="lsit_wrap">
<div
class="item_wrap"
@click="handSearch(item)"
v-for="(item, i) of searchTerminalList"
:key="item.prizeCode"
>
<div class="index">{{i + 1}}</div>
<div class="text">{{item.name}}</div>
</div>
</div>
</div>
</container>
</template>
<script>
import BaseSearch from '@/components/base/BaseSearch'
import { mapGetters } from 'vuex'
export default {
name: '',
components: { BaseSearch },
data () {
return {
searchKey: '',
originTerminalNumberData: [],
businessCodeTerminalList: [],
searchTerminalList: []
}
},
computed: {
},
watch: {},
// 方法集合
methods: {
...
// 通过businessCode,筛选前面数据字典获取的终端号码集合。
getSearchTerminalList (searchValue) {
console.log('开始搜索')
this.searchTerminalList = this.businessCodeTerminalList.filter(item =>
item.name.includes(searchValue)
)
}
},
}
</script>