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

最新推荐文章于 2023-05-18 17:29:28 发布

转载最新推荐文章于 2023-05-18 17:29:28 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaozhenzhen/p/11022225.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Vue.js实现的列表项鼠标悬停显示对话框的功能，通过监听mouseenter和mouseleave事件来控制对话框的显示与隐藏，提供了一段可直接使用的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>