Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现

Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现

By:授客 QQ：1033553122

开发环境

win10

element-ui  "2.13.1"

vue  "2.6.10"

需求描述

如下，鼠标移动到左侧标签名称时，右侧展示删除按钮，否则不显示

关键实现代码如下：

<template>

<el-dialog

title="项目配置"

...略

>

<div class="project-settings-dialog-div">

...略

<el-tab-pane label="环境配置" name="envSettings">

...略

<el-tabs

...略

tab-position="left"

>

<el-tab-pane

:key="item.envName"

v-for="(item, index) in projectEnvs"

:label="item.label"

:name="item.envName"

>

<span

slot="label"

@mouseenter="onMouseoverEnvDelBtn($event)"

@mouseleave="onMouseleaveEnvDelBtn($event)"

>

<span>{{item.label}}</span>

<span class="env-del-btn-span">

<i class="el-icon-delete" @click.stop="deleteEnv(index)"></i>                  </span>

</span>

</el-tab-pane>

</el-tabs>

</el-tab-pane>

...略

</div>

</el-dialog>

</template>

<script>

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"

},

...略

}

};

</script>