小白第五课 - 右侧手风琴

1. HTML部分

<div v-if="configShow">
    <div style="width:100%;height:100%;position:fixed;top:0;left:0;background:#FFF;opacity:0;z-index:900" @click="hideConfig" >
    </div>
    <div class="configShow" style="z-index:900">
        111111111111
    </div>
</div>

2. JS部分

//显示统计设置
showConfig(){
  this.configShow = true;
},
//隐藏统计设置
hideConfig(){
  this.configShow = false;
},

3. CSS部分

.configShow {
    background: #fff;
    box-shadow: 0px 21px 12px 0px rgba(0, 0, 0, 0.19);
    width: 48.75%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
    overflow: auto;
}