热门标签
当前位置: article > 正文
vue 悬停显示另一个div_Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现...
作者：小丑西瓜9 | 2024-02-18 20:15:47
赞
踩
vue中鼠标悬停切换div
Vue根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
By:授客 QQ：1033553122
开发环境
win10
element-ui "2.13.1"
vue "2.6.10"
需求描述
如下，鼠标移动到左侧标签名称时，右侧展示删除按钮，否则不显示
关键实现代码如下：
title="项目配置"
...略
>
...略
...略
...略
tab-position="left"
>
:key="item.envName"
v-for="(item, index) in projectEnvs"
:label="item.label"
:name="item.envName"
>
slot="label"
@mouseenter="onMouseoverEnvDelBtn($event)"
@mouseleave="onMouseleaveEnvDelBtn($event)"
>
{{item.label}}
...略
export default {
data() {
return {
projectEnvs: [], // 存放项目环境
};
},
methods: {
onMouseoverEnvDelBtn(event) {
event.target.parentElement.querySelector(".env-del-btn-span").style.cssText += "display:block"
},
onMouseleaveEnvDelBtn(event) {
event.target.parentElement.querySelector(".env-del-btn-span").style.cssText += "display:none"
},
...略
}
};
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/110282
推荐阅读
相关标签
