基于vue的弹窗功能实现

一个弹窗功能，只需要两行代码实现
下面是HTML

//右上角查看规则--弹窗开关
<div class="righttop">
        <a class="rule" href="javascript:;" @click="showpopup"></a>
</div>
//弹窗模块
<div v-show="popup" @click="closepopup">
      <!--这里是要展示的内容层-->
      <div class="login">
        1.这是规则说明；<br>
        2.打王者不要射手走边路，会被越塔；<br>
        3.请参考第二条；
      </div>
      <!--这里是半透明背景层-->
      <div class="over"></div>
</div>

data里面returen{}的数据；初始的值为0，即不显示弹窗

export default {
  data: function() {
    return {
      popup: 0,
    };
  },
methods(){
    //打开活动规则页面
    showpopup() {
      this.popup = 1;
    },
    //关闭活动规则页面
    closepopup() {
      this.popup = 0;
    },
}
};

下面是弹窗的CSS样式，半透明的背景

//这里面可以自定义字体样式等，都是CSS基础
.rule {
  position: absolute;
  width: 0.82rem;
  height: 0.36rem;
  top: 0.08rem;
  right: 0rem;
  background: #111111;
}
.login {
  position: fixed;
  font-size: 24px;
  height: 360px;
  width: 240px;
  background-color: gold;
  border-radius: 0.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
  .over {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;//透明度为70%
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #111111;
  }

因为是实现功能所以没做太多样式美化，凑合看看

1548153265(1).png

1548153303(1).png