vue通過elementUI組件實現(xiàn)圖片預覽效果
更新時間：2023年09月27日 10:15:23 作者：SwJieJie
我們在開發(fā)中經(jīng)常會遇到通過點擊某個按鈕或者文字實現(xiàn)圖片的預覽功能,這里我們分別介紹vue2和vue3里面如何實現(xiàn)圖片預覽方法,需要的朋友可以參考下
Vue2通過el-image的組件實現(xiàn)圖片預覽
1，通過ref給el-image組件上面獲取DOM元素，然后我們通過clickHandler方法來實現(xiàn)點擊圖片預覽
<template>
<div>
<el-button type="primary" @click=PreviewImg() >圖片</el-button>
<el-image
ref="elImage"
style="width: 0; height: 0;"
:src="bigImageUrl"
:preview-src-list="logicImageList">
</el-image>
</div>
</template>
<script>
export default {
data () {
return {
bigImageUrl: '',
logicImageList: []
}
},
methods :{
PreviewImg() {
// 調用接口之后獲取圖片數(shù)據(jù)
this.logicImageList = res.data.map((item) => { return item.accessUrl })
this.$nextTick(() => {
this.$refs.elImage.clickHandler()
})
}
}
}
</script>Vue3通過el-image-viewer的組件實現(xiàn)圖片預覽
2，這里我們區(qū)別vue2的使用，我們通過v-if判斷是否預覽彈窗圖片的。
<template>
<div>
<el-button type="primary" @click=PreviewImg() >圖片</el-button>
<el-image-viewer
style="width: 100px; height: 100px"
v-if="state.imgViewerVisible"
@close="closeImgViewer"
:url-list="state.srcList">
</el-image-viewer>
</div>
</template>
<script setup lang="ts" name="uploadFile">
import { nextTick, reactive } from 'vue';
const state: any = reactive({
imgViewerVisible: false,
srcList: []
})
function PreviewImg() {
// 調用接口之后獲取圖片數(shù)據(jù)
state.srcList= res.data.map((item) => { return item.accessUrl })
state.imgViewerVisible = true
}
function closeImgViewer () {
state.imgViewerVisible = false
}
}
</script>到此這篇關于vue通過elementUI組件實現(xiàn)圖片預覽效果的文章就介紹到這了,更多相關vue elementUI圖片預覽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue中內置了很多的指令,但有時候這些指令并不能滿足我們,或者說我們想為元素附加一些特別的功能,這時候我們就需要用到vue中一個很強大的功能了—自定義指令,這篇文章主要給大家介紹了關于vue中自定義指令（directive）的基本使用方法,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車的小練習，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
vue組件中節(jié)流函數(shù)的失效的原因和解決方法
這篇文章主要介紹了vue組件中節(jié)流函數(shù)的失效和解決方法，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-12-12
mpvue是一個使用Vue.js開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，這篇文章主要介紹了mpvue構建小程序的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue+django實現(xiàn)一對一聊天功能的實例代碼
這篇文章主要介紹了vue+django實現(xiàn)一對一聊天功能,主要是通過websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2019-07-07
插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質和更大的重用性。2020-02-02
Vue props實現(xiàn)父組件給子組件傳遞數(shù)據(jù)的方式
Vue中的配置項Props能讓組件接收外部傳遞過來的數(shù)據(jù),本文給大家介紹了Vue props實現(xiàn)父組件給子組件傳遞數(shù)據(jù)的幾種方式,文中有詳細的實現(xiàn)方式,具有一定的參考價值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue3項目中封裝axios的示例代碼,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
本文主要介紹了vue2+elementui進行hover提示的使用，主要分為外部和內部，具有一定的參考價值，感興趣的可以了解一下2021-11-11
vue.js+Echarts開發(fā)圖表放大縮小功能實例
本篇文章主要介紹了vue.js+Echarts開發(fā)圖表放大縮小功能實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06