vue3+ts+elementPLus实现v-preview指令（vue3.0写法）太疯狂了

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

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