erp-el-element/CommonInput/app-title.vue

115 lines
2.3 KiB
Vue
Raw Normal View History

2024-05-06 14:57:20 +08:00
<template>
<div class="box">
<div v-show="shoptitle">
<p
class="hover-shoptitle"
@mouseover="handleMouseOver"
@mousemove="handleMouseMove"
@mouseout="handleMouseOut"
>
{{ shoptitle }}
</p>
<div
class="tooltip"
v-if="showTooltip"
:style="{ left: tooltipX + 'px', top: tooltipY + 'px' }"
>
{{ shoptitle }}
</div>
</div>
</div>
</template>
<script>
export default {
props: ["shoptitle"],
data() {
return {
showTooltip: false,
tooltipX: 0,
tooltipY: 0,
};
},
components: {},
handleMouseOut() {
window.removeEventListener("scroll", this.updateTooltipPosition);
},
methods: {
handleMouseOver(event) {
this.showTooltip = true;
this.updateTooltipPosition(event);
},
handleMouseMove(event) {
this.updateTooltipPosition(event);
},
handleMouseOut() {
this.showTooltip = false;
},
updateTooltipPosition(event) {
if (!this.showTooltip) return;
this.tooltipX = event.clientX + 10;
this.tooltipY = event.clientY + 10;
},
},
};
</script>
<style scoped lang='scss'>
.box {
font-size: 14px;
font-weight: 400;
color: #000000;
margin-top: 5px;
}
.hover-trigger,
.hover-shoptitle {
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
height: 60px;
line-height: 20px;
text-overflow: ellipsis;
cursor: pointer;
}
.hover-shoptitle {
font-size: 14px;
color: #606266;
font-weight: 400;
-webkit-line-clamp: 3;
margin-bottom: 0;
}
.tooltip {
position: fixed;
top: 0px;
left: 0px;
width: 380px;
background-color: #fff;
padding: 2px 5px;
border-radius: 5px;
border: 1px solid;
z-index: 99;
}
.preferential {
display: inline-block;
background: #d6e4ff;
border-radius: 6px 6px 6px 6px;
border: 1px solid #3478fd;
font-size: 12px;
font-weight: 400;
color: #3478fd;
padding: 5px 10px;
box-sizing: border-box;
}
.tooltip-preferential {
height: 28px;
color: #e61628;
background-color: #fff;
border: 1px solid;
line-height: 28px;
text-align: center;
}
</style>