项目需求给 dv-scroll-board轮播表添加移入提示, 但DataV文档没有提示框tooltip的属性
话不多说 ,直接上菜
<!-- Vue 2 Code -->
<template>
<div @mousemove="move">
<div class="table" @mouseleave="leave">
<dv-scroll-board
:config="config"
:key="key"
@mouseover="over"
/>
<p
v-if="tipShow"
class=tip-text"
:style="{ top: tipText.offsetY, left: tipText.offsetX}"
>
{{ tipText.name }}
</p>
</div>
</div>
</template>
<script>
export default {
name: "list",
data() {
return {
// 轮播表属性
config: {...},
// tooltip
tipText: {
name: "",
offsetX: "",
offsetY: "",
},
tipShow: false, // 控制单元格显隐
};
},
methods: {
// 鼠标移入
over(dom) {
this.tipShow= true;
//v.ceil拿到单元格数据
const htmlString = dom.ceil;
const regex = /<div[^>]*>(.*?)<\/div>/;
const match = regex.exec(htmlString);
this.tipText.name = match ? match[1] : "";
//没有值则直接隐藏悬浮框
if(!this.tipText.name) this.tipShow = false;
},
// 鼠标移动
move(e) {
const { left, top } = e.currentTarget.getBoundingClientRect();
const xPosition = e.pageX - left;
const yPosition = e.pageY - top;
// 悬浮框位置可自行调整
this.tipText.offsetX = xPosition + "px";
this.tipText.offsetY= yPosition + "px";
},
// 鼠标离开
leave() {
//隐藏单元格
this.tipShow= false;
},
}
};
</script>
<style lang='scss' scoped>
.ceil {
position: relative;
}
.tip-text {
background: #000000;
padding: 5px;
font-size: 14px;
// z-index: 200;
position: absolute;
left: 0;
top: 0;
text-align: center;
}
</style>
提示:移入轮播表时 ,如果没有
悬停效果,更新一下版本
@jiaminghi/data-view版本。亲测2.7.3版本没有悬停