目录
实现效果
有问题的效果,遮罩层是黑色的,需要多次点击才能关闭dialog
问题分析
和elemenUI不同,使用element plus时,多个el-dialog不能写在不同的的el-tab-panel内部,这样会导致el-dialog的遮罩重叠,颜色越来越深,重叠的多的变成黑色。而elemenUI不存在这种问题。如下所示,遮罩是黑色的,点击消失的时候会有明显的延迟,有多个遮罩消失
有问题的代码。el-dialog部分放在了el-tab-pane内部
<el-tabs type="border-card" @tab-change="changeTab" v-model="activeTab">
<el-tab-pane label="我的订单" name="orders">
//...
<el-dialog title="订单详情" v-model="orderVisible" :append-to-body="true" :destroy-on-close="true">
//...
</el-dialog>
</el-tab-pane>
<el-tab-pane label="我的购物车" name="carts">
//...
<el-dialog title="商品详情" v-model="cartVisible" :append-to-body="true" :destroy-on-close="true">
//...
</el-dialog>
</el-tab-pane>
<el-tab-pane label="我的收藏" name="collections">
//...
<el-dialog title="商品详情" v-model="collectionVisible" :append-to-body="true" :destroy-on-close="true">
//...
</el-dialog>
</el-tab-pane>
</el-tabs>
解决方法
把多个el-dialog全部拿出来,放在el-tab-panel外面,这样多个el-dialog的遮罩就正常显示了
<el-tabs type="border-card" @tab-change="changeTab" v-model="activeTab">
<el-dialog title="订单详情" v-model="orderVisible" :append-to-body="true" :destroy-on-close="true">
//...
</el-dialog>
<el-dialog title="商品详情" v-model="cartVisible" :append-to-body="true" :destroy-on-close="true">
//...
</el-dialog>
<el-dialog title="商品详情" v-model="collectionVisible" :append-to-body="true" :destroy-on-close="true">
//...
</el-dialog>
<el-tab-pane label="我的订单" name="orders">
//...
</el-tab-pane>
<el-tab-pane label="我的购物车" name="carts">
//...
</el-tab-pane>
<el-tab-pane label="我的收藏" name="collections">
//...
</el-tab-pane>
</el-tabs>