搜索关键词标红组件

搜索关键词标红功能

今年做的一个需求，先看效果图。

先讲一下实现方式，前端输入关键词查询，后端返回html模板，前端通过v-html渲染
查到的数据是分页式，v-html的样式需要使用/deep/声明
下面是组件代码

<template>
  <div class="result-box">
    <div id="box-top">div>
    <div class="search-list" v-for="(item, index) in searchWordsList">
      <div class="report-title">
        <img
          class="icon mini"
          v-show="item.reportSource === 1"
          src="../../assets/2023/icon_02.png"
          alt=""
        />
        <img
          class="icon"
          v-show="item.reportSource === 2"
          src="../../assets/2023/icon_01.png"
          alt=""
        />
        <div class="h5-icon" v-show="item.reportSource === 3">H5div>
        <div class="reportName-html" @click="OpenDetails(item, index)" v-html="item.reportNameDescription">
        div>
         
        <el-tag
          style="cursor: pointer;"
          v-show="item.hasAuth && item.isActive!=3"
          @click="GoSelect(item, index)"
          type="success"
          size="mini"
        >
          直接运行
        el-tag>
        <el-tag
          style="cursor: pointer;"
          v-show="item.hasAuth && item.isActive==3"
          type="warning"
          size="mini"
        >
          禁用
        el-tag>
        <el-tag v-show="!item.hasAuth" type="info" size="mini">
          未授权
        el-tag>
      div>
      <div class="html-template" v-html="item.description">div>
      <div class="report-path">{{ item.catalogPath }}div>
    div>
  div>
template>
<script>
export default {
  props: {
    searchWordsList: {
      type: Array,
      default: () => [],
    },
    id: {
      type: Number
    }
  },
  data() {
    return {
      templateCode: '
描述描述描述标红
',
    }
  },
  created() {},
  mounted() {},
  watch: {
    searchWordsList(n, o) {
      console.log('搜索结果变化', n)
      this.GoListTop()
    },
  },
  methods: {
    // 打开详情
    OpenDetails(data, index) {
      if (data.hasDetail) {
        this.$emit('OpenDetails', data, data.reportId, index)
      } else {
        this.$message.warning('暂无可看详情')
      }
    },
    // 打开报表
    GoSelect(data, index) {
      if (data.hasAuth) {
        this.$emit('StartReport', data, index)
      } else {
        this.$message.warning('暂无权限')
      }
    },
    GoListTop() {
      document.querySelector('#box-top').scrollIntoView({
        behavior: 'smooth',
      })
    },
  },
}
script>
<style lang="less" scoped>
.search-list {
  width: 100%;
  border-bottom: 1px solid rgba(34, 34, 34, 0.1);
  margin-bottom: 10px;
  .report-title {
    width: 100%;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3e86ff;
    line-height: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    .icon {
      width: 18px;
      height: 18px;
      display: block;
      margin-right: 8px;
      &.mini {
        width: 16px;
      }
    }
    .h5-icon {
      width: 18px;
      height: 18px;
      background: #eaf2ff;
      border-radius: 3px;
      font-size: 12px;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #3f86ff;
      text-align: center;
      line-height: 18px;
      margin-right: 8px;
    }
    .reportName-html {
      // width: 100%;
      position: relative;
      /deep/.reportName {
        border-bottom: #3e86ff 1px solid;
        cursor: pointer;
        > span {
          color: red;
        }
      }
    }
  }
  .html-template {
    width: 100%;
    position: relative;
    /deep/.desc {
      width: 100%;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(34, 34, 34, 0.7);
      line-height: 20px;
      margin-bottom: 5px;
      white-space: pre-line; // 合并空白符序列，但保留换行符
      > span {
        color: red;
      }
    }
  }
  .report-path {
    color: #929292;
    font-size: 12px;
    margin-bottom: 9px;
  }
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171