<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .mask{ width:100%; height: 100%; background:rgba(0,0,0,.35); position: fixed; top:0; left:0; } .dialog{ width:400px; height:200px; background: #fff; border:1px gray solid; position: fixed; top: 50%; left:50%; transform: translate3d(-50%,-50%,0); } </style> </head> <body> <div id="app"> <button @click="flag=true">弹出</button> <modal :show="flag" @close="()=>flag=false"></modal> </div> <template id="dialog"> <div class="mask" v-show="show"> <div class="dialog"> <button @click="shutdown">关闭</button> </div> </div> </template> <script src="node_modules/vue/dist/vue.js"></script> <script> let modal={ props:['show'], methods:{ shutdown(){ this.$emit('close')//默认close } }, template:'#dialog' } const vm= new Vue({ el:'#app', data:{flag:false}, components:{ modal } }) </script> </body> </html>
dialog实现
最新推荐文章于 2019-02-16 09:52:11 发布