//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拿到單元格數(shù)據(jù)
? ? ? this.dvText.name = v.ceil
? ? ? //沒有值則直接隱藏懸浮框 不然如果設(shè)置padding會有背景
? ? ? if (this.dvText.name === undefined) {
? ? ? ? this.ifShow = false
? ? ? } },
? ? // 鼠標移動? ? ///////////////////////////
? ? move(e) {
? ? //將獲取的值x軸、y軸的值給懸浮框 用來定位到單元格上.
? ? //-1200 -500憑自己感覺調(diào) 因為每個表格在頁面的位置都不一樣
? ? ? 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;
}
