[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 });
转载于:https://www.cnblogs.com/liufeiran/p/11162427.html
相关资源：各显卡算力对照表！
