VUE3+element plus在el-tabs内部有多个el-dialog时，遮罩会叠加

目录

实现效果

问题分析

解决方法

---

实现效果

有问题的效果，遮罩层是黑色的，需要多次点击才能关闭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>