簡單的MPVUE遮罩層

HTML

  <div id="rightBlock" @click="showList" v-if="show">//外部也綁定了事件，可以實現點擊整個界面，將彈框收回
    <div id="personalInfo">
        <img :src="userInfo.avatarUrl" alt="">
    </div>
  </div>

設置一個button綁定彈框事件

  <button @click="showList">顯示</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;
  }