vue元件實現模態框
阿新 • • 發佈：2018-10-31
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.js"></script> <style> .mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.18); } .dialog { width: 400px; height: 400px; background-color: #fff; position: fixed; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); /* 上邊移動到自身的-一半.... */ } </style> </head> <body> <div id="app"> <button @click='flag=true'>彈出</button> <!-- 模擬實現 <dialog :show='false' @close='fn'></dialog> --> <!--結構<div class="mask"> <div class="dialog"> <button>關閉</button> </div> </div> --> <model :show='flag' @close='()=>flag=false'></model> </div> <template id="dialog"> <div class="mask" v-show='show'> <div class="dialog"> <button @click='shut'>關閉</button> </div> </div> </template> </body> <script> let model = { props:['show'], //接收了父元件的屬性 template: '#dialog', methods:{ shut(){ this.$emit('close'); } } } let vm = new Vue({ el: "#app", data: { flag:false }, components: { model //名字不能叫dialog，原生html中已經佔用了這個名字 } }) </script> </html>