vue结合el-image实现点击按钮图片预览效果

最新推荐文章于 2024-04-02 20:16:54 发布

PXY_J

最新推荐文章于 2024-04-02 20:16:54 发布

阅读量1.4k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39536826/article/details/132732014

版权

全部代码如下

<template>
<el-button type="text" @click="showPic">预览图片</el-button>
<el-image-viewer
  ref="previewViewer"
  style="z-index:10"
  v-if="showImageViewer"
  :on-close="closeImgView"
  @close="closeImgView"
  :url-list="srcList"
/>
<!--需要展示的图片-->
 <el-image  
    :src="previewsImgUrl"
    :zoom-rate="1.2"
    :preview-src-list="srcList"
    :initial-index="4"
    fit="cover"/>
</template>
<script>
import { ref} from "vue";
const previewsImgUrl = ref()
const srcList = ref([])
const previewViewer = ref()
const showImageViewer= ref(false)
// 打开图片预览
const showPic=()=>{
	//
	srcList.value=['http://xxx.xx.xx.xxx:7788/profile/avatar/2023/09/07/chris_20230907101205A071.jpg']
    showImageViewer.value = true
}
    showImageViewer.value = true
}
//关闭预览弹框
const closeImgView=()=>{
    showImageViewer.value = false
    // previewViewer.value.showViewer = false
}
			
</script>