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>
学而不思则罔,思而不学则殆!