vue3+ts+elementPLus实现v-preview指令

<template>
    <div class="previewImg" @click="dialogVisible = true">
        <slot>
            <img :src="cHJvcHMuc3Jj" alt="5Zu+54mH5Yqg6L295aSx6LSl" />
        </slot>
    </div>
    <el-dialog v-model="dialogVisible" title="5p+l55yL5Zu+54mH" @close="close">
        <img :src="aW1nU3Jj" alt="UHJldmlldyBJbWFnZQ==" style="max-width: 100%" />
    </el-dialog>
</template>
<script setup lang="ts">
    import { ref, getCurrentInstance, ComponentInternalInstance, onMounted } from 'vue'
    import { ElDialog } from 'element-plus'
    const props = defineProps({
        src: String
    })
    const dialogVisible = ref(false)
    const imgSrc = ref('')
    // 插槽形式
    onMounted(() => {
        const { proxy } = getCurrentInstance() as ComponentInternalInstance
        let slot = proxy?.$slots?.default?.()
        if(slot){
            // 获取插槽内容设置imgSrc地址
            imgSrc.value = slot?.[0]?.props?.src
        }
    })
    const setSrc = (v: string) => {
        imgSrc.value = v
    }
    // 组件触发
    if (props.src) {
        setSrc(props.src)
    }
    // 指令触发
    const show = () => {
        dialogVisible.value = true
    }
    const close = () => { 
        // 弹窗关闭移除dom
        if (document.getElementById('previewDom')) {
            document.body.removeChild(document.getElementById('previewDom') as HTMLElement)
        }
    }
    defineExpose({
        show,
        setSrc
    })
</script>

import { Component, createApp } from 'vue'
import PreviewImageVue from '@/components/PreviewImage.vue'
function mountComponent(RootComponent: Component) {
    const app = createApp(RootComponent)
    const root = document.createElement('div')
    root.setAttribute('id', 'previewDom')
    document.body.appendChild(root)
    return {
        instance: app.mount(root),
        unmount() { // 这里unmout没用到，因为组件中dialog的close事件这里监听不到，我就在组件内进行卸载了
            console.log('unmount')
            document.body.removeChild(root)
        }
    }
}
const preview = {
    mounted(el: any) {
        el.style.cursor = 'zoom-in'
        el.addEventListener('click', () => {
            let imgSrc = el.getAttribute('src')
            let { instance, unmount } = mountComponent(PreviewImageVue)
            ;(instance as any).setSrc(imgSrc)
            ;(instance as any).show()
        })
    }
}
export default preview

<div class="imgs">
    <!-- 普通图片 -->
    <img src="fkAvYXNzZXRzL2ltYWdlcy9sb2dvLnBuZw==" alt="IiZndDsNCsKgIMKgICZsdDshLS0g57uE5Lu25b2i5byP5L2/55So6aKE6KeI57uE5Lu244CB6ZyA6KaB5rOo5oSP6Lev5b6E77yI5L2/55So57ud5a+56Lev5b6E77yJIC0tJmd0Ow0KwqAgwqAgJmx0O1ByZXZpZXdJbWFnZSBzcmM9"/src/assets/images/logo.png"></PreviewImage>
    <!-- 组件插槽形式预览组件、需要注意路径（使用绝对路径） -->
    <PreviewImage>
        <img src="L3NyYy9hc3NldHMvaW1hZ2VzL2xvZ28ucG5n" alt="IiZndDsNCsKgIMKgICZsdDsvUHJldmlld0ltYWdlJmd0Ow0KwqAgwqAgJmx0OyEtLSDmjIfku6Tkvb/nlKjpooTop4jnu4Tku7YgLS0mZ3Q7DQrCoCDCoCAmbHQ7aW1nIHNyYz0="~@/assets/images/logo.png" alt="IiB2LXByZXZpZXcmZ3Q7DQombHQ7L2RpdiZndDs8L2NvZGU+PC9wcmU+PC9kaXY+DQo8cCBjbGFzcz0="maodian">
开发中可能遇到的问题
获取proxy时使用getCurrentInstance时编辑器会报错，断言成ComponentInternalInstance就不报错了。
获取插槽内容时需要 proxy?.$slots?.default?.() 这样判断取值，不然编辑器也会报错。
暴露给外部使用的方法/属性需通过defineExpose暴露出去
注意拓展组件方式。vue2用Vue.extend，vue3用createApp
使用的时候注意路径问题
总结
之前都是用vue2开发项目，此次项目是vue3的第一次实践，使用下来感觉ts写起来比较冗余，很多编辑器报错都需要时间去解决，可能不是开发组件库都是业务需求，对类型接口的定义使用很少。个人不是很喜欢ts，还是js来的简单粗暴。
到此这篇关于vue3+ts+elementPLus实现v-preview指令的文章就介绍到这了,更多相关vue3 v-preview指令内容请搜索编程学习网以前的文章希望大家以后多多支持编程学习网！