vue前端模糊搜索高亮的一种实现
最终效果是这样的: 思路是:1、写一个方法过滤每一组字符串,需要高亮的加高亮的class2、过滤器方法返回 html字符串3、通过v-html将返回作为HTML标签解析后输出过滤器代码:export function highLightTableMsg(msg, highLightStr) {if (msg == null) {msg = ''}...
·
最终效果是这样的:
思路是:
1、写一个方法过滤每一组字符串,需要高亮的加高亮的class
2、过滤器方法返回 html字符串
3、通过v-html将返回作为HTML标签解析后输出
过滤器代码:
export function highLightTableMsg(msg, highLightStr) {
if (msg == null) {
msg = ''
}
if (highLightStr == null) {
highLightStr = ''
}
if (msg instanceof Object) {
msg = JSON.stringify(msg)
}
if (highLightStr instanceof Object) {
highLightStr = JSON.stringify(highLightStr)
}
if (!(msg instanceof String)) {
msg = msg.toString()
}
if (!(highLightStr instanceof String)) {
highLightStr = highLightStr.toString()
}
var htmlStr = ''
if (highLightStr.length > 0) {
if (msg.indexOf(highLightStr) !== -1) {
assemblyStr(msg, highLightStr)
} else {
htmlStr = '<span>' + msg + '</span>'
}
} else {
htmlStr = '<span>' + msg + '</span>'
}
function assemblyStr(msgAssembly, highLightAssembly) {
if (msgAssembly.indexOf(highLightAssembly) !== -1) {
var length = highLightAssembly.length
var start = msgAssembly.indexOf(highLightAssembly)
htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span class="log-hight-light">' + highLightAssembly + '</span>'
msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
assemblyStr(msgAssembly, highLightAssembly)
} else {
htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
}
}
return htmlStr
}
第一个参数是待搜索的字符串,第二个参数是要高亮的字符串
css中加一个高亮样式:
.log-hight-light{
color: #ffe72d;
}
在页面上这样使用:
导入这个过滤器方法
import { highLightTableMsg } from '@/filters/index'
页面上定义一个方法
highLight(item, highLight) {
return highLightTableMsg(item, highLight)
}
html中使用:
<div class="miniresult" v-for="item in messages">
message:<span v-html="highLight(item, formData.msg)"></span>
</div>
如果您觉得这篇文章帮助到了您,可以留下您的评论或者捐赠支持一下。
一分两分也是爱,给点鼓励也不赖 。
更多推荐
已为社区贡献4条内容
所有评论(0)