当前位置：首页 > news >正文

tooltip实现悬停内容染色

news 2026/2/9 20:37:54

一: 通过highlight.js项目实现对json字符串的染色高亮

此项目是jsp文件,并且引用了element-ui/highlight.js的组件

二: 实现效果

在这里插入图片描述

三: 代码实现

关键点在于成功引入相关的js及css，并且在tooltip渲染时进行数据染色。再将染色后的数据放到v-html中进行页面渲染(关键方法: highlightedData)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/pages/main/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>主子服务查询</title><script src="${pageContext.request.contextPath}/js/vueEle/2.7/vue.js"></script><script src="${pageContext.request.contextPath}/js/vueEle/js/lib/vue-resource.js"></script><script src="${pageContext.request.contextPath}/js/vueEle/2.7/vueEle.js"></script><script src="${pageContext.request.contextPath}/js/highlight/es/highlight.min.js"></script><link rel="stylesheet" href="${pageContext.request.contextPath}/js/vueEle/2.7/vueEle.css"><link href="${pageContext.request.contextPath}/js/highlight/styles/atom-one-dark-reasonable.css" rel="stylesheet" type="text/css"><style><%--  解决文本过长显示不全的问题 --%>.el-tooltip__popper {border-left: 20px solid #000000; /* 设置左侧边框为10px宽，颜色为黑色 */border-right: 10px solid #000000; /* 设置左侧边框为10px宽，颜色为黑色 */max-height: 400px;overflow-y: auto;}</style>
</head>
<body>
<div id="app" style="width: 100%"><template><el-container><el-header><el-form ref="form" :model="searchForm" label-width="150px"style="margin: 10px 10px 10px 10px;float: left":inline="true"><el-row><el-col><el-form-item label="工单号"><el-input v-model="searchForm.applicationNo"></el-input></el-form-item><el-form-item label="商编号"><el-input v-model="searchForm.merchantNo"></el-input></el-form-item><el-form-item><el-button type="primary" @click="search">查询</el-button></el-form-item></el-col></el-row></el-form></el-header><el-main><el-tablev-loading="loading":data="tableData"style="width: 100%;margin-bottom: 20px;"row-key="index"borderempty-text="无数据"property="sid" show-overflow-tooltip="true" label="" min-width="1"<%--                        default-expand-all--%>:tree-props="{children: 'subFlowServiceRecords', hasChildren: 'hasChildren'}"><el-table-columnprop="index"label="序号"width="100"></el-table-column><el-table-columnprop="applicationNo"label="工单号"></el-table-column><el-table-columnprop="merchantNo"label="商编号"></el-table-column><el-table-columnprop="serviceName"label="步骤"></el-table-column><el-table-columnprop="status"label="状态"width="80"></el-table-column><el-table-column label="请求信息"><template slot-scope="scope" v-if="scope.row.mainServiceData"><el-tooltip ><div slot="content"  style="border-left-width: 100px" v-html="highlightedData(scope.row.mainServiceData)"></div><el-button @click="copyData(scope.row.mainServiceData)">复制</el-button></el-tooltip></template></el-table-column><el-table-columnprop="startTime"label="开始时间"width="180"></el-table-column><el-table-columnprop="endTime"label="结束时间"width="180"></el-table-column></el-table><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":page-size="pageData.pageSize":page-sizes="[10, 20, 30, 40]"layout="total, sizes, prev, pager, next":total="pageData.total"></el-pagination></div></el-main></el-container></template></div>
<script>new Vue({el: '#app',data() {return {loading: false,tableData: [],pageData: {currentPage: 1,pageSize: 10,total: 0,},searchForm: {applicationNo: null,merchantNo: null}}},methods: {copyData(data) {const textarea = document.createElement('textarea');textarea.value = JSON.stringify(JSON.parse(data), null, 2);document.body.appendChild(textarea);textarea.select();document.execCommand('copy');document.body.removeChild(textarea);this.$message({message: '复制成功!',type: 'success'});},highlightedData(code) {const language = 'json'; // 指定要高亮的语言，例如 JSONlet code2 = JSON.stringify(JSON.parse(code), null, 2);return hljs.highlight(language, code2).value;},handleSizeChange(val) {this.pageData.pageSize = val;this.search()},handleCurrentChange(val) {this.pageData.currentPage = val;this.search()},search() {let applicationNo = this.searchForm.applicationNo;let merchantNo = this.searchForm.merchantNo;if ((applicationNo && applicationNo !== '')|| (merchantNo && merchantNo !== '')) {this.loading = true;this.$http.post('../flowService/queryRecordByApplicationNo',{applicationNo: applicationNo,merchantNo: merchantNo,currentPage: this.pageData.currentPage,pageSize: this.pageData.pageSize}).then(res => {if (res.body.status === 'success') {this.tableData = res.body.object.flowServiceRecordsthis.pageData.total = res.body.object.total;this.setSerialNumbers(this.tableData);} else {alert(res.body.errorMessage);}this.loading = false;})} else {this.loading = false;this.$message({message: '请至少输入一个参数!',type: 'warning'});}},setSerialNumbers(data, parentSerial = '') {let serial = 1;for (const item of data) {item.index = parentSerial + serial;serial++;if (item.subFlowServiceRecords && item.subFlowServiceRecords.length > 0) {this.setSerialNumbers(item.subFlowServiceRecords, item.index + '.');}}}}})
</script></body></html>

tooltip实现悬停内容染色

一: 通过highlight.js项目实现对json字符串的染色高亮此项目是jsp文件,并且引用了element-ui/highlight.js的组件二: 实现效果三: 代码实现关键点在于成功引入相关的js及css，并且在tooltip渲染时进行数据染色。再将染色后的数据放到v-html中进行页面渲染(关键方…...

编程日记 2023/10/25 20:11:49

“深入探讨Java JUC中的ReentrantLock锁：实现多线程同步与并发控制“

简介 1、从Java5开始，Java提供了一种功能更强大的线程同步机制——通过显式定义同步锁对象来实现同步，在这种机制下，同步锁由Lock对象充当。 2、Lock 提供了比synchronized方法和synchronized代码块更广泛的锁定操作，Lock允许实…...

编程日记 2023/10/25 20:10:47

Java|学习|多线程

1.多线程的一些概念进程：是正在运行的程序是系统进行资源分配和调用的独立单位每一个进程都有它自己的内存空间和系统资源。线程：是进程中的单个顺序控制流，是一条执行路径。单线程：一个进程如果只有一条执行路径&#xff0…...

编程日记 2023/10/25 20:09:46

【Python机器学习】零基础掌握VotingClassifier集成学习

为什么一些数据预测模型在复杂场景下表现不如预期？在当今数据驱动的世界中，企业和研究者面临着如何从大量数据中提取有价值信息的挑战。假设一个电商公司想要通过用户行为数据预测产品销量，通常会使用单一的算法模型，如逻辑回归、随机森林或朴素贝叶斯。但问题来了，如果…...

编程日记 2023/10/25 20:08:45

深入了解JavaScript中的AJAX和HTTP请求

在现代Web开发中，AJAX（Asynchronous JavaScript and XML）和HTTP请求被广泛应用于实现动态交互式网页。本文将深入探讨AJAX的概念、工作原理以及使用方法。什么是AJAX？ AJAX是一种利用JavaScript和HTTP请求与服务器进行异步通信的…...

编程日记 2023/10/25 20:07:43

第87步时间序列建模实战：LSTM回归建模

基于WIN10的64位系统演示一、写在前面这一期，我们介绍大名鼎鼎的LSTM回归。同样，这里使用这个数据： 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Renal…...

编程日记 2023/10/25 20:06:42

GB/T28181协议介绍

GB/T28181协议介绍文章目录 GB/T28181协议介绍总体介绍GB/T28181基本结构GB/T28181关键协议流程设备注册设备目录查询实时视频播放流程 GB/T28181协议总结说到GB/T28181协议，如果你是从事视频监控领域的工作，那对他一定不陌生，在公共安全、…...

编程日记 2023/10/25 20:05:41

光致发光荧光量子检测的作用

光致发光荧光量子检测是一种测试技术，可以用来测量荧光材料的荧光光谱、荧光量子效率和发光寿命等参数，具有高灵敏度、高分辨率和自动化程度高等优点。光致发光荧光量子检测的应用范围广泛，可以应用于材料科学、生物科学、医学、光学器件、能…...

编程日记 2023/10/25 20:04:40

深度学习第四课

第九章卷积神经网络解读 9.1 计算机视觉目标分类目标识别 64x64x312288 1000x1000x33000000 使用传统神经网络处理机器视觉面临的一个挑战是：数据的输入会非常大一般的神经网络很难处理海量图像数据。解决这一问题的方法就是卷积神经网络 9.2 卷积运算 …...

编程日记 2023/10/25 20:03:38

Linux创建临时文件mkstemp()tmpfile()

有些程序需要创建一些临时文件，仅供其在运行期间使用，程序终止后即行删除。很多编译器程序会在编译过程中创建临时文件。GNU C 语言函数库为此而提供了一系列库函数。（之所以有“一系列”的库函数，部分原因是由于这些函数分别继…...

编程日记 2023/10/25 20:02:37

js的节流和防抖详解

防抖和节流是JavaScript中的常见优化技巧，它们可以帮助我们控制代码在特定的时间间隔内执行的频率，从而优化性能。下面详细讲解它们的原理和使用方法。防抖（Debounce）： 防抖的原理是当一个事件频繁触发时&#xff0…...

编程日记 2023/10/25 20:01:36

基于SpringBoot的水果销售网站

基于SpringBootVue的水果销售网站系统的设计与实现~ 开发语言：Java数据库：MySQL技术：SpringBootMyBatis工具：IDEA/Ecilpse、Navicat、Maven角色：管理员、商家、用户系统展示主页水果详情可直接购买，…...

编程日记 2023/10/25 20:00:35

vue2进阶学习知识汇总

目录 1.组件之处理边界情况 1.1 子组件访问根组件数据 1.2 子组件访问父组件数据 1.3 父组件访问子组件 1.4 依赖注入 1.5 程序化的事件侦听器 1.6 递归组件 1.7 内联模板 1.8 X-Template 1.9 强制更新 1.10 v-once 2.过渡效果与状态 2.1 过渡效果 2.1.1 单元素/…...

编程日记 2023/10/25 19:59:34

--1 方式 --查询oracle数据库中的表 SELECT * FROM OPENDATASOURCE( MSDAORA, Data SourceGE160;User IDDAIMIN;PasswordDAIMIN )..DAIMIN.JOBS 举一反三：在查询分析器中输入： SELECT * FROM OPENDATASOURCE( MSDAORA, Data SourceORCL;User…...

编程日记 2023/10/25 19:58:32

存储优化知识复习三详细版解析

存储优化知识复习三一、选择题 1、数据库领域的三位图灵奖得主是( )。 A、C.W.Bachman B、E.F.Codd C、Peter Naur D、James Gray 【参考答案】ABD2、数据库DB、数据库系统DBS、数据库管理系统DBMS三者之间得关系是（ ）。 A、ＤB&#…...

编程日记 2023/10/25 19:57:29

HotReload for unity支持的代码修改

HotReload for unity支持的代码修改 HotReload的版本:1.2.4 Unity版本:2020,2021,2023 创作日期:2023.10.25 总结一下支持在运行的时候修改异步，同步，重命名方法，修改方法参数，返回值，out，ref&#xff…...

编程日记 2023/10/25 19:56:28

写一个呼吸灯要几行代码？

module breathe( input clk, output reg led ); reg [26:0]cnt 1b0;always (posedge clk) begin cnt < cnt 1b1;if(cnt[15:6]>cnt[25:16])beginled < cnt[26];end else begin led < ~cnt[26];end endendmodule 笔者的clk是50M...

编程日记 2023/10/25 19:55:26

Banana Pi BPI-W3（Armsom W3）RK3588开当板之调试UART

前言本文主要讲解如何关于RK3588开发板UART的使用和调试方法，包括UART作为普通串口和控制台两种不同使用场景一. 功能特点 Rockchip UART (Universal Asynchronous Receiver/Transmitter) 基于16550A串口标准，完整模块支持以下功能： 支…...

编程日记 2023/10/25 19:54:26

LeetCode88——合并两个有序数组

LeetCode88——合并两个有序数组 1.题目描述： 给你两个按非递减顺序排列的整数数组 nums1 和 nums2，另有两个整数 m 和 n ，分别表示 nums1 和 nums2 中的元素数目。请你合并 nums2 到 nums1 中，使合并后的数组同样按非递减…...

编程日记 2023/10/25 19:52:24

C++ BinarySercahTree recursion version

for循环版本的：C BinarySercahTree for version-CSDN博客 Inorder()在c BinarySerschTree for verison写了。还是按照那种嵌套的方式来写递归。现在来写查找 FindR() bool FindR(){return _FindR(_root);}然后_FindR()函数写递归具体实现： 假设要…...

编程日记 2023/10/25 19:51:23

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...

编程新知 2025/10/27 21:25:04

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25