wangeditor5富文本中的图片点击放大

放大图片组件 img-preview.vue

<template>
	<div class="preview" @click="onClick" @keydown="onKeydown">
		<div class="preview-img" >
			<img :src="src" alt />
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {};
	},
	props: {
		src: {
			type: String,
			default: "",
			required: true
		},
		onClick: { type: Function, default: () => {}, required: true },
		onKeydown: { type: Function, default: () => {}, required: true }
	}
};
</script>
<style lang="scss" scoped>
.preview {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	overflow: scroll;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.preview-img {
	padding: 20px;
	display: inline-block;
	margin: auto;
	img {
		max-width: 100%;
		max-height: 100%;
	}
}
</style>
 

富文本中点击图片放大 FulltextDisplay.vue

<template>
	<div class="rich-text-container">
		<div v-html="props.richText" style="border: none !important;"
				 @click="showPreviewImg"
		></div>
		<div v-if="imgBiggerState.isPreview">
			<ImgPreview
				:src="imgBiggerState.imgSrc"
				:onClick="closeImgPreview"
				:onKeydown="keydownCloseImgPreview"
			/>
		</div>
	</div>
</template>
 
<script setup>
import { reactive } from 'vue'
import ImgPreview from '@/views/Manage/FeedbackManage/components/ImgPreview.vue'
const props = defineProps({
	richText: {
		type: String,
		default: ''
	}
})
 
const imgBiggerState = reactive({
	isPreview: false,
	ifShowBigger: false,
	imgSite: {
		height: 0,
		width: 0,
	}, //图片属性
	imgSrc: '', //图片地址
})
const showPreviewImg = (e) => {
	if (e.target.nodeName === 'IMG') {
		imgBiggerState.isPreview = true //打开图片放大器开关
		let userAgent = navigator.userAgent //获取浏览器属性
		if (userAgent.indexOf('Chrome') > -1) { //Google
			imgBiggerState.imgSrc = e.target.currentSrc
		} else { //其他
			imgBiggerState.imgSrc = e.target.href
		}
	}
}
 
const keydownCloseImgPreview = (e) => {
	if (e && e.keyCode === 27) {
		imgBiggerState.isPreview = false;
	}
}
const closeImgPreview = () => {
	imgBiggerState.isPreview = false;
}
 
</script>
 
<style lang="scss" scoped>
.rich-text-container {
	max-height: 200px;
	overflow: auto; /* 或者 'hidden' 如果你不希望显示滚动条 */
}
 
.rich-text-container div {
	color: #fff;
	/* 这里可以添加其他你需要的样式 */
}
/* 滚动条整体样式 */
::-webkit-scrollbar {
	width: 10px;
}
 
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	background: var(--dark-mono-a100, #CCDBFF0F);
	height: 90px;
	width: 2px;
	border-radius: 2px 0px 0px 0px;
}
 
/* 滚动条滑块悬停 */
::-webkit-scrollbar-thumb:hover {
	background: var(--dark-mono-a100, #CCDBFF0F);
	width: 6px;
	border-radius: 2px;
 
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
	width: 6px;
	background-color: #23334f;
	border-radius: 8px;
}
 
</style>