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

啦啦啦啦

发布于 2023-11-22 10:29:03

1.2K0

发布于 2023-11-22 10:29:03

文章被收录于专栏：啦啦啦啦前端啦啦啦啦前端

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

script部分

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