vue3+ts+elementPLus实现v-preview指令的方法

引文

最近在用 vue3+ts 开发公司的后台系统，因为后台多处需要图片放大预览的功能，就想着封装一个v-preview指令，这样在需要预览的图片上加个 v-preview就可以预览啦。

目录

在这里就不列我的项目目录啦，想尝试的朋友可以这样创建目录

-- preview
---- previewImage.vue
---- preview.ts

文件内容

previewImage.vue

普普通通vue3组件，记得全局注册

<template>    <div class="previewImg" @click="dialogVisible = true">        <slot>            <img :src="props.src" alt="图片加载失败" />        </slot>    </div>    <el-dialog v-model="dialogVisible" title="查看图片" @close="close">        <img :src="imgSrc" alt="Preview Image"  />    </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>

preview.ts

对previewImage组件进行拓展，全局注册preview指令（这个注册代码就不放了呦）
需要注意的是vue3拓展组件和vue2有所不同，vue2用Vue.extend就可以拿到组件构造器，vue3这边则是使用createApp

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="~@/assets/images/logo.png" alt="">    <!-- 组件形式使用预览组件、需要注意路径（使用绝对路径） -->    <PreviewImage src="/src/assets/images/logo.png"></PreviewImage>    <!-- 组件插槽形式预览组件、需要注意路径（使用绝对路径） -->    <PreviewImage>        <img src="/src/assets/images/logo.png" alt="">    </PreviewImage>    <!-- 指令使用预览组件 -->    <img src="~@/assets/images/logo.png" alt="" v-preview></div>

开发中可能遇到的问题

• 获取proxy时使用getCurrentInstance时编辑器会报错，断言成ComponentInternalInstance就不报错了。

• 获取插槽内容时需要 proxy?.$slots?.default?.() 这样判断取值，不然编辑器也会报错。

• 暴露给外部使用的方法/属性需通过defineExpose暴露出去

• 注意拓展组件方式。vue2用Vue.extend，vue3用createApp

• 使用的时候注意路径问题

总结

之前都是用vue2开发项目，此次项目是vue3的第一次实践，使用下来感觉ts写起来比较冗余，很多编辑器报错都需要时间去解决，可能不是开发组件库都是业务需求，对类型接口的定义使用很少。个人不是很喜欢ts，还是js来的简单粗暴。