Solve the incomplete preview display of el-image in 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>

Because in the dialog, when you click on the picture to preview, the maximum range is the range of the dialog

Just add an attribute to 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

 

Guess you like

Origin blog.csdn.net/qq_63608386/article/details/129693664