vue3+ts+elementPLus达成v-preview指令的办法

近期在用 vue3+ts 开发企业的后台管理软件，由于后台多处需要图片放大预览的功能，就想着封装一个v-preview指令，如此在需要预览的图片上加个 v-preview就能预览啦。

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

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

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

templatedivclass=previewImg@click=dialogVisible=trueslotimg:src=https://www.lottoir.com/skin/default/image/nopic.gif>preview.ts

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

import{Component,createApp}fromvueimportPreviewImageVuefrom@/components/PreviewImage.vuefunctionmountComponent(RootComponent:Component){constapp=createApp(RootComponent)constroot=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)}}}constpreview={mounted(el:any){el.style.cursor=zoom-inel.addEventListener(click,()={letimgSrc=el.getAttribute(src)let{instance,unmount}=mountComponent(PreviewImageVue);(instanceasany).setSrc(imgSrc);(instanceasany).show()})}}exportdefaultpreview用

当地资源测试

divclass=imgs!--普通图片--imgsrc=~@/assets/images/logo.pngalt=!--组件形式用预览组件、应该注意路径（用绝对路径）--PreviewImagesrc=/src/assets/images/logo.png/PreviewImage!--组件插槽形式预览组件、应该注意路径（用绝对路径）--PreviewImageimgsrc=/src/assets/images/logo.pngalt=/PreviewImage!--指令用预览组件--imgsrc=~@/assets/images/logo.pngalt=v-preview/div开发中可能遇见的问题

获得proxy时用getCurrentInstance时编辑器会显示错误，断言成ComponentInternalInstance就不显示错误了。

获得插槽内容时需要 proxy?.$slots?.default?.() 如此判断取值，不然编辑器也会显示错误。

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

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

用的时候注意路径问题

之前都是用vue2开发项目，此次项目是vue3的首次实践，用下来感觉ts写起来比较冗余，不少编辑器显示错误都需要时间去解决，可能不是开发组件库都是业务需要，对种类接口的概念用极少。个人不是非常喜欢ts，还是js来的简单暴力。