vue3+element-Plus 点击富文本图片进行预览

html代码

 <span v-html="form.detailsText" @click="onPreview($event)"></span>

 <el-image-viewer
      v-if="imgShow"
      @close="closeViewer"
      teleported
      :url-list="srcList"
    ></el-image-viewer>

js代码

<script setup>

const imgShow = ref(false);  //是否显示
const srcList = ref([]);     //预览图片路径


function closeViewer() {
  imgShow.value = false;
  document.documentElement.style.overflowY = "auto";
}
function onPreview(e) {
  if (e.target.tagName == "IMG") {
    srcList.value = [e.target.src];
    imgShow.value = true;
    document.documentElement.style.overflowY = "hidden";
  }
}



<script>