搜索关键词标红组件

搜索关键词标红功能

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

先讲一下实现方式,前端输入关键词查询,后端返回html模板,前端通过v-html渲染

查到的数据是分页式,v-html的样式需要使用/deep/声明

下面是组件代码

html 复制代码
<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">H5</div>
        <div class="reportName-html" @click="OpenDetails(item, index)" v-html="item.reportNameDescription">
        </div>
        &nbsp;
        <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: '<div class="desc">描述描述描述<span>标红</span></div>',
    }
  },
  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>
相关推荐
王同学QaQ2 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊3 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码3 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
会豪4 小时前
CSS 动画属性精讲:从基础到实战
前端·css
Gracemark20 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
前端Hardy21 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy21 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼21 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_1 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing1 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化