This commit is contained in:
BianLzhaoMin
parent
991e42e02b
commit
2a4d6b82f1
|
|
@ -41,9 +41,27 @@
|
|||
访问演示
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-info-content">
|
||||
<div
|
||||
class="product-info-content"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
ref="productInfoContent"
|
||||
>
|
||||
{{ productDetail.introduction }}
|
||||
</div>
|
||||
<!-- 悬浮提示 -->
|
||||
<div
|
||||
v-if="showTooltip"
|
||||
class="tooltip"
|
||||
:style="tooltipStyle"
|
||||
@mouseenter="handleTooltipMouseEnter"
|
||||
@mouseleave="handleTooltipMouseLeave"
|
||||
>
|
||||
<div class="tooltip-content">
|
||||
{{ productDetail.introduction }}
|
||||
</div>
|
||||
<div class="tooltip-arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -114,12 +132,29 @@ export default {
|
|||
productId: '',
|
||||
lookFile: 'http://192.168.0.14:8012/onlinePreview?url=',
|
||||
filePreviewPath: 'http://218.21.27.6:18013/onlinePreview?url=',
|
||||
// 悬浮提示相关
|
||||
showTooltip: false,
|
||||
tooltipStyle: {},
|
||||
isTextOverflow: false,
|
||||
hideTooltipTimer: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.productId = this.$route.params?.id
|
||||
this.getProductCenterDetailInScreenFun(this.$route.params?.id)
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.checkTextOverflow()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清理定时器
|
||||
if (this.hideTooltipTimer) {
|
||||
clearTimeout(this.hideTooltipTimer)
|
||||
this.hideTooltipTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取产品中心详情
|
||||
|
|
@ -147,12 +182,19 @@ export default {
|
|||
typeName,
|
||||
linkImage,
|
||||
isAccess,
|
||||
introduction,
|
||||
introduction:
|
||||
introduction ||
|
||||
'这是一个测试用的长文本内容，用来验证悬浮提示功能是否正常工作。这段文字应该超过四行，从而触发悬浮显示效果。我们添加了更多的文字内容来确保文本能够溢出容器，这样用户就可以通过鼠标悬停来查看完整的产品介绍内容了。这个功能对于长文本的展示非常有用，能够提供更好的用户体验。',
|
||||
}
|
||||
|
||||
this.productCases = list
|
||||
this.productVideos = videoList
|
||||
this.productBrochures = fileList
|
||||
|
||||
// 数据加载完成后检查文本溢出
|
||||
this.$nextTick(() => {
|
||||
this.checkTextOverflow()
|
||||
})
|
||||
},
|
||||
|
||||
goBack() {
|
||||
|
|
@ -228,6 +270,87 @@ export default {
|
|||
console.log('this.iframeUrl', this.iframeUrl)
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 检查文本是否溢出
|
||||
checkTextOverflow() {
|
||||
this.$nextTick(() => {
|
||||
const element = this.$refs.productInfoContent
|
||||
if (element && this.productDetail.introduction) {
|
||||
// 创建一个临时元素来测量完整文本的高度
|
||||
const tempElement = element.cloneNode(true)
|
||||
tempElement.style.position = 'absolute'
|
||||
tempElement.style.visibility = 'hidden'
|
||||
tempElement.style.height = 'auto'
|
||||
tempElement.style.webkitLineClamp = 'unset'
|
||||
tempElement.style.display = 'block'
|
||||
tempElement.style.webkitBoxOrient = 'unset'
|
||||
tempElement.style.overflow = 'visible'
|
||||
|
||||
document.body.appendChild(tempElement)
|
||||
|
||||
const fullHeight = tempElement.offsetHeight
|
||||
const lineHeight = parseFloat(
|
||||
getComputedStyle(element).lineHeight,
|
||||
)
|
||||
const maxHeight = lineHeight * 4
|
||||
|
||||
this.isTextOverflow = fullHeight > maxHeight
|
||||
|
||||
document.body.removeChild(tempElement)
|
||||
|
||||
console.log('文本溢出检查:', {
|
||||
fullHeight,
|
||||
maxHeight,
|
||||
isOverflow: this.isTextOverflow,
|
||||
text: this.productDetail.introduction,
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 鼠标移入事件
|
||||
handleMouseEnter(event) {
|
||||
console.log('鼠标移入，溢出状态:', this.isTextOverflow)
|
||||
// 清除隐藏定时器
|
||||
if (this.hideTooltipTimer) {
|
||||
clearTimeout(this.hideTooltipTimer)
|
||||
this.hideTooltipTimer = null
|
||||
}
|
||||
|
||||
if (this.isTextOverflow) {
|
||||
const rect = event.target.getBoundingClientRect()
|
||||
this.tooltipStyle = {
|
||||
position: 'fixed',
|
||||
left: rect.left + 'px',
|
||||
top: rect.top - 10 + 'px',
|
||||
zIndex: 9999,
|
||||
}
|
||||
this.showTooltip = true
|
||||
console.log('显示悬浮提示')
|
||||
}
|
||||
},
|
||||
|
||||
// 鼠标移出事件
|
||||
handleMouseLeave() {
|
||||
// 延迟隐藏，给用户时间移动到悬浮框
|
||||
this.hideTooltipTimer = setTimeout(() => {
|
||||
this.showTooltip = false
|
||||
}, 200)
|
||||
},
|
||||
|
||||
// 悬浮框鼠标移入事件
|
||||
handleTooltipMouseEnter() {
|
||||
// 清除隐藏定时器
|
||||
if (this.hideTooltipTimer) {
|
||||
clearTimeout(this.hideTooltipTimer)
|
||||
this.hideTooltipTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
// 悬浮框鼠标移出事件
|
||||
handleTooltipMouseLeave() {
|
||||
this.showTooltip = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -846,10 +969,6 @@ export default {
|
|||
padding: 0 14px;
|
||||
gap: 24px;
|
||||
|
||||
.product-image {
|
||||
// border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
height: 240px;
|
||||
flex: 1;
|
||||
|
|
@ -900,11 +1019,20 @@ export default {
|
|||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.8;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
|
||||
-webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
|
||||
-webkit-line-clamp: 4; /* 限制显示的行数为4行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(74, 144, 226, 0.05);
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
margin: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -912,4 +1040,78 @@ export default {
|
|||
// width: 100%;
|
||||
height: 79vh;
|
||||
}
|
||||
|
||||
/* 悬浮提示样式 */
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
animation: tooltipFadeIn 0.3s ease-out;
|
||||
pointer-events: auto; /* 确保可以接收鼠标事件 */
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
/* 自定义滚动条样式 */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
||||
}
|
||||
|
||||
/* Webkit 浏览器滚动条样式 */
|
||||
.tooltip-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.tooltip-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tooltip-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tooltip-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid rgba(0, 0, 0, 0.9);
|
||||
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
@keyframes tooltipFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue