注意:数据是模拟的,搜索框我用的vant组件,你可以改成input输入框或者下载vant包,导入vant中的Search和Toast组件。(代码直接复制到vue文件中)
<template>
<div>
<h1>移动端搜索</h1>
<div class="search">
<van-search
v-model="value"
show-action
:clearable="false"
placeholder="请输入搜索关键词"
@search="onSearch"
@input="onInput"
>
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
<div>
<ul>
<template v-if="dataList.length > 0">
<li v-for="(item, index) in dataList" :key="index" v-html="item" />
</template>
<template v-else-if="show && dataList.length == 0">
<li>暂无数据</li>
</template>
<template v-else-if="!show">
<li v-for="(item, index) in data" :key="index">名字:{{ item.name }} 年龄:{{ item.age }}</li>
</template>
</ul>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { Search, Toast } from 'vant'
Vue.use(Search).use(Toast)
export default {
data() {
return {
value: '',
dataList: [],
show: false,
data: [
{
name: '小红',
age: '23'
}, {
name: '小名',
age: '21'
}, {
name: '小黑',
age: '20'
}, {
name: '黑蛋',
age: '22'
}, {
name: '小天',
age: '19'
}
]
}
},
mounted() {},
created() {},
methods: {
onSearch(val) {
this.dataList = []
// 匹配关键字正则
const replaceReg = new RegExp(val, 'g')
// 高亮替换v-html值
const replaceString = `<span style="color:red">${val}</span>`
this.data.forEach((item, index) => {
if (item.name.includes(val)) {
// this.dataList.push(item.name.replace(replaceReg, replaceString))
// 需要的格式: '名字:小<span style="color:red">红</span> 年龄:21'
this.dataList.push('名字:' + item.name.replace(replaceReg, replaceString) + '<span style="margin-left: 15px;">年龄:</span>' + item.age)
} else if (item.age.includes(val)) {
this.dataList.push('名字:' + item.name + '<span style="margin-left: 15px;">年龄:</span>' + item.age.replace(replaceReg, replaceString))
}
})
console.log(this.dataList)
},
onInput() {
if (this.value) {
this.onSearch(this.value)
this.show = true
} else {
this.show = false
this.dataList = []
}
}
}
}
</script>
<style lang="scss" scoped>
.search {
padding: 30px 0px;
flex-direction: column;
align-content: flex-start;
max-width: 400px;
height: 70vh;
border: 1px solid #000;
margin: auto;
display: flex;
ul {
margin-left: 35px;
li {
list-style-type: none;
font-size: 14px;
line-height: 25px;
color: #787373;
}
}
}
::v-deep {
.van-search {
display: flex;
height: 25px;
display: flex;
justify-content: center;
input::-webkit-input-placeholder{
font-size: 12px;
}
.van-field__body {
input {
padding: 2px;
box-sizing: border-box;
}
}
:focus-visible {
outline: none;
}
.van-search__action {
border: 1px solid;
padding: 2px;
box-sizing: border-box;
margin-left: 15px;
background: #f7f7f7;
cursor: pointer
}
}
}
</style>