简单的MPVUE遮罩层

HTML

  
//外部也绑定了事件,可以实现点击整个界面,将弹框收回

设置一个button绑定弹框事件

  

JS

data里设置:

    data () {
return {
  userInfo: {},
  show: false //用来控制显示与否的变量
}
  }
methods:{
showList () {
  this.show = !this.show
}
}

CSS

 #rightBlock{
display: block;
float: right;
width: 750rpx;
height: 100%;
z-index: 12;
position: absolute;
background:rgba(0,0,0,0.4);
  }
  #personalInfo{
display: block;
float: right;
width: 300rpx;
position: relative;
height: 100%;
background:#FFFFFF;
  }

你可能感兴趣的:(MPVUE)