使用el-image-viewer查看大图

<template>
  <div>
    <el-image-viewer
      v-if="showImageViewer"
      :url-list="imageList"
      :z-index="9999"
      :initial-index="selectedIndex"
      @close="handleImageHide"
    ></el-image-viewer>

    <!-- 点击图片缩略图时触发显示图片 -->
    <img 
      v-for="(image, index) in imageList"
      : src="image" 
      :key="index"
      @click="handleImageClick(index)"
      style="cursor: pointer"
    >
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElImageViewer } from 'element-plus'

export default defineComponent({
  name: 'text',
  components: {
    ElImageViewer
  },
  setup() {
    const showImageViewer = ref(false)
    const selectedIndex = ref(0)
    const imageList = ref([
      'https://bing.com/th?id=OHR.ItalyCinqueTerre_ZH-CN6495965228_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
      'https://img3.wallspic.com/previews/5/7/7/3/7/173775/173775-dong_tian-a_er_bei_si_shan-fa_guo-jia_na_da-luo_ye_song-x750.jpg'
    ])

    const handleImageClick = (index) => {
      showImageViewer.value = true
      console.log(index)
      selectedIndex.value = index
    }

    const handleImageHide = () => {
      showImageViewer.value = false
    }

    return {
      imageList,
      showImageViewer,
      selectedIndex,
      handleImageClick,
      handleImageHide
    }
  }
})
</script>

解释一下el-image-viewer的属性

<el-image-viewer
  v-if="showImageViewer"
  :url-list="imageList"
  :z-index="9999"
  :initial-index="selectedIndex"
  @close="handleImageHide"
></el-image-viewer>

showImageViewer我们定义这个函数让它初始化为false

url-list也就是绑定图片的列表

const imageList = ref([
  'https://bing.com/th?id=OHR.ItalyCinqueTerre_ZH-CN6495965228_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
  'https://img3.wallspic.com/previews/5/7/7/3/7/173775/173775-dong_tian-a_er_bei_si_shan-fa_guo-jia_na_da-luo_ye_song-x750.jpg'
])

可以看到我在imageList中给了两张图片的url

initial-index属性，当我们点击图片的时候它默认会从imageList列表中的第一张图片进行播放，而我们想让它从点击的图片播放，将handleImageClick(index)绑定在图片上，我们就可以获取图片的索引了。