#應用場景#
1.頁面顯示出現(xiàn)多張圖片時，需要點擊查看預覽
2.需要點擊當前圖片就顯示當前圖片，點擊下一張上一張功能不受影響
#實現(xiàn)思路#
1.使用Element Ui中的圖片預覽API previewSrcList,可以顯示點擊預覽效果，但是無法做到實時根據(jù)當前點擊的圖片顯示預覽當前的圖片
2.解決方法：previewSrcList 中的initial-index 可以之前在點擊預覽的時候顯示一張圖片，可以將點擊的圖片的 索引 動態(tài)的賦值?nitial-index，這樣就能實時的 點擊那個就預覽那個了
#完整代碼#
1.直接復制代碼運行，再更具自己項目調整
<template>
? <div style="width: 70vh;">
? ? <div>更新時間：{{ time }}</div>
? ? <div style="display: flex;flex-wrap:wrap;;width: 90vw;">
? ? ? <div v-for="(item, index) in list" :key="item.hsh">
? ? ? ? <el-image
? ? ? ? ? style="width: 400px;margin-left: 5px;"
? ? ? ? ? :src="'https://www.bing.com/' + item.url"
? ? ? ? ? :zoom-rate="1.2"
? ? ? ? ? :max-scale="7"
? ? ? ? ? :min-scale="0.2"
? ? ? ? ? title="點擊查看原圖"
? ? ? ? ? :preview-src-list="viewUrl"
? ? ? ? ? :initial-index="index"
? ? ? ? ? @click="viewPicture(index)"
? ? ? ? ? fit="cover" />
? ? ? </div>
? ? </div>
? </div>
</template>
<script setup>
import { ref } from 'vue'
const time = ref()
const list = ref()
const viewUrl = ref([])
const index = ref(0)
const getList = () => {
? fetch('https://raw.onmicrosoft.cn/Bing-Wallpaper-Action/main/data/zh-CN_all.json', {
? ? method: 'get',
? }).then(res => res.json()).then(res => {
? ? const { LastUpdate, data } = res
? ? time.value = LastUpdate
? ? list.value = data
? ? viewUrl.value = list.value.map(i => { return 'https://www.bing.com/' + i.url })
? })
}
const viewPicture = (i) => {
? index.value = Number(i)
}
getList()
</script>
<style scoped>
::v-deep(.el-image-viewer__wrapper){
? padding: 100px 0 100px 0;
}
</style>
#功能效果#
#結語#文章來源：http://www.zghlxwxcb.cn/news/detail-855607.html
思路比較簡單，在實現(xiàn)當前功能的基礎上不影響原有功能，文章來源地址http://www.zghlxwxcb.cn/news/detail-855607.html
到了這里，關于Element Ui中圖片預覽功能，點擊當前圖片顯示當前圖片。的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
