高亮.png
关键 名字的显示/下拉框显示用到v-html
下拉框
<el-autocomplete ref="search" v-model="key" :fetch-suggestions="querySearch" :trigger-on-focus="false" class="input-button" :class="{ trans: isTrans }" :popper-append-to-body="false" @select="handleSelect" @keyup.native="isTrans = true" @keyup.enter.native="search">
<ul slot-scope="{ item }">
<li>
<span v-html="brightenKeyword(item.value, key)"></span>
</li>
</ul>
<el-button slot="append" :disabled="searching" type="primary" @click="search"><span style="margin-right: 10px">搜</span>索</el-button>
</el-autocomplete>
高亮方法
//下拉框关键字高亮
brightenKeyword(val, keyword) {
const Reg = new RegExp(keyword, 'g')
if (val) {
return val.replace(
Reg,
`<span style="color: rgba(68,139,255,1)">${keyword}</span>`
)
}
},
搜索内容高亮
在调用后台接口得到搜索数据时，把数据里的Name字段替换掉
//视频里关键字高亮
match(arr) {
let str = this.key
str = str
.replace(/\+/g, '\\+')
.replace(/\./g, '\\.')
.replace(/\(/g, '\\(')
.replace(/\)/g, '\\)')
.replace(/\^/g, '\\^')
.replace(/\|/g, '\\|')
.replace(/\$/g, '\\$')
let reg = `/${str}/g`
for (let i = 0; i < arr.length; i++) {
let item = arr[i]
item.lightName = item.Name.replace(
eval(reg),
`<span style='color:rgba(44,91,232,1)' >${this.key}</span>`
)
}
},
