快捷導(dǎo)航

Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼

更新時(shí)間：2023年07月28日 11:07:05 作者：明知山_

本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

目錄結(jié)構(gòu)

index.vue

<template>
    <el-image-viewer v-if="show" v-bind="$attrs" hide-on-click-modal @close="show = false" />
</template>
<script setup>
import { ref, watch } from "vue"
import { ElImageViewer } from "element-plus" //自定義函數(shù)組件無(wú)法使用全局組件，需要單獨(dú)引入
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    remove: {
        type: Function, //傳入createApp中移除節(jié)點(diǎn)的方法
        default: null,
    },
    // api文檔：https://element-plus.org/zh-CN/component/image.html#image-viewer-attributes
})
const show = ref(props.visible)
// 監(jiān)聽(tīng)顯示的消失，需要移除dom
watch(() => show.value, (val) => {
    !val && props.remove()
})
</script>

index.js

import { createApp } from 'vue'
import index from './index.vue'
export default (options) => {
    // 創(chuàng)建一個(gè)節(jié)點(diǎn)，并將組件掛載上去
    const root = document.createElement('div')
    document.body.appendChild(root)
    const app = createApp(index, {
        ...options, visible: true, remove() {
            app.unmount(root) //創(chuàng)建完后要進(jìn)行銷毀
            document.body.removeChild(root)
        }
    })
    return app.mount(root)
}

使用方法在js||vue文件中

import previewImage from "@/fcComponents/previewImage"
previewImage({ urlList: ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"] })

到此這篇關(guān)于Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼的文章就介紹到這了,更多相關(guān)Vue3 ElImageViewer預(yù)覽圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3中導(dǎo)航守衛(wèi)的基本使用方法
這篇文章主要給大家介紹了關(guān)于Vue3中導(dǎo)航守衛(wèi)的基本使用方法,正如其名vue-router?提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,下面需要的朋友可以參考下
2023-03-03
vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過(guò)的坑及解決
這篇文章主要介紹了vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過(guò)的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
vue中使用props傳值的方法
這篇文章主要介紹了vue中使用props傳值的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue前端項(xiàng)目打包成Docker鏡像并運(yùn)行的實(shí)現(xiàn)
這篇文章主要介紹了vue前端項(xiàng)目打包成Docker鏡像并運(yùn)行的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
安裝vue3開(kāi)發(fā)者工具但控制臺(tái)沒(méi)有顯示出vue選項(xiàng)的解決
這篇文章主要介紹了安裝vue3開(kāi)發(fā)者工具但控制臺(tái)沒(méi)有顯示出vue選項(xiàng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue3使用echarts繪制特殊樣式的折線圖和柱狀圖
這篇文章主要為大家詳細(xì)介紹了Vue3如何使用echarts實(shí)現(xiàn)繪制一些特殊樣式的折線圖和柱狀圖,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解下
2024-02-02
前端Vue3引入高德地圖并展示行駛軌跡動(dòng)畫(huà)的步驟
最近在Vue項(xiàng)目中引入高德地圖,實(shí)現(xiàn)地圖展示與交互的方法和技術(shù),這里跟大家分享下,這篇文章主要給大家介紹了關(guān)于前端Vue3引入高德地圖并展示行駛軌跡動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下
2024-09-09
vite打包靜態(tài)文件打開(kāi)顯示空白的解決
本文主要介紹了vite打包靜態(tài)文件打開(kāi)顯示空白的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
通過(guò)vue如何設(shè)置header
這篇文章主要介紹了通過(guò)vue如何設(shè)置header,每個(gè)項(xiàng)目都有頭部但是內(nèi)容不一樣;這種情況我們可以考慮在app.vue中創(chuàng)建公共頭部，那么怎么配置公共頭部header，下面小編通過(guò)實(shí)例代碼詳細(xì)講解，需要的朋友可以參考下
2023-02-02
Vue中mixins的使用方法詳解
mixins是一種分發(fā) Vue 組件中可復(fù)用功能的使用方式,它是一個(gè) js 對(duì)象,包含我們組件script中的任意功能選項(xiàng),下面就跟隨小編一起來(lái)看看它的具體使用吧
2024-03-03