115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
|
<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>
|