Vue3封装ElImageViewer预览图片的示例代码
作者：明知山_
本文主要介绍了Vue3封装ElImageViewer预览图片的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目录结构
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" //自定义函数组件无法使用全局组件，需要单独引入
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
remove: {
type: Function, //传入createApp中移除节点的方法
default: null,
},
// api文档：https://element-plus.org/zh-CN/component/image.html#image-viewer-attributes
})
const show = ref(props.visible)
// 监听显示的消失，需要移除dom
watch(() => show.value, (val) => {
!val && props.remove()
})
</script>index.js
import { createApp } from 'vue'
import index from './index.vue'
export default (options) => {
// 创建一个节点，并将组件挂载上去
const root = document.createElement('div')
document.body.appendChild(root)
const app = createApp(index, {
...options, visible: true, remove() {
app.unmount(root) //创建完后要进行销毁
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"] })到此这篇关于Vue3封装ElImageViewer预览图片的示例代码的文章就介绍到这了,更多相关Vue3 ElImageViewer预览图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！