Vue2 implements image preview through el-image components
1. Get the DOM element to the el-image component through ref, and then we use the clickHandler method to achieve click image preview
<template>
<div>
<el-button type="primary" @click=PreviewImg() >picture</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() {
// Get image data after calling the interface = ((item) => { return })
this.$nextTick(() => {
this.$()
})
}
}
}
</script>Vue3 implements image preview through the el-image-viewer component
2. Here we distinguish the use of vue2. We use v-if to determine whether to preview pop-up pictures.
<template>
<div>
<el-button type="primary" @click=PreviewImg() >picture</el-button>
<el-image-viewer
style="width: 100px; height: 100px"
v-if=""
@close="closeImgViewer"
:url-list="">
</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() {
// Get image data after calling the interface = ((item) => { return })
= true
}
function closeImgViewer () {
= false
}
}
</script>This is the end of this article about vue implementing image preview effect through elementUI components. For more related vue elementUI image preview content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!