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

文章摘要

这篇文章展示了如何在Vue组件中使用插槽（Slots）动态绑定组件属性，并通过Element Plus的ElDialog组件实现图片预览功能。代码中使用槽的形式在组件生命周期开始时动态绑定`src`属性，可以在`!this`的情况下访问插槽中的属性。同时，代码实现了图片预览的显示和关闭逻辑，包括通过`setSrc`方法更新图片源地址，并在对话框关闭时移除不必要的DOM元素。整体代码结合了Vue的生命周期管理和Element Plus的对话框组件，展示了动态属性绑定与组件交互的实现方式。

<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>