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-table
v-loading="loading"
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="index"
border
empty-text="无数据"
property="sid" show-overflow-tooltip="true" label="" min-width="1"
<%-- default-expand-all--%>
:tree-props="{children: 'subFlowServiceRecords', hasChildren: 'hasChildren'}">
<el-table-column
prop="index"
label="序号"
width="100">el-table-column>
<el-table-column
prop="applicationNo"
label="工单号">
el-table-column>
<el-table-column
prop="merchantNo"
label="商编号">
el-table-column>
<el-table-column
prop="serviceName"
label="步骤">
el-table-column>
<el-table-column
prop="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-column
prop="startTime"
label="开始时间"
width="180">
el-table-column>
<el-table-column
prop="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'; // 指定要高亮的语言，例如 JSON
let 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.flowServiceRecords
this.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>