解决el-image在el-dialog内预览展示不全

<el-dialog
        v-model="table.dialog"
        title="计划审核"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        @closed="handleClose"
      >
        
          
          <el-image
            v-for="item in table.code_img"
            :key="item"
            style="width: 70px; height: 70px; margin: 0 10px 0 0"
            :src="domain + item"
            :zoom-rate="1.2"
            :preview-src-list="[domain + item]"
            :initial-index="4"
            fit="cover"
          />
          
        </div>
        
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="">确定</el-button>
          </span>
        </template>
      </el-dialog>

因为在dialog内,点击图片进行预览的时候最大范围就是dialog的范围

只需要给el-image加一个属性即可


<el-image
            preview-teleported
            v-for="item in table.thumb"
            :key="item"
            style="width: 70px; height: 70px; margin: 0 10px 0 0"
            :src="domain + item"
            :zoom-rate="1.2"
            :preview-src-list="[domain + item]"
            :initial-index="4"
            fit="cover"
          />

preview-teleported

猜你喜欢

转载自blog.csdn.net/qq_63608386/article/details/129693664