我在首页做了一个点击事件会出现遮罩层,此时上面会覆盖一个弹出框,而里面在复用组件<registerlog class="register-log"/>时,组件里面的select下拉选框点击没有生效
<div class="all">
<!-- 遮罩层 -->
<!-- 注册登录遮罩层 -->
<div class="mask" v-show="maskShow" @click="setMaskShow"></div>
<!-- 订单查询遮罩层 -->
<div class="mask" v-show="maskShow1" @click="setMaskShow1"></div>
<!-- 未登录下的登录注册组件界面 -->
<div class="child" id="child" v-show="maskShow">
<span @click="setMaskShow"><i class="el-icon-close"></i></span>
<!-- 组件registerLog -->
<registerlog class="register-log"/>
</div>
<!-- 未登录下的订单查询界面 -->
<div class="child1" id="child1" v-show="maskShow1">
<span @click="setMaskShow1"><i class="el-icon-close"></i></span>
<!-- 组件unloginSelector -->
<unlogin-selector class="unlogin-Selector" />
</div>
之后我发现网上说的好多说将select的css样式里的z-index调高,而并没有解决实际问题后来我查文档手册找到了解决方法,如下
<el-select v-if="list" v-model="value" id="sel1" placeholder="年" :popper-append-to-body="false">
我这里用的是el-select下拉框,加了 :poper-append-to-body="false" 这样一句话,成功在父组件出来了样式。