0
点赞
收藏
分享

微信扫一扫

移动端uni-app小程序搜索高亮前端处理,同时可设置相关样式,兼顾性能

陬者 03-07 07:01 阅读 4

在uni-app中我们会遇到搜索高亮显示的需求

如下图:

在这里插入图片描述

起初用的是富文本实现

使用replaceAll方法取代搜索字段为一个 标签并设置相应的样式,但是小程序的并没有把 标签渲染出来,所以放弃了,下面原代码:

/* 搜索字体变色 */
export const searchColour = (text:string,searchKey:string)=>{
	return text.replaceAll(searchKey,`<text>${searchKey}</text>`)
}

用第三方库 mp-html 富文本组件

库的链接地址为:https://ext.dcloud.net.cn/plugin?id=805

这次将 渲染出来了,但里面的样式太难设置了,导致效果也不是很理想,所以放弃了

封装特定的高亮渲染组件

原理就是根据搜索字段,将渲染字符串转化为对象,标记高亮字段,然后分别渲染

下面上封装组件代码:

<template>
	<text v-for="item in renderString" :key="item.text" :class="{'high-light':item.highLight}">{{item.text}}
	</text>
</template>

<script setup lang='ts'>
	import {
		computed
	} from "vue";
	const props = withDefaults(defineProps < {
		textString: string,
		searchValue: string
	} > (), {

	})
	const renderString = computed(() => {
		return getTextObj(props.textString, props.searchValue)
	})
	function getTextObj(str: string, searchKey: string) {
        //const str = "这是一段需要高亮的文本!";
        // 将文本处理为如下格式:
        // const strObj = [
        //{text:"这是一段需要",highLight:false},
        //{text:"高亮",highLight:true},
        // {text:"的文本!",highLight:false},
        //]
	 	let strObj = [];
		let index = 0;
		while (index < str.length) {
			let pos = str.indexOf(searchKey, index);
			if (pos === -1) {
				strObj.push({
					text: str.slice(index),
					highLight: false
				});
				break;
			}
			strObj.push({
				text: str.slice(index, pos),
				highLight: false
			});
			strObj.push({
				text: searchKey,
				highLight: true
			});
			index = pos + searchKey.length;
		}
		return strObj;
	}
</script>

<style lang='scss' scoped>
	.high-light{
		color: #DF2D45;
	}
</style>

然后样式就比较好设置了

有帮助到你的话,点个赞吧!

在这里插入图片描述

举报

相关推荐

0 条评论