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>

 

转载于:https://www.cnblogs.com/zhaozhenzhen/p/11022225.html