charge-java/admin-web/src/components/form/ExtImage.vue

<template>
  <div class="demo-image__preview">
    <el-image
        :z-index="99999"
        style="width: 60px; height: 60px"
        :src="state.url"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="state.previewList"
        :initial-index="4"
        fit="cover"
        :preview-teleported="true"
    />
<!--    <el-dialog
        v-model="state.visible"
        fullscreen
        draggable
        destroy-on-close
        :close-on-click-modal="false"
        @close="state.visible=false">
      <el-image-viewer
          :url-list="state.previewList"
          @close="close"
      />
    </el-dialog>-->

  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, watch} from 'vue';
import u from "/@/utils/u";

const props = defineProps({
  srcList: {
    type: Array < String >,
    default: () => {
      return []
    }
  }
})


const open = () => {
  state.visible = true;
}


const close = () => {
  state.visible = false;
}

const state = reactive({
  visible: false,
  url: '',
  previewList: []
})

watch(() => props.srcList, (nv, ov) => {
  if (nv) {
    state.previewList = [];
    if (Array.isArray(nv)) {
      nv.forEach((item: any) => {
        state.previewList.push(u.fmt.fmtUrl(item));
      })
      state.url = state.previewList[0]
    } else {
      state.previewList = [u.fmt.fmtUrl(nv)];
      state.url = state.previewList[0]
    }
    console.log(state.previewList)
  }
}, {immediate: true, deep: true})

defineExpose(
    open
)
</script>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 100px;
}
</style>