vue3 v-html点击事件

实现将接口返回的内容展示出来，同时，图片以小图的形式展示，点击图片，放大

完整代码如下：

<template>
    <div>
        <div v-html="handleContent(content)" @click="showBigImg($event)"></div>
        <el-image-viewer v-if="imgViewerVisible" @close="closeImgViewer" :url-list="[currentImgViewerUrl]"></el-image-viewer>
    </div>
</template>
 
<script setup lang="ts">
import { computed, ref } from 'vue'
const content = ref(''); //下面省略给内容赋值
const imgViewerVisible= ref<boolean>(false);
const currentImgViewerUrl= ref<String>('');

const handleContent = computed(()=>(con:any)=>{
    let reg = /<img/g
    let newImg = con.replace(reg,'<img style="width:24px;height:24px;cursor:pointer;"')
    return newImg
})

const showBigImg = (e:any)=>{
    if(e.target.nodeName === 'IMG'){
        imgViewerVisible.value = true
        currentImgViewerUrl.value = e.target.src
    }
}

const closeImgViewer= ()=>{
    imgViewerVisible.value = false
    currentImgViewerUrl.value = ''
}

</script>