uniapp搜索建议文字高亮

我是使用vanUI的单元格组件van-cell渲染的搜索建议列表ui
在这里插入图片描述

在里面设置一个插槽,值为title(替代van-cell的属性title)
在这里插入图片描述
想要高亮就要用指令v-html,v-html=的值可以设置,但关键字是不断变化的,所以:
设置一个方法,传入搜索关键字
在这里插入图片描述

不过,这是利用vant的组件来做的,我在很多地方不会用到他的组件其实,哈哈,比如uniapp,我用uniapp更喜欢自己封装组件自己用,所以要在别的地方使搜索词高亮可以对上面的方法做出一下修改:
首先,搜索建议列表是要做成子组件的,然后将请求来的搜索建议列表和搜索框中的搜索词传进去
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
搭好布局,渲染建议数组,设置自定义属性data-value为搜索词(为了保存为搜索历史和当作搜索词跳转到搜索结果页),我们用插槽slot。值=建议列表的建议词,v-html定义方法,将建议词传过去
在这里插入图片描述
在这里插入图片描述

这里,高亮颜色的css要定义在全局css文件中才生效。
在这里插入图片描述

然后是搜索历史和跳转
在这里插入图片描述

最终效果:
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值