快捷導(dǎo)航

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

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

本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(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ù)組件無法使用全局組件，需要單獨引入
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    remove: {
        type: Function, //傳入createApp中移除節(jié)點的方法
        default: null,
    },
    // api文檔：https://element-plus.org/zh-CN/component/image.html#image-viewer-attributes
})
const show = ref(props.visible)
// 監(jiān)聽顯示的消失，需要移除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)建一個節(jié)點，并將組件掛載上去
    const root = document.createElement('div')
    document.body.appendChild(root)
    const app = createApp(index, {
        ...options, visible: true, remove() {
            app.unmount(root) //創(chuàng)建完后要進行銷毀
            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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中從template到j(luò)sx語法教程示例
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10
對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解
今天小編就為大家分享一篇對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue實現(xiàn)導(dǎo)出word文檔的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue如何使用第三方庫file-saver和html-docx-js實現(xiàn)導(dǎo)出word文檔的效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02
Vuejs中的watch實例詳解(監(jiān)聽者)
本文通過實例代碼給大家介紹了Vuejs中的watch，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2020-01-01
vue實現(xiàn)通訊錄功能
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)通訊錄功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07
詳解如何在Vue項目中發(fā)送jsonp請求
這篇文章主要介紹了詳解如何在Vue項目中發(fā)送jsonp請求，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
詳解Vue3.0中ElementPlus<input輸入框自動獲取焦點>
這篇文章主要給大家介紹了關(guān)于Vue3.0中ElementPlus<input輸入框自動獲取焦點>的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3.0具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2023-04-04
vuex+axios+element-ui實現(xiàn)頁面請求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實現(xiàn)頁面請求loading操作,結(jié)合實例形式分析了vuex+axios+element-ui實現(xiàn)頁面請求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下
2020-02-02
unplugin-auto-import的配置以及eslint報錯解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,是一個功能強大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報錯解決的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue中slot插槽的參數(shù)匯總及使用方案
Vue.js中的插槽（slot）是一種機制，允許你在組件的模板中預(yù)留一些位置，以便父組件可以將任意內(nèi)容插入到這些位置，這使得組件更加靈活和可復(fù)用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下
2024-03-03