Requisitos: en desarrollo, a menudo nos encontramos con la función de vista previa de imágenes al hacer clic en un botón o texto. Aquí presentamos cómo implementar el método de vista previa de imágenes en vue2 y vue3 respectivamente.
Vue2 implementa la vista previa de imágenes a través de componentes el-image
1. Obtenga el elemento DOM a través de la referencia al componente el-image y luego usamos el método clickHandler para lograr la vista previa de la imagen al hacer clic.
<template>
<div>
<el-button type="primary" @click=PreviewImg() >图片</el-button>
<el-image
ref="elImage"
style="width: 0; height: 0;"
:src="bigImageUrl"
:preview-src-list="logicImageList">
</el-image>
</div>
</template>
<script>
export default {
data () {
return {
bigImageUrl: '',
logicImageList: []
}
},
methods :{
PreviewImg() {
// 调用接口之后获取图片数据
this.logicImageList = res.data.map((item) => {
return item.accessUrl })
this.$nextTick(() => {
this.$refs.elImage.clickHandler()
})
}
}
}
</script>
Vue3 implementa la vista previa de imágenes a través del componente el-image-viewer
2. Aquí distinguimos el uso de vue2: usamos v-if para determinar si desea obtener una vista previa de la imagen emergente.
<template>
<div>
<el-button type="primary" @click=PreviewImg() >图片</el-button>
<el-image-viewer
style="width: 100px; height: 100px"
v-if="state.imgViewerVisible"
@close="closeImgViewer"
:url-list="state.srcList">
</el-image-viewer>
</div>
</template>
<script setup lang="ts" name="uploadFile">
import {
nextTick, reactive } from 'vue';
const state: any = reactive({
imgViewerVisible: false,
srcList: []
})
function PreviewImg() {
// 调用接口之后获取图片数据
state.srcList= res.data.map((item) => {
return item.accessUrl })
state.imgViewerVisible = true
}
function closeImgViewer () {
state.imgViewerVisible = false
}
}
</script>