VUE 页面内容高亮显示

1. 概述

1.1 说明

　　PC项目中的页面中有时需要有页面内容匹配高亮展示效果，例如查询时关键词在结果中高亮。

1.2 思路

　　使用正则匹配替换，然后把高亮展示内容进行样式处理。

 2. 代码

2.1 页面处理

<template>
     <span v-html="queryTitleLight(data.title)" />
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          title: ''
        }
      },
    },
    // 标题高亮内容
    queryTitle: {
      type: String,
      default: '例如',
    },
  },
  data() {
    return {}
  },
  methods: {
    /**
     * 查询内容高亮
     */
    queryTitleLight(titleInfo) {
      const strReturn = titleInfo.replace(new RegExp(this.queryTitle, 'g'), `<span style="color:blue">${this.queryTitle}</span>`)
      return strReturn
    },
  },
}
</script>