遮罩层按钮事件失效

项目场景：

鼠标悬浮在图片上时，显示删除按钮。点击完成删除操作，

问题描述：

实现完页面效果时，点击删除标识不能触发删除事件。

原因分析：

可能是遮罩层，挡住了按钮事件。

解决方案：

1. 在遮罩层添加pointer-events:none;样式

   .mask{
       position:absolute;
       background:rgba(101,101,101,0.6);
       color:#ebe3e3;
       opacity: 0;
       top: 0;
       right: 0;
       width: 100%;
       height: 100%;
       border-radius: 10px;
       pointer-events:none;
   }
   

2. 在点击元素上，添加pointer-events:auto样式

   <i class="el-icon-delete" style="pointer-events:auto" @click="adjustment_del(index)"></i></h3>
   

完整代码

			<el-dialog title="调整图片" :visible.sync="adjustmentDialog" width="30%">
				<div style="height: 15vw;width: 100%;overflow:auto;">
					<ul class="list" v-infinite-scroll="this.adjustment_loading" infinite-scroll-disabled="adjustment_disabled">
						<li v-for="(entity,index) in adjustmentList.list" 
							style="list-style-type: none; position:relative;flex-direction:row;">
							<div class="adjustment_img" style="width:auto;height: 100%;padding: 2px;">
								<img :src="entity.path" style="width:100%; height:100%;object-fit: cover;"
									class="mirrorRotateVertical" alt="pavement-image">
								<div class="mask" >
									<h3><i class="el-icon-delete" style="pointer-events:auto" @click="adjustment_del(index)"></i></h3>
								</div>
								<span v-html="entity.no" class="img_span"></span>
							</div>
						</li>
					</ul>
					<el-row style="height: 60px" v-if="adjustmentList.loading" v-loading="adjustmentList.loading"
						element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"></el-row>
					<div v-if="adjustmentList.noMore" class="image-slot">
						<span>暂无数据</span>
					</div>
				</div>
			</el-dialog>