element:大图预览出现层级穿透问题

项目中有这样的数据格式:

[
	{
		attachments: []   // 图片地址数组
		// ...其它
	},
	// ...其它
]

这时候需要将外层循环后再循环图片,使用el-image的previewSrcList开启大图预览。当外层有多个的时候,这时点击前面的图片大图,后面的内容会穿透到大图上,此时查看后面内容的层级为1,但大图的层级为2000,按常理不会穿透,百思不得其解,F12调试将.el-card__body的层级去掉时候就正常了。

<el-row :gutter="20" v-if="item.children">
  <el-col :span="24 / item.children.length" v-for="child in item.children" :key="child.id">
    <el-card shadow="hover" style="z-index: 1">
      <h5 class="ei-flow-title">{{ child.title }}</h5>
      <div class="demo-image__preview img-flex" v-if="child.attachments.length > 0">
        <el-image fit="cover" v-for="(img, i) in child.attachments" :key="i" :src="img" :preview-src-list="child.attachments" ref="previewImage" @click.capture="handlePreviewImage(i)">
        </el-image>
      </div>
      <div v-if="child.attachments.length < 1 && item.status == 1">
        <div class="demo-image__error">
          <div class="block">
            <el-image>
              <div slot="error" class="image-slot">无稽核图片...</div>
            </el-image>
          </div>
        </div>
      </div>
      <div style="padding: 10px 0; display: flex">
        <div style="min-width: 80px; font-size: 15px; line-height: 32px">稽核意见:</div>
        <div style="margin: 0 5px; flex-grow: 1">
          <el-tag :hit="true" type="info" class="custom-tag" width="100%">{{ child.content }}</el-tag>
        </div>
      </div>
      <div class="ei-flow-time">{{ child.time }}</div>
      <label class="ei-flow-status" v-show="child.status == 1" :style="{ backgroundColor: child.background != null && String(child.background).length > 0 ? child.background : '#13ce66' }">
        <!-- <i class="el-icon-upload-success el-icon-check"></i> -->
        <span v-if="child.transferStatus == 0">稽核驳回</span>
        <span v-else>稽核通过</span>
      </label>
      <label class="ei-flow-status" v-show="child.status == 0" :style="{ backgroundColor: '#909399' }"> 等待稽核 </label>
    </el-card>
  </el-col>
</el-row>

解决css:

.ei-flow-form .el-card__body {
  // 解决大图预览其它地方层级穿透问题
  z-index: initial !important;
}
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值