小程序实现vue的v-html指令（仿微信搜索）

最新推荐文章于 2025-02-17 17:56:05 发布

竹叶轻拂水

最新推荐文章于 2025-02-17 17:56:05 发布

阅读量6k

点赞数 1

分类专栏：笔记项目文章标签：小程序

本文链接：https://blog.csdn.net/cbb_2313/article/details/103069960

版权

笔记同时被 2 个专栏收录

16 篇文章

订阅专栏

项目

2 篇文章

订阅专栏

小程序自己的<rich-text>组件：
组件的nodes属性就是要渲染的html格式的字符串，因为是渲染html格式，并不是小程序格式，所以该组件不识别<text></text>一类的标签，支持标签中含有class和style，但是不支持id属性，具体支持哪些标签，可以参考文档-微信文档
案例仿照了一个微信搜索的功能，用到了<rich-text>组件，具体如下：
在这里插入图片描述

      <!-- 弹性盒子布局 -->
      <view class="flex_box">
        <!-- 名字 -->
        <view class="name_box">
          <rich-text nodes="{{item.name}}"></rich-text>
        </view>
        <!-- 电话 -->
        <view class="phone_box">
          <rich-text nodes="{{item.phone}}"></rich-text>
        </view>
      </view>

在这里插入图片描述

 // 替换关键字为带标签的，实现关键字高亮显示
 arr.forEach(item => {
   item.name = item.name.replace(this.data.keyword, `<span class="high_light">${this.data.keyword}</span>`)
   item.phone = JSON.stringify(item.phone).replace(this.data.keyword, `<span class="high_light">${this.data.keyword}</span>`)
 })

在这里插入图片描述

.name_box .high_light,
.phone_box .high_light {
  color: #009BFF;
}

遍历过之后name和phone已经变成了html格式的字符串，wxml渲染的是遍历之后的数据（html格式的字符串）
在这里插入图片描述

搜索下面的蓝色字体就是遍历之后，被处理成html格式的数据：
<span class="high_light">啊</span>大大