vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能實(shí)例
效果
實(shí)現(xiàn)
element-plus下有這么一個(gè)組件 <el-image-viewer/>,但是這個(gè)組件是沒(méi)寫在文檔上面的,像普通組件一樣使用即可
可以通過(guò)點(diǎn)擊按鈕實(shí)現(xiàn)圖片預(yù)覽,而非el-image組件只能通過(guò)點(diǎn)擊圖片實(shí)現(xiàn)預(yù)覽
封裝組件
<template> <div class="img-viewer-box"> <el-image-viewer v-if="state.visible" :url-list="props.imgs" @close="close" /> </div> </template> <script lang="ts" setup> import { ref, reactive } from 'vue' import { useVModel } from '@vueuse/core' const props = defineProps<{ modelValue: boolean imgs: string[] }>() const emits = defineEmits<{ (e: 'update:modelValue', data: boolean) }>() const state = reactive({ imgList: [], // 相當(dāng)于是set 與 get visible: useVModel(props, 'modelValue', emits), }) // 點(diǎn)擊關(guān)閉的時(shí)候,連同小圖一起關(guān)閉 function close() { state.visible = false } </script> <style scoped></style>
組件使用
在需要使用的地方引入,然后使用即可,這不是重點(diǎn),每個(gè)人使用的方式都不一樣,根據(jù)自己需求來(lái)即可
重點(diǎn)是上面的組件封裝,看明白就會(huì)用了
<!-- 增加用于顯示預(yù)覽圖片 --> <ImgPreview v-model="state.visible.modal" :imgs="[state.imageUrl]" />
總結(jié)
到此這篇關(guān)于vue3 element-plus實(shí)現(xiàn)圖片預(yù)覽功能的文章就介紹到這了,更多相關(guān)vue3 element-plus圖片預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue獲取HTMLCollection列表的children時(shí)結(jié)果為undefined問(wèn)題
這篇文章主要介紹了Vue獲取HTMLCollection列表的children時(shí)結(jié)果為undefined問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例
本篇主要介紹了Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12Vue實(shí)現(xiàn)動(dòng)態(tài)表單的示例詳解
在前端開發(fā)中,我們經(jīng)常遇到根據(jù)用戶輸入動(dòng)態(tài)生成不同表單項(xiàng)的需求,本文將詳細(xì)講解如何使用?Vue?3?的響應(yīng)式特性,逐步構(gòu)建一個(gè)遞歸動(dòng)態(tài)表單,感興趣的可以了解下2024-12-12Vue實(shí)現(xiàn)contenteditable元素雙向綁定的方法詳解
contenteditable是所有HTML元素都有的枚舉屬性,表示元素是否可以被用戶編輯。本文將詳細(xì)介紹如何實(shí)現(xiàn)contenteditable元素的雙向綁定,需要的可以參考一下2022-05-05通過(guò)vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄
這篇文章主要給大家介紹了關(guān)于通過(guò)vue.extend實(shí)現(xiàn)消息提示彈框的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01vue中配置mint-ui報(bào)css錯(cuò)誤問(wèn)題的解決方法
本篇文章主要介紹了vue中配置mint-ui報(bào)css錯(cuò)誤問(wèn)題的解決方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10