廊坊安次区网站建设公司,中山网络公关,旅游网站模板下载,赣州城市资讯1 需求
直接上需求#xff1a;
我想要直接点击下面这个“预览”按钮#xff0c;然后呈现出预览图片的形式 ok#xff0c;需求知道了#xff0c;下面让我们来看看如何实现吧 ~
2 实现
template部分
el-buttontypeprimarysizesmallclick
我想要直接点击下面这个“预览”按钮然后呈现出预览图片的形式 ok需求知道了下面让我们来看看如何实现吧 ~
2 实现
template部分
el-buttontypeprimarysizesmallclickhandlePreview(scope.$index, scope.row)预览/el-button!-- 图片预览 --
el-image-viewerv-ifshowImagePreview:zoom-rate1.2closeclosePreview:url-listimgPreviewList
/const imgPreviewList refany([])
const showImagePreview ref(false)
const currentBase64FileData reactive({base64: ,name:
})const handlePreview async (index: number, row: any) {let res await handleDownload(index, row, true,)currentBase64FileData.base64 data:image/png;base64, res?.base64currentBase64FileData.name res?.nameshowImagePreview.value true// 下面数组里可以放一个url如https://raw.githubusercontent.com/JACK-ZHANG-coming/map-depot/master/2023image-20231120091054028.png我这里放的是一个base64数据也可以用来显示图片imgPreviewList.value [currentBase64FileData.base64]
}const closePreview () {imgPreviewList.value []showImagePreview.value false
}ok经过上面简单几句代码就实现了“点击按钮直接显示图片的预览形式”啦 ~
