Vue 根據滑鼠懸停目標元素上方顯示、隱藏指定元素互動實作
By:授客 QQ：1033553122
開發環境
win10
element-ui "2.13.1"
vue "2.6.10"
需求描述
如下，滑鼠移動到左側標簽名稱時，右側展示洗掉按鈕，否則不顯示
關鍵實作代碼如下：
<template>
<el-dialog
title="專案配置"
...略
>
<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 >
<i @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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60299.html
標籤：JavaScript