<template>
<div style="width: 800px;margin: 0 auto;">
<br>
<br>
<br>
<!-- 输入框 -->
<el-input v-model="input" placeholder="请输入内容" @keyup.enter.native="search" @input="removeVal" :suffix-icon="input == '' ? 'el-icon-search' : ''" clearable></el-input>
<!-- 表 -->
<div v-loading="loading" style="width: 800px;height: 300px;">
<div v-for="(item,index) in list" :key="index">
<h1 style="text-align: left;" v-html="handleSearch(item.title)"></h1>
<div style="text-align: left;">
<span v-html="handleSearch('描述:')"></span>
<span v-html="handleSearch(item.desc)" style="margin-right: 80px;"></span>
<span v-html="handleSearch('角色:')"></span>
<span v-html="handleSearch(item.role)"></span>
</div>
<hr style="margin-top: 8px;">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
input:'',
list:[],
loading:false,
}
},
mounted(){
},
computed:{
},
methods:{
// 输入事件
removeVal(val){
if(val == ''){
this.list = []
}
},
// 回车
search(){
this.loading = true
this.list = []
var arr = [
{
title:'你好',
desc:'青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪',
role:'admin'
},
{
title:'测试',
desc:'少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉',
role:'test'
},
]
setTimeout(()=>{
this.list = arr
this.loading = false
},800)
},
// 关键字高亮
handleSearch(val){
const regExp = new RegExp(this.input, 'ig')
return val.replace(regExp, `<span style="color: red;">${this.input}</span>`)
}
},
}
</script>
<style scoped>
</style>