需求：點擊某個按鈕實現(xiàn)el-image中預(yù)覽大圖的效果

官方文檔：以下是官方的寫法，并不能達到我們的要求，官方實現(xiàn)的功能是點擊圖片達到預(yù)覽大圖的效果。如果你的按鈕就是圖片，也可以達到目前的功能

<template>
  <div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :preview-src-list="srcList"
      :initial-index="4"
      fit="cover"
    />
  </div>
</template>

<script lang="ts" setup>
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
</script>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>

1.el-image-viewer

el-image-viewer組件是element官方的組件，只是文檔中沒有寫出來，這個組件就是大圖預(yù)覽的組件，當引用ElImage組件的時候，需要把ElImageViewer也需要引入，就可以直接用這個組件了

<template>
	<div class="upload-single-img">
        <button @click="showImg">預(yù)覽</button>
        <el-image-viewer v-if="showImageViewer" :url-list="[url]" @close="close" />
    </div>
</template>

<script lang="ts" setup name="UploadSingleImg">
    import { ref, computed, reactive, defineComponent } from 'vue'
    const showImageViewer = ref(false) //組件是否顯示
    const url = ref([]) //預(yù)覽大圖的路徑集合
    const showImg= () => { //預(yù)覽大圖
        showImageViewer.value = true
    }
    const close = () => { //必須要這個事件 不然點擊右上角關(guān)閉按鈕沒有反應(yīng)
        showImageViewer.value = false
    }
</script>

2.通過ref直接調(diào)用el-image的單擊事件

以下是vue2的寫法，網(wǎng)上搜索的，沒有去實現(xiàn)過，我把這種寫法改成vue3的寫法發(fā)現(xiàn)好像不能實現(xiàn)，后面選擇了第一種寫法

<div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px" ref="previewImg"
      :src="url"
      :preview-src-list="srcList">
    </el-image>
</div>
<el-button type="danger" @click="viewBigPicture">點擊按鈕查看大圖</el-button>

import logo from '../../assets/logo.png';
export default {
  name: "vue_project",
  data() {
    return {
      url: logo,
      srcList: [logo]
    }
  },
  methods: {
    viewBigPicture(){
      this.$refs.previewImg.showViewer = true; //vue2寫法第一種寫法
      this.$refs.previewImg.clickHandler();     //vue2寫法第二種寫法
    }
  }
}

vue3寫法文章來源地址http://www.zghlxwxcb.cn/news/detail-528450.html

<div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px" ref="previewImg"
      :src="url"
      :preview-src-list="srcList">
    </el-image>
</div>
<el-button type="danger" @click="viewBigPicture">點擊按鈕查看大圖</el-button>

<script lang="ts" setup>
    import { ref, computed, reactive, defineComponent } from 'vue'
    const previewImg = ref(null)
    const viewBigPicture = () =>{
        previewImg.value.clickHandler()
    }

</script>

到了這里，關(guān)于vue3+element-plus+el-image實現(xiàn)點擊按鈕預(yù)覽大圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！