<template><view class="app"><button type="default" @click="qiehuan()">点击我</button><view class="" v-if="suzi"><view class="zhezhao" ><view class="" @click="dianji()">点击我</view></view><view class="fangkuang">我是弹出框</view></view></view></template><script>export default {data() {return {suzi: false};},methods:{qiehuan:function() {console.log(this.suzi)this.suzi = !this.suzi},dianji:function() {console.log(666)}}}</script><style lang="scss">.zhezhao {height: 100vh;width: 100vw;opacity: 0.5; background: rgba(0, 0, 0, 0.4);pointer-events: none;//让遮罩层里面的元素不能被点击}.fangkuang {top: 50%;left: 50%;//以元素的左上角为起点并不是完全居中还有自己本身的距离transform: translate(-50%,-50%);//这个是指向上向左偏移自己的一半height: 300upx;width: 300upx;position: absolute;background: #FFFFFF;animation: mymove 2s ;z-index: 100;@keyframes mymove {from{opacity: 0;}to {opacity: 1;}}@keyframes mymove {from{height: 100upx;width: 100upx;}to {height: 300upx;width: 300upx;}}}</style>
