Hintergrund: Für den von v-html gerenderten Inhalt können die darin enthaltenen Bilder nicht direkt manipuliert werden. In einigen Fällen ist es jedoch erforderlich, die Bilder zu vergrößern und in der Vorschau anzuzeigen.
Lösung: Fügen Sie die Click-Methode (getImg) zum übergeordneten Element des gerenderten Inhalts hinzu, und der Pfad des Bildes kann abgerufen werden, wenn auf das Bild geklickt wird. Anschließend wird eine Vorschau über das Vorschau-Plug-In angezeigt.
1. Holen Sie sich den Bildpfad:
HTML-Teil:
<div @click="getImg($event)"> //在父元素上加上click方法
<div v-html="currentItem.content"></div> //用v-html渲染内容
</div>
JS-Teil:
//此处用的vue3
<script setup>
const getImg = ($event) => {
console.log($event.target.currentSrc) //当前点击的图片的路径
}
</script>
2. Bildvorschau, hier ist die El-Image-Viewer-Komponente in Vue:
HTML-Teil:
//hide-on-click-modal 禁止点击空白区域来关闭弹窗
//@close="()=>{showViewer = false}" 预览弹窗关闭时的回调事件
//:url-list="previewList" 预览图片的路径,previewList为数组
<div class="demo-image__preview">
<el-image-viewer hide-on-click-modal @close="()=>{showViewer = false}" v-if="showViewer" :url-list="previewList" />
</div>
JS-Teil:
<script setup>
import {ref} from 'vue'
const showViewer = ref(false);
const previewList = ref([]);
const getImg = ($event) => {
previewList.value = [$event.target.currentSrc];
showViewer.value = true;
}
</script>
3. Vollständiger Code:
<template>
<div class="container">
<div class="demo-image__preview">
<el-image-viewer hide-on-click-modal @close="()=>{showViewer = false}" v-if="showViewer" :url-list="previewList" />
</div>
<div @click="getImg($event)">
<div class="detailContent" v-html="currentItem.content"></div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue'
const showViewer = ref(false);
const previewList = ref([]);
const getImg = ($event) => {
previewList.value = [$event.target.currentSrc];
showViewer.value = true;
}
</script>