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>