Vue之弹出框

最新推荐文章于 2025-09-24 11:49:41 发布

原创最新推荐文章于 2025-09-24 11:49:41 发布 · 2.6w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue #layer #弹出层

前端专栏收录该内容

40 篇文章

订阅专栏

博客介绍了在vue项目中实现动态插入式弹窗的方法。指出不同类型弹窗有不同控制方式，提示框适合使用时插入、结束时删除元素。介绍了通过方法将组件动态插入DOM并清理实例、删除元素的思路，还提及编写提示弹窗组件及相关调用代码。

弹出框有很多种，有的适合使用v-if加上一个控制变量来控制弹窗的显示或否。但是有的框，如提示框，适合使用时插入，结束时删除元素。如下图所示：
在这里插入图片描述
且看vue如何实现这种方式的弹窗，这里使用的是vue-cli建立的项目。

思路

我所知，组件实例化有三种方式，见vue学习笔记3.1小节。通过$mount方法可以将组件以编程时的方式动态插入DOM中，$destroy方法可以清理组件实例，然后再删除DOM元素。

代码

首先编写一个提示弹窗组件(TipLayer.vue)：

<template>
    <div class="msg">
        {{msg}}
    </div>
</template>


<script>
export default {
    name:"TipLayer",
    data(){
        return {
            msg:null
        }
    }
}
</script>

<style scoped>
    .msg{
        position:fixed;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        background-color: rgba(0,0,0,0.5);
        color: white;
        padding:0.5rem 1rem;
        border-radius: 10px;
        animation: TipLayer 2s;
    }
    @keyframes TipLayer {
        from{
            transform:translate(-50%,-50%) scale(0);
            opacity: 0;
        }
        25%{
            transform:translate(-50%,-50%);
            opacity: 1;
        }
        75%{
            transform:translate(-50%,-50%);
            opacity: 1;
        }
        to{
            transform:translate(-50%,-50%) scale(0);
            opacity: 0;
        }
    }
</style>

提示弹窗组件就是这么简单

编写layer.js，它负责实例化组件，插入DOM，删除组件和DOM：

import TipLayer from "./TipLayer"
import Vue from "vue"
import $ from "jquery"
import uuid from "uuid/v4"

let TipLayerClass=Vue.extend(TipLayer);//创建vue子类

export default {
    /**
     * 提示弹窗
     * @param msg 提示消息
     * @param callback 弹窗结束后的回调
     */
    tip(msg,callback){
        //实例对象，并初始化
        let tipLayer=new TipLayerClass();
        tipLayer.msg=msg;
        //创建挂载点
        let id="id-"+uuid();
        $("body").append(`<div id="${id}"></div>`);
        //挂载
        tipLayer.$mount("#"+id);
        //2s后删除
        setTimeout(function () {
            //删除
            tipLayer.$destroy();
            $(tipLayer.$el).remove();
            //回调
            callback?callback():null;
        },2000)
    }
}