Exigences : En développement, nous rencontrons souvent la fonction de prévisualisation des images en cliquant sur un bouton ou un texte. Nous présentons ici comment implémenter la méthode de prévisualisation d'image dans vue2 et vue3 respectivement.
Vue2 implémente l'aperçu de l'image via les composants el-image
1. Obtenez l'élément DOM via la référence au composant el-image, puis nous utilisons la méthode clickHandler pour obtenir un aperçu de l'image en cliquant sur l'image.
<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 implémente l'aperçu de l'image via le composant el-image-viewer
2. Ici, nous distinguons l'utilisation de vue2. Nous utilisons v-if pour déterminer s'il faut prévisualiser l'image pop-up.
<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>