vue鼠标经过效果实现
Vue鼠标经过移除显示div如果只是显示span或者p全部文字的话,建议使用:title="要显示的信息"如果显示的内容比较多,需要弹出div弹框的话可以使用下面的方法第一步:给要鼠标经过的字段加上,鼠标经过事件第二步:制作要显示内容的div(versionTotal是定义的变量,默认是false,控制div是否显示)第三步:写changeActive和removeActive的方法内容如果只是.
·
Vue鼠标经过移除显示div
如果只是显示span或者p全部文字的话,建议使用:title=“要显示的信息”
如果显示的内容比较多,需要弹出div弹框的话可以使用下面的方法
第一步:给要鼠标经过的字段加上,鼠标经过事件
v-on:mouseover="changeActive($event,scope.row)"
v-on:mouseout="removeActive"
第二步:制作要显示内容的div(versionTotal是定义的变量,默认是false,控制div是否显示)
<div
v-if="versionTotal"
class="version-total"
:style="{position: absolute, top: floatTop, left: floatLeft}">
<span>{{this.appVersionName}}</span>
</div>
第三步:写changeActive和removeActive的方法内容
// 鼠标移入
changeActive(e,data) {
// 更改div的显示属性
this.versionTotal = true;
// 给需要设置的内容赋值
this.appVersionName = data.appVersion;
// X和Y坐标需要减去一部分像素,是为了和鼠标更接近,具体像素可以调整
this.floatLeft = e.clientX - 180 + "px"; // 减去外层div的left距离
this.floatTop = e.clientY - 55 + "px";
},
// 鼠标移出
removeActive() {
// 设置不显示
this.versionTotal = false;
},
更多推荐
已为社区贡献5条内容
所有评论(0)