<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <button @click="toggleShow">弹出</button> <modal :show="isShow" @clone="fn"> <h1 slot="title">你确定删除吗？</h1> </modal> </div> <template id="modal"> <transition name="fade"> <div v-show="show"> <div id="mask" @click="conse"></div> <div class="modal"> <button @click="conse" class="clone">关闭</button> <slot name="title">ok成功！</slot> </div> </div> </transition> </template> </body> <style> #mask{ position:fixed; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,0.5); } .modal{ width:400px; height:400px; position: absolute; z-index: 100; left:50%; top:50%; background: #ffffff; transform: translate3d(-50%,-50%,0) } .clone{ position: absolute; right:10px; top:10px; } /* 进入开始 */ .fade-enter{ opacity: 0; } /* 开始过渡阶段,动画出去阶段 */ .fade-enter-active{ transition: all 1s ease-out; } /* 出去终点 */ .fade-leave-active{ transition: all 1s ease-out; opacity: 0; } </style> <script src="node_modules/vue/dist/vue.js"></script> <script> let modal={ template:'#modal', props:{ show:{ type:Boolean } }, methods:{ conse(){ this.$emit('clone',false); } } }; let vm=new Vue({ el:"#app", data:{ isShow:false }, methods:{ fn(data){ this.isShow=data; }, toggleShow(){ this.isShow=true; } }, components:{ modal } }) </script> </html>