vue3 v-html 渲染富文本修改样式添加事件

修改富文本样式

css直接修改

:deep(img, video, audio) {
	width: 100%;
}

正则匹配修改

item.content = item.content.replace(
	/<img/gi,
	'<img style="max-width:100%;height:auto;display:inline-block;margin:10px auto;"'
);

图片预览

<div
	class="exam_title"
	v-html="item.content"
	@click="imageChgange($event)"
></div>

import { ImagePreview } from "vant";
function imageChgange(e) {
	if (e.target.nodeName == "IMG") ImagePreview([e.target.currentSrc]);
}