一、封装悬浮显示的内容
表格:elment-UI
ShowBox.vue
<template>
<div class="table-box">
<div class="table-title">{{title}}</div>
<el-table :data="tableData" stripe style="width: 100%;">
<el-table-column prop="date" label="日期">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '无',
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
<style>
.table-box {
width: 400px;
/* height: 200px; */
border: 1px solid #000;
}
.table-title {
font-size: 23px;
text-align: left;
font-weight: 600;
}
</style>
二、鼠标移入、移出操作(重点)
根据鼠标移入的x、y坐标确定悬浮内容的位置。
完整代码如下:
<template>
<div class="container">
<div v-for="(item, index) in items" :key="index" @mouseenter="mouseOver($event,item)" @mouseleave="mouseLeave"
class="item-box">{{ item }}
</div>
<ShowBox id="atable" v-if="showTable" :title="title"></ShowBox>
</div>
</template>
<script>
import ShowBox from "./ShowBox.vue";
export default {
components: {
ShowBox
},
data() {
return {
items: [
"1-1-1",
"1-1-2",
"1-1-3",
"1-1-4",
"1-2-1",
],
showTable: false, // 初始化表格为关闭状态
title: '',
};
},
mounted() {
// this.activation()
},
methods: {
//鼠标移入,显示相对于的表格数据
mouseOver(e, item) {
this.showTable = true;
console.log("鼠标移入" + e + item)
this.title = item
const x = e.clientX;
const y = e.clientY;
console.log("x:" + x + "y:" + y)
this.$nextTick(function() {
var divElement = document.getElementById("atable")
console.log("divElement:" + divElement)
divElement.style.position = "absolute"
divElement.style.left = x + "px"
divElement.style.top = y + "px"
divElement.style.backgroundColor = "coral"
})
},
//鼠标移出li,隐藏表格数据
mouseLeave() {
this.showTable = false
console.log("鼠标移出")
},
},
};
</script>
<style>
.container {
/* display: flex; */
/* 设置容器为flex布局 */
/* justify-content: space-between; */
/* 水平居中显示子项 */
}
.item-box {
width: 100px;
/* 设置每个div的宽度 */
height: 30px;
/* 设置每个div的高度 */
background-color: forestgreen;
/* 设置每个div的背景色 */
margin-top: 7px;
margin-left: 3px;
/* 设置每个div之间的外边距 */
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: 500;
border-style: ridge;
border-width: 2px;
border-color: #0085AA;
}
</style>
效果:
如果想要改变表格内容,在ShowBox.vue里面添加传值参数,如下
props: {
title: {
type: String,
default: '无',
},
tableData: {
type: Array,
default: null,
}
},
调用界面添加如下
<ShowBox id="atable" v-if="showTable" :title="title" :tableData="tableData"></ShowBox>
data() {
return {
tableData:[],
};
},