vue通过elementUI组件实现图片预览效果_vue.js_脚本之家
<template>
<div class="app-container">
<div class="leftBox">
<div class="title" style="margin-bottom: 20px">欢迎使用</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>
</div>
</template>
<script>
export default {
name: "Index",
components: { },
data() {
return {
logicImageList:\[\],
bigImageUrl: '',
};
},
methods: {
PreviewImg() {
console.log('点击图片')
// 调用接口之后获取图片数据
const imgUrl = 'https://oss.hzjyty.com/dev-upfile/20260814/3727b03570294523bbe42785672cd446.jpg'
this.bigImageUrl = imgUrl
this.logicImageList = imgUrl
this.$nextTick(() => {
console.log('点击图片2',this.$refs.elImage)
this.$refs.elImage.clickHandler()
})
},
},
};
</script>
<style scoped lang="scss">
</style>