< vue + ElementUi 组件封装:实现弹窗展示富文本数据,允许全文搜索高亮显示搜索内容 >

news2024/7/2 4:04:43

在这里插入图片描述

实现弹窗展示富文本数据,允许全文搜索高亮显示搜索内容

  • 👉 前言
  • 👉 一、效果演示
  • 👉 二、实现思路
  • 👉 三、实现案例
  • 👍 卷王必胜!
  • 往期内容 💨


👉 前言

在 Vue + elementUi 开发中,遇到需要实现一个富文本展示 且 需要实现富文本全文搜索,高亮对应搜索内容。显示关键词出现次数,允许上下按顺序切换,实现滚动条定位到对应关键词位置!

接下来,简单阐述下,开发中使用方法!


👉 一、效果演示

话不多说,先上效果图! 白嫖万岁!当然,如果有帮助,希望不要吝啬你的点赞呀!

效果图
效果图二

以上数据来源于互联网记载的国内法律法规条例文献!

👉 二、实现思路

通过 v-html 将富文本解析到页面指定位置展示,并且预设的 class名称,通过 document.querySelectorAll() 查询已渲染到页面的内容。

通过正则 htmlContent.replace(new RegExp(this.keyword, 'g'), 替换内容)。替换内容,通常为html样式的keyword)

其实不难发现,在vueJavaScript 中进行全文搜索有些许不同。由于其中搜索的HTML是我们通过 v-html渲染 到页面上,它享有Vue数据双向绑定的特性,我们其实只需要对v-html绑定的变量参数进行修改,即可实时渲染到页面。当然有些标签属性变更,使用JavaScript来修改可能会更加高效一点。

稍微增加一点切换的滚动条挪动 及 样式清除细节逻辑!直接看代码吧! 简单易懂!

👉 三、实现案例

> 父组件中引用

<template>
<fullTextSearchDialog
	v-if="lawDialogVisible"
	ref="fullTextSearchDialog"
	:curTitle="curTitle"
	:content="lawFullText"
	@close="closeLawFullTextDialog"
/>
</template>

<script>
import fullTextSearchDialog from "@/views/components/dialog/fullTextSearchDialog.vue";

 data() {
    return {
      lawDialogVisible: false,
      curTitle: '',
      lawFullText: '',
    }
}
methods: {
	// 打开法律法规全文
    openLawFullTextDialog(item) {
      this.curTitle = item.title;
      this.lawFullText = item.fullText;
      this.lawDialogVisible = true
      setTimeout(() => {
        this.$refs.fullTextSearchDialog.openDialog()
      }, 0)
    },
    // 关闭全文弹窗
    closeLawFullTextDialog() {
      this.curTitle = '';
      this.lawFullText = ''
      this.lawDialogVisible = false
    },
}
</script>

> 子组件模板

<template>
  <el-dialog
    :title="curTitle + '-全文'"
    :visible.sync="lawDialogVisible"
    width="61.7%"
    height="500"
    :close-on-click-modal="true"
    :modal="false"
    custom-class="abolishDialog"
    @close="handleClose"
  >
    <div class="lawContent">
      <div class="searchBox">
        全文内容搜索:
        <el-input
          placeholder="请输入关键词"
          v-model="keyword"
          class="input-with-select"
          :clearable="false"
          style="width: calc(100% - 240px);"
        >
          <div class="indexChange" slot="suffix">
            <span class="index">{{ searchIndex + ' / ' + searchAllIndexs }}</span>
            <div class="btnBox">
              <i class="el-icon-arrow-up" @click="searchIndexDown"></i>
              <i class="el-icon-arrow-down" @click="searchIndexUp"></i>
            </div>
          </div>
        </el-input>
        <el-button type="primary" size="mini" @click="lawFullTextSearch"
          >查 询</el-button
        >
        <el-button size="mini" @click="resetSearch(true)"
          >重 置</el-button
        >
      </div>
      <div class="fullTextContent">
        <p
          v-if="refresh"
          style="
            width: 100%;
          "
          v-html="lawFullText || '暂无数据'"
          class="el-tiptap-editor__content"
        ></p>
      </div>
    </div>
  </el-dialog>
</template>


<script>
export default {
  components: {},
  props: {
    curTitle: {
      type: String,
      default: () => {
        return '提示';
      },
    },
    content: {
      type: String,
      default: () => {
        return '';
      },
    },
  },
  data() {
    return {
      lawDialogVisible: false, //弹框显隐
      lawFullText: '',
      searchIndex: 0,
      searchAllIndexs: 0,
      keyword: '',
      refresh: true,
    };
  },
  
  mounted() {
    this.lawFullText = JSON.parse(JSON.stringify(this.content))
  },
  watch: {},
  computed: {},

  methods: {
    /**
     * @description:打开弹框回调
     */
    openDialog() {
      this.lawDialogVisible = true;
    },
    
    // 法律法规全文内容关键词搜索高亮
    lawFullTextSearch() {
      // window.console.log(this.keyword)
      if (this.keyword && this.keyword !== '' && this.lawFullText.indexOf(this.keyword) != -1) {
        this.searchAllIndexs = (this.lawFullText.split(this.keyword).length - 1) || 0
        this.searchIndex = 1
        this.lawFullText = this.lawFullText.replace(new RegExp(this.keyword, 'g'), `<em class='searchText'>${this.keyword}</em>`); // 通过正则全局匹配关键字,查出来的文字进行高亮替换
        setTimeout(() => {
          let allSearchIndex = document.querySelectorAll('em')
          allSearchIndex[this.searchIndex - 1].className = 'curSearchText'
          // 使滚动条滚动到指定位置
          this.scrollChange()
        }, 0)
      } else {
        this.resetSearch()
        this.$message.info('无当前查询内容 或 未输入关键词!')
      }
    },
    
    // 重置搜索内容
    resetSearch(resetKey = false) {
      if(resetKey) {
        this.keyword = ''
      }
      this.searchAllIndexs = 0;
      this.searchIndex = 0;
      // 清除上次的查询记录
      this.lawFullText = this.lawFullText.replace(new RegExp('</?em.*?>', 'gi'), ``);
      // 刷新
      this.refresh = false;
      setTimeout(() => {
        this.refresh = true;
      }, 0)
    },
    
    // 查询内容上一个
    searchIndexUp() {
      if(this.searchIndex > 0 && this.searchIndex <= this.searchAllIndexs && this.searchAllIndexs > 0) {
        this.searchIndex = (this.searchIndex + 1) > this.searchAllIndexs ? 1 : (this.searchIndex + 1)
        setTimeout(() => {
          let allSearchIndex = document.querySelectorAll('em')
          // 清除上一个选中样式
          allSearchIndex[this.searchIndex - 2 < 0 ? this.searchAllIndexs - this.searchIndex : this.searchIndex - 2].className = 'searchText'
          allSearchIndex[this.searchIndex - 1].className = 'curSearchText'
          
          // 使滚动条滚动到指定位置
          this.scrollChange()
        }, 0)
      } else {
        this.searchIndex = 0
      }
    },
    
    // 查询内容下一个
    searchIndexDown() {
      if(this.searchIndex > 0 && this.searchIndex <= this.searchAllIndexs && this.searchAllIndexs > 0) {
        this.searchIndex = (this.searchIndex - 1) <= 0 ? this.searchAllIndexs : (this.searchIndex - 1)
        setTimeout(() => {
          let allSearchIndex = document.querySelectorAll('em')
          // 清除上一个选中样式
          allSearchIndex[this.searchIndex > this.searchAllIndexs - 1 ? this.searchAllIndexs - this.searchIndex  : this.searchIndex].className = 'searchText'
          allSearchIndex[this.searchIndex - 1].className = 'curSearchText'
          
          // 使滚动条滚动到指定位置
          this.scrollChange()
        }, 0)
      } else {
        this.searchIndex = 0
      }
    },
    
    /**
     * @description:关闭弹框回调
     */
    handleClose() {
      this.lawDialogVisible = false;
      setTimeout(() => {
        this.lawFullText = ''
        this.keyword = ''
        this.searchIndex = 0
        this.searchAllIndexs = 0
        this.$emit('close')
      }, 0)
    },
    
    // 滚动条定位
    scrollChange() {
      let fullTextDom = document.querySelector('.fullTextContent')
      let curDom = document.querySelector('.curSearchText').parentNode
      // window.console.log(curDom, curDom.offsetTop)
      fullTextDom.scrollTop = curDom.offsetTop - 137  || 0
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ {
  .abolishDialog {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0 !important;
    min-width: 480px;
    .lawContent {
      height: 50vh;
      min-height: 500px;
      display: flex;
      align-content: space-around;
      flex-wrap: wrap;
      .searchBox {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .el-input__inner {
          padding-right: 100px;
        }
        .el-input__suffix-inner {
          width: 90px;
          display: flex;
          justify-content: space-between;
          .indexChange {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .btnBox {
              display: flex;
              flex-direction: column;
              margin: 0 5px;
            }
          }
        }
      }
      .fullTextContent {
        width: 100%;
        height: calc(100% - 70px);
        padding-top: 20px;
        overflow-y: auto;
        .searchText {
          background-color: yellow;
          color: #333;
          font-weight: bold;
          margin: 0 3px;
          padding: 2px;
          border-radius: 5px;
        }
        .curSearchText {
          background-color: red;
          color:white;
          padding: 3px;
          font-weight: bold;
          margin: 0 3px;
          padding: 2px;
          border-radius: 5px;
        }
      }
    }
    .el-dialog__header {
      border-bottom: 0.5px solid #cccccc !important;
      padding: 0 15px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-dialog__headerbtn {
        width: 20px;
        position: relative;
        top: 0;
        right: 0;
      }
      // height: 48px !important;
    }
    .el-dialog__body {
      // min-height: 100px;
      padding: 15px;
      .title {
        font-size: 10.5px;
        color: #f56c6c;
        text-align: right;
        margin-top: 15px;
      }
    }
    .el-dialog__footer {
      border-top: 0.5px solid #cccccc !important;
      padding: 10px;
    }
  }
}
</style>

案例较为粗浅,仅供参考!

👍 卷王必胜!

如果本篇文章对您有所帮助! 请不要吝惜您的小手,给小温来个小小的点赞!您的支持是对小温无比的认同!


往期内容 💨

🔥 < 每日算法:一文带你认识 “ 双指针算法 ” >

🔥 < 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>

🔥 < JavaScript技术分享: 大文件切片上传 及 断点续传思路 >

🔥 < 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >

🔥 < 面试知识点:什么是 Node.js ?有哪些优缺点?应用场景? >

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/699992.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

私域流量怎么运营?

最近几年&#xff0c;随着微信社群营销的兴起&#xff0c;互联网上出现了一种火爆的变现模式&#xff0c;即将流量引入微信个人号或社群&#xff0c;并通过活动、促销和私聊等方式进行转化&#xff0c;从而为企业或个人带来变现&#xff0c;这就是私域流量变现。 实际上&#x…

ARMv8 - 安全机制 - 异常等级

简介 ARMv8架构处理器有一套异常等级&#xff08;Exception level&#xff09;机制&#xff0c;分成4个等级&#xff08;EL0 ~ EL3&#xff09;。处理器运行时会处于其中的某个等级并且可以进行等级切换。 资源差异 每个异常等级都拥有一些自己版本的特殊寄存器&#xff0c;…

基于大数据技术对基金分析-python

提示&#xff1a;本文为个人原创&#xff0c;仅供技术探讨与交流&#xff0c;对实际投资并不造成建议。 基于大数据技术对基金分析-python 前言一、数据获取&#xff1a;python爬虫1).从天天基金数据接口获取数据2).爬虫前期准备3).爬虫具体实现 二、数据清洗及计算指标1.过滤数…

高性能计算工程师工资一般多少?

由于近两年深度学习的迅速崛起&#xff0c;超算互联网的普及以及AIGC的大规模应用&#xff0c;各行各业对高性能计算工程师的需求大涨&#xff0c;因此高性能计算工程师的工资也在逐年上涨中&#xff0c;并频频爆发抢人大战。 甚至年薪百万依然难以招到合适的人才。 有很多大厂…

Android JetPack 深入分析ViewModel源码

文章目录 前言源码分析ViewModel是如何创建的&#xff1f;ViewModelProvider(this)做了什么&#xff1f;小结 get(MyViewModel::class.java)做了什么&#xff1f;小结 ViewModel是如何实现配置更改后数据恢复的&#xff1f;整体时序图 结语 前言 本文主要分析ViewModel相关源码…

如何提高项目估算精准度 关键看3方面

项目估算非常重要&#xff0c;这直接关系着项目的成本和收入&#xff0c;如果估算不准确&#xff0c;将为项目带来较大风险。一般软件规模可以用多种方式进行估算&#xff0c;但是用功能点估算方式更准确&#xff0c;而自动估算让估算更快速&#xff0c;我们以CoCode需求分析工…

ChatGpt能够用来做什么

作为计算机从业人员&#xff0c;chatgpt能够从多方面提高大家的工作效率&#xff0c;主要包括以下几点&#xff1a; 技术问题解答&#xff1a;当遇到技术问题时&#xff0c;可以向ChatGPT提问并获取解答。ChatGPT可以提供相关的知识、文档和示例代码&#xff0c;帮助程序员快速…

vue2封装单张图片上传(常用于身份证正反面)

一.实现效果 二.入参 props: {defaultImg: {//默认位置的照片type: String,default: "",},uploadWidth: {//照片框的宽度type: String,default: "148px",},}, 另外如果修改了宽度的话&#xff0c;在外部组件需要用scss重写一下样式 /deep/ .el-upload-lis…

芯片中的上百亿个晶体管是如何设计的?

2021年4月21日&#xff0c;在芯片界的顶级会议Hot Chips大会上&#xff0c;Cerebras Systems公司发布了一款晶圆级引擎芯片——Wafer Scale Engine 2。 这款芯片采用台积电7纳米工艺制程&#xff0c;拥有85万个AI核心&#xff0c;包含2.6万亿个晶体管&#xff0c;面积为46225平…

Linux8.进程(中)(状态)

1.grep -v 关键字a :不显示关键字a匹配的信息。 2.进程状态 :新建&#xff0c;就绪&#xff0c;阻塞&#xff0c;挂起&#xff0c;执行&#xff0c;终止。 运行 : task_struct结构体在运行队列中排队&#xff0c;这就叫做运行态。 阻塞 :等待非CPU资源(磁盘&#xff0c;网卡…

科技云报道:公有云内卷时代,青云的新想象力在哪?

科技云报道原创。 2023年接踵而至的价格战&#xff0c;将国内公有云的竞争力度再次拉满。阿里云、腾讯云、京东云、移动云带头降价&#xff0c;也将寒意传导给了更多腰部云服务商。毫无疑问&#xff0c;这是一场对云服务商的残酷考验。 在公有云高度内卷的阶段&#xff0c;以…

kaggle新赛:肾脏血管分割大赛赛题解析(CV)

用AI为医疗贡献一份力量&#xff0c;从加入本次竞赛开始&#xff01; 赛题名称&#xff1a;HuBMAP - Hacking the Human Vasculature 从人肾组织切片中分割微血管结构 赛题链接&#xff1a;https://www.kaggle.com/competitions/hubmap-hacking-the-human-vasculature 赛题背…

java 正则表达式总结

目录 一、简介 二、源码分析 1.简单实例 : 2.底层实现 : 1 fund()方法 2 group(0/1)方法 (1)group(0): (2)group(1): 三、 基本语法 1.元字符介绍 : 2.元字符—字符匹配符 : Δ代码演示 3.关于字母大小写问题 : Δ代码演示 4.元字符—定位符 : 1 定义 2 常用定位符 3…

图简介-数据结构和算法教程

介绍 图是由顶点和边组成的非线性数据结构。顶点有时也被称为节点&#xff0c;并且边是连接图中的任何两个节点的线或弧。更正式地说&#xff0c;一个图是由一组顶点&#xff08;V&#xff09;和一组边&#xff08;E&#xff09;组成的。该图表示为G&#xff08;V&#xff0c;…

Win11的两个实用技巧系列之亮度条消的解决办法

Win11更新后无法调节亮度怎么办 Win11亮度条消的解决办法 Win11更新后无法调节亮度怎么办&#xff1f;win11系统升级以后&#xff0c;发现屏幕亮度不能调节&#xff0c;没有亮度调节按钮了&#xff0c;下面我们就来看看Win11亮度条消的解决办法 电脑更新后&#xff0c;亮度条消…

如何设计可以动态扩容缩容的分库分表方案?

对于分库分表来说&#xff0c;主要是面对以下问题&#xff1a; 选择一个数据库中间件&#xff0c;调研、学习、测试&#xff1b;设计你的分库分表的一个方案&#xff0c;你要分成多少个库&#xff0c;每个库分成多少个表&#xff0c;比如 3 个库&#xff0c; 每个库 4 个表&am…

SpringSecurity(五):前后端分离认证总结案例。

前后端分离认证总结案例 前言难点分析Controller层eneity层RoleUser dao层service层config层LoginFilterSecurityConfig resourcesmapper propertiespom.xml结尾 前言 和上一篇一样&#xff0c;从上倒下复制粘贴&#xff0c;所有代码贴完再运行&#xff0c;代码没有问题&#…

初步学习使用SpringBoot框架(手动插入数据模拟访问数据库)

对于SpringBoot框架介绍大家可以看看这个这篇文章&#xff0c;SpringBoot优缺点以及如何安装使用 以下我是按照老师给的安装方法进行安装使用SpringBoot框架&#xff1a; 大家安装SpringBoot框架时候&#xff0c;最好安装3.0以下的&#xff0c;不然需要对应较高版本的JDK版本&…

【Axure教程】拖动调整行高列宽的表格

表格是在系统软件中非常常用的工具。表格通常由行和列组成&#xff0c;用于以结构化的方式显示和组织数据。它们在各种场景中都有广泛的应用&#xff0c;包括数据分析、数据录入、报表生成、项目管理和数据可视化等领域。 今天作者就教大家如何在Axure里制作一个能通过鼠标拖动…

阿里巴巴最新 SpringCloudAlibaba 学习笔记,全程通俗易懂,一套搞懂!

Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案。此项目包含开发分布式应用微服务的必需组件&#xff0c;依托 Spring Cloud Alibaba&#xff0c;只需要添加一些注解和少量配置&#xff0c;就可以将 Spring Cloud 应用接入阿里微服务解决方案&#xff0c;通过阿里…