vue 鼠标移入移出 列表蒙层展示

<template>

    <section class="base">

        <ul>

            <li v-for="(item, index) in 20" v-on:mouseenter="showDialog(index)" v-on:mouseleave="hideDialog(index)" :accesskey="index" style="position: relative;width: 100px;height: 50px;">

                {{index}}

                <!--操作蒙层-->

                <div class="handleDialog" v-if="ishow && index==current"></div>

            </li>

        </ul>

    </section>

</template>

<script>

    export default {

        data() {

            return {

                ishow: false,

                current: 0, //当前操作按钮

            };

        },

        methods: {

            //显示操作项

            showDialog(index, item) {

                this.ishow = true;

                this.current = index;

            },

            //隐藏蒙层

            hideDialog(index, item) {

                this.ishow = false;

                this.current = null;

            },

        }

    };

</script>

<style lang="less">

    .handleDialog {

        position: absolute;

        top: 0;

        left: 0;

        z-index: 2;

        background: rgba(0, 0, 0, 0.6);

        width: 100%;

        height: 100%;

        border-radius: 4px;

    }

</style>