//template
<div @mousemove="move" >
<div class="table" @mouseleave="leave" >
//列表
<dv-scroll-board :config="config" @mouseover="over" >
</dv-scroll-board>
//悬浮框
<p v-if="ifShow" class="dv-text" :style="{ top: dvText.keyY, left: dvText.keyX }" >
{{ dvText.name }} </p>
<div >
</div>
//script //data ////////////////////////////////////////////////
//单元格默认值
dvText: {
name: '',
keyY: '',
keyX: '',
},
//控制单元格 显示/隐藏
ifShow: false,
//methods ///////////////////////////////
// 鼠标移入
over(v) {
this.ifShow = true
//v.ceil拿到单元格数据
this.dvText.name = v.ceil
//没有值则直接隐藏悬浮框 不然如果设置padding会有背景
if (this.dvText.name === undefined) {
this.ifShow = false
} },
// 鼠标移动 ///////////////////////////
move(e) {
//将获取的值x轴、y轴的值给悬浮框 用来定位到单元格上.
//-1200 -500凭自己感觉调 因为每个表格在页面的位置都不一样
this.dvText.keyX = e.pageX - 1200 + 'px'
this.dvText.keyY = e.pageY - 500 + 'px'
},
// 鼠标离开 ///////////////////////
leave() {
//隐藏单元格
this.ifShow = false
},
//css ///////////////////////////
.ceil {
position: relative;
}
.dv-text {
background: #666;
padding: 5px;
font-size: 14px;
z-index: 11;
position: absolute;
left: 0;
top: 0;
}
