Vue3封装函数组件(ElImageViewer)预览图片

目录结构

index.vue

html 复制代码
<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

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文件中

js 复制代码
import previewImage from "@/fcComponents/previewImage"
previewImage({ urlList: ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"] })
相关推荐
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店3 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
别跟老夫聊头发3 小时前
vue缩放/放大时,实时更新/变换显示高度
vue.js
拾光拾趣录3 小时前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权3 小时前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598243 小时前
vue3源码解析:调度器
前端·vue.js
梦想CAD控件3 小时前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
bitbitDown4 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
markyankee1014 小时前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js