快捷導(dǎo)航

vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能實(shí)例

更新時(shí)間：2023年09月08日 08:20:23 作者：ZL隨心

這篇文章主要給大家介紹了關(guān)于vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項(xiàng)目中我們經(jīng)常會(huì)碰到圖片預(yù)覽的功能需求,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

效果

實(shí)現(xiàn)

element-plus下有這么一個(gè)組件 <el-image-viewer/>，但是這個(gè)組件是沒(méi)寫(xiě)在文檔上面的，像普通組件一樣使用即可

可以通過(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)文章

hansontable在vue中的基本使用教程
handsontable是目前在前端界最接近excel的插件，可以執(zhí)行編輯，復(fù)制粘貼，插入刪除行列，排序等復(fù)雜操作，這篇文章主要介紹了hansontable在vue中的基本使用,需要的朋友可以參考下
2022-10-10
vue?echart的使用詳細(xì)教程
這篇文章主要為大家詳細(xì)介紹了Vue中引用echarts的超詳細(xì)教程,文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們熟練使用vue有一定的幫助,需要的小伙伴可以參考一下
2023-09-09
前端報(bào)錯(cuò)npm ERR! cb() never called!問(wèn)題解決辦法
最近接手了一個(gè)前臺(tái)項(xiàng)目,執(zhí)行npm install的時(shí)候一直報(bào)錯(cuò),所以這里就給大家總結(jié)下,這篇文章主要給給大家介紹了關(guān)于前端報(bào)錯(cuò)npm?ERR! cb() never called!問(wèn)題的解決辦法,需要的朋友可以參考下
2024-05-05
vue實(shí)現(xiàn)圖片拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue $router和$route的區(qū)別詳解
這篇文章主要介紹了vue $router和$route的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
解決Idea、WebStorm下使用Vue cli腳手架項(xiàng)目無(wú)法使用Webpack別名的問(wèn)題
這篇文章主要介紹了解決Idea、WebStorm下使用Vue cli腳手架項(xiàng)目無(wú)法使用Webpack別名的問(wèn)題,需要的朋友可以參考下
2019-10-10
vue項(xiàng)目tween方法實(shí)現(xiàn)返回頂部的示例代碼
這篇文章主要介紹了vue項(xiàng)目tween方法實(shí)現(xiàn)返回頂部,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue 使用 canvas 實(shí)現(xiàn)手寫(xiě)電子簽名
這篇文章主要介紹了vue 使用 canvas 實(shí)現(xiàn)手寫(xiě)電子簽名功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03
微信jssdk邏輯在vue中的運(yùn)用詳解
這篇文章主要介紹了微信jssdk邏輯在vue中的運(yùn)用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)
這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)，文章以天氣為例展開(kāi)介紹Vue?監(jiān)視屬性?的相關(guān)內(nèi)容，需要的小伙伴可以參考一下
2022-05-05