弹出框有很多种，有的适合使用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) } } 调用，很简单，不给出全部代码了：layer.msg("我是快乐的弹窗");