<template>
  <div class="image-view">
    <el-image ref="imgRef" :src="img" :preview-src-list="[img]" close-on-press-escape preview-teleported>

    </el-image>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const img = ref("");


const open = async (src) => {
  img.value = src;
  await proxy.$nextTick();
  console.info(proxy.$refs.imgRef.$refs.container);
  proxy.$refs.imgRef.$refs.container.querySelector("img").click();
}

defineExpose({open})
</script>

<style lang="scss" scoped>
.image-view {
  user-select: none;
  display: none;
}
</style>