vue3+element plus图片预览点击按钮直接显示图片的预览形式

简介: vue3+element plus图片预览点击按钮直接显示图片的预览形式

1 需求

直接上需求:

我想要直接点击下面这个“预览”按钮,然后呈现出预览图片的形式

 

ok,需求知道了,下面让我们来看看如何实现吧 ~

2 实现

template部分

<el-button
  type="primary"
  size="small"
  @click="handlePreview(scope.$index, scope.row)"
  >预览</el-button
>
<!-- 图片预览 -->
<el-image-viewer
  v-if="showImagePreview"
  :zoom-rate="1.2"
  @close="closePreview"
  :url-list="imgPreviewList"
/>
const imgPreviewList = ref<any>([])
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?.base64
    currentBase64FileData.name = res?.name
    showImagePreview.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,经过上面简单几句代码,就实现了“点击按钮直接显示图片的预览形式”啦 ~

相关文章
|
7天前
|
存储 JavaScript 开发者
Vue 3 组件通信方式总结
Vue 3 组件通信方式总结
|
4天前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
81 59
|
3天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
4天前
|
缓存 JavaScript 前端开发
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
该文章全面覆盖了Vue.js从基础知识到进阶原理的48个核心知识点,包括Vue CLI项目结构、组件生命周期、响应式原理、Composition API的使用等内容,并针对Vue 2与Vue 3的不同特性进行了详细对比与讲解。
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
|
7天前
|
JavaScript
Vue实现按钮级别权限
文章介绍了在Vue中实现按钮级别权限的两种方法:使用自定义Vue指令和使用v-if指令配合自定义方法。
16 4
Vue实现按钮级别权限
|
7天前
|
存储 JavaScript API
Vue3基础(25)___初尝pinia,相比于vuex轻量、好用
本文介绍了Pinia在Vue 3中的使用,相比于Vuex,Pinia更轻量且易于使用。文章详细解释了Pinia的基本概念、优势,并提供了安装和使用Pinia的步骤,包括定义状态、getters、actions和如何在组件中使用Pinia进行状态管理。
29 3
Vue3基础(25)___初尝pinia,相比于vuex轻量、好用
|
4天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
11 1
|
7天前
|
JavaScript
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
|
7天前
|
存储 JavaScript
Vue 3 组件通信方式
Vue 3 组件通信方式
|
7天前
|
JavaScript 前端开发 API
Vue2与Vue3插槽使用的区别及案例
Vue 3在插槽功能上的改进,体现了其对开发体验的持续优化。通过简化API、加强动态特性和提升性能,Vue 3使得插槽的使用更加灵活和高效。这些改进不仅有助于减轻开发者的负担,还为组件之间的高级交互和内容复用打开了新的可能性。随着Vue生态系统的不断成熟,我们有理由相信,Vue将继续为前端开发提供强大且易用的工具。
16 3
下一篇
无影云桌面