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

潜心专研的小张同学2023-11-21 16:46

1 需求

直接上需求：

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

也就是点击完"预览"按钮，会像下面这样：

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

2 实现

template部分

ini 复制代码

<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"
/>

script部分

ini 复制代码

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，经过上面简单几句代码，就实现了"点击按钮直接显示图片的预览形式"啦 ~

3 技术小结

技术栈： vue3+ element plus，其中vue3采用的是script setup组合式语法的形式。

这部分功能其实在element plus官方文档中有写，

element-plus.org/zh-CN/compo...

不同的是，这里element plus并没有给出实际样例，只是用文字描述了下，咱就是说，家人们，这坑不坑，我还是看了别人的博客才知道这块的用处>_<