简单的MPVUE遮罩层

最新推荐文章于 2022-10-21 09:50:37 发布

Wcheese

最新推荐文章于 2022-10-21 09:50:37 发布

阅读量2k

点赞数

分类专栏： MPVUE

本文链接：https://blog.csdn.net/qq_30304751/article/details/81349326

版权

MPVUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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;
  }