美文网首页
vue实现hover弹窗效果

vue实现hover弹窗效果

作者: 似朝朝我心 | 来源:发表于2022-03-06 23:58 被阅读0次

一直以来都很好奇爱奇艺的视频列表中弹窗是怎么做到的？

我们来看下爱奇艺的效果：


我们可以看到，这种弹窗的效果靠css的hover属性来实现有些不太现实。

对比效果图，我们可以知道这个弹窗的功能是用了鼠标的移入事件mouseenter和移出事件mouseout来实现的，通过鼠标移入移出的时机来控制弹窗的出现与消退，而这个频繁的让弹窗的浮现和隐退，我们完全可以用v-show的功能来实现。

下面是我们实际模仿的效果，考虑到的每个视频对应不同的id，所以我们不能只单纯的实现一个弹窗，而是考虑鼠标移入哪个视频，该视频对应的弹窗就要弹出来。

效果：


测试代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title></title>
</head>
<style>
    #app {
        width: 1000px;
        display: flex;
        justify-content: space-around;
    }
    .box {
        width: 186px;
        height: 104px;
        background-color: beige;
        border: 1px solid;
        
    }

    .pop {
        width: 300px;
        height: 400px;
        background-color: rgb(20, 22, 26);
        border-radius: 8px;
        position: relative;
        right: 50px;
    }
</style>

<body>
    <div id="app">
        <div v-for="item in list" :key="item.id">
            <div class="box" @mouseenter="mouseEnter(item.id)">
                <div class="pop" v-show="item.select" @mouseout="mouseOut(item.id)"></div>
            </div>
            
        </div>

    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                pop: false,
                list:[{
                    id:0,
                    select:false
                },{
                    id:1,
                    select:false
                },{
                    id:2,
                    select:false
                }]
            },
            methods: {
                mouseEnter(id) {
                    this.list[id].select = true
                },
                mouseOut(id) {
                    this.list[id].select = false
                }
            }

        })
    </script>
</body>
</html>

相关文章