vue，element-ui 登陆注册面板

先甩个成品效果图：

几个小笔记

整体思路：首先写一个绝对定位的页面，先隐藏起来，当点击登陆，注册时，将其显示出来。控制显示隐藏用的是Vue的 v-if.

需要注意的是，要禁止页面的滚动，否则底部在滚动时会漏出来。

//禁止滚动
document.getElementsByTagName("body")[0].style = "overflow: hidden;";

1. 全屏幕阴影

.pannel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1502;
  background-color: rgba(0, 0, 0, 0.7);
}

关键在于position设置为absolute，大小设置为100%，背景加上透明度，z-index设置足够大，这里设置成1502是因为我在网站里面集成了mavon-editor，它的z-index是1500，然后我又把顶部菜单栏设置成了1501，所以这里设置成1502了。

2. 面板中的文字居中

text-align: center;

3. 鼠标箭头变小手

cursor:pointer;

4. 完整代码

PS: 在element-ui的基础上

    

      

        
          
        
        
登陆·注册 
        
        
        登陆
      
    
    
    

      

        
          
        
        
登陆·注册 
        
        
        
        注册
      
    


.pannel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1502;
  background-color: rgba(0, 0, 0, 0.7);
}
.pannel-inner {
  position: absolute;
  background-color: white;
  left: 40%;
  top: 30%;
  width: 20%;
  /* border: solid #409eff 1px; */
  padding: 0 17px 17px 17px;
  font-size: 18px;
}
.pannel-header {
  margin-bottom: 7px;
  text-align: center;
}

就酱,先记这几点。