tooltip实现悬停内容染色

编程入门行业动态更新时间:2024-10-27 17:19:25

tooltip实现悬停<a href=https://www.elefans.com/category/jswz/34/1771374.html style= 内容染色"/>

tooltip实现悬停内容染色

一: 通过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>