vue鼠标经过效果实现 |
您所在的位置：网站首页 › 鼠标经过div显示另一个div › vue鼠标经过效果实现 |
|
Vue鼠标经过移除显示div
如果只是显示span或者p全部文字的话，建议使用:title=“要显示的信息” 如果显示的内容比较多，需要弹出div弹框的话可以使用下面的方法 第一步：给要鼠标经过的字段加上，鼠标经过事件 v-on:mouseover="changeActive($event,scope.row)" v-on:mouseout="removeActive"第二步：制作要显示内容的div（versionTotal是定义的变量，默认是false，控制div是否显示） {{this.appVersionName}}第三步：写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; }, |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |