vue彈窗

[v-cloak]{display: none;}
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.25);
}
.dialog{
    width: 400px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate3d(-50%,-50%,0);
}

 1 <div id="app" v-cloak>
 2     <button @click="flag=true">彈</button>
 3     <!--若是:show的值是true則顯示，若是是false則隱藏（加:號show就是布爾類型），@close對應的函數是點擊關閉按鈕時觸發的函數-->
 4     <modal :showw="flag" @close="()=>flag=false"></modal><!--val=>flag=false，一點就是爲了觸發這個函數，這個函數的目的就是讓flag變爲false，因此不寫傳參也能夠-->
 5     <!--<modal :show="flag" @close="guanbi"></modal>-->
 6 </div>
 7 <template id="dialog">
 8     <div class="mask" v-show="showw">
 9         <div class="dialog">
10             <button @click="shutdown">關閉</button><!--觸發子的shutdown方法-->
11         </div>
12     </div>
13     <!--寫在這裏都轉成文檔碎片了，不會在頁面顯示出來-->
14 </template>

 1 let modal = {
 2     props:['showw'],//接收了父組件的屬性
 3     template:`#dialog`,//像嵌套，等於把id裏的元素都放在這裏了
 4     methods:{//子傳父
 5         shutdown(){
 6             this.$emit('close');//被觸發後找到父的close方法並執行，發佈 emit，子發佈這個函數，讓父去執行
 7         }
 8     }
 9 };
10 let vm = new Vue({
11     el:'#app',
12     data:{  //放數據
13         flag:false  //默認是關閉
14     },
15     components:{
16         modal,  //名字不能叫dialog，原生中已經佔用了這個名字
17     },
18 //  methods:{
19 //      guanbi(){
20 //         this.flag=false;
21 //      }
22 //  },
23 });