75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<template>
|
|
<div class="title" wordCount="0">{{ title }}</div>
|
|
<div
|
|
v-for="(para, index) in contents"
|
|
:key="index"
|
|
:wordCount="calculateWordCount(para)"
|
|
>
|
|
<img
|
|
class="full"
|
|
v-if="/^\s*<img[^>]*src[^>]+>$/.test(para)"
|
|
:src="getImageSrc(para)"
|
|
@error.once="proxyImage"
|
|
loading="lazy"
|
|
/>
|
|
<p v-else :style="{ fontFamily, fontSize }" v-html="para" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getImageFromLegado, isLegadoUrl } from "@/plugins/utils";
|
|
|
|
const props = defineProps({
|
|
contents: { type: Array, required: true },
|
|
title: { type: String, required: true },
|
|
spacing: { type: Object, required: true },
|
|
fontFamily: { type: String, required: true },
|
|
fontSize: { type: String, required: true },
|
|
});
|
|
|
|
const getImageSrc = (content) => {
|
|
const imgPattern = /<img[^>]*src="([^"]*(?:"[^>]+\})?)"[^>]*>/;
|
|
const src = content.match(imgPattern)[1];
|
|
if (isLegadoUrl(src)) return getImageFromLegado(src);
|
|
return src;
|
|
};
|
|
const proxyImage = (event) => {
|
|
event.target.src = getImageFromLegado(event.target.src);
|
|
};
|
|
|
|
const calculateWordCount = (paragraph) => {
|
|
const imgPattern = /<img[^>]*src="[^"]*(?:"[^>]+\})?"[^>]*>/g;
|
|
//内嵌图片文字为1
|
|
const imagePlaceHolder = " ";
|
|
return paragraph.trim().replaceAll(imgPattern, imagePlaceHolder).length;
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title {
|
|
margin-bottom: 57px;
|
|
font: 24px / 32px PingFangSC-Regular, HelveticaNeue-Light,
|
|
"Helvetica Neue Light", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
p {
|
|
display: block;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
|
|
letter-spacing: calc(v-bind("props.spacing.letter") * 1em);
|
|
line-height: calc(1 + v-bind("props.spacing.line"));
|
|
margin: calc(v-bind("props.spacing.paragraph") * 1em) 0;
|
|
|
|
:deep(img) {
|
|
height: 1em;
|
|
}
|
|
}
|
|
|
|
.full {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
</style>
|