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>