换掉 md-editor 时把它自带的点图放大一起丢了;富文本存的图片带行内 style="width; height",宽被 max-width 压窄时高还是原值,height: auto 盖不住行内样式。 - 正文图片点一下全屏看大图,点任意处或按 Esc 关闭;包在链接里的图照旧走链接 - 图片高度用 !important 跟着宽度走,比例不再变形 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
0e1784ba26
commit
ea487bdc7b
1 file changed
+46
-2
@@ -15,10 +15,28 @@ const { content, html = false } = defineProps<{
|
|||||||
|
|
||||||
const theme = useThemeVars()
|
const theme = useThemeVars()
|
||||||
const rendered = computed(() => renderMarkdown(content ?? "", html))
|
const rendered = computed(() => renderMarkdown(content ?? "", html))
|
||||||
|
|
||||||
|
// 点图片看大图(原来 MdPreview 自带)。包在链接里的图片照旧走链接
|
||||||
|
const zoomed = ref("")
|
||||||
|
|
||||||
|
function onClick(e: MouseEvent) {
|
||||||
|
const target = e.target
|
||||||
|
if (!(target instanceof HTMLImageElement) || target.closest("a")) return
|
||||||
|
zoomed.value = target.currentSrc || target.src
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyStroke("Escape", () => {
|
||||||
|
zoomed.value = ""
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="oj-markdown" v-html="rendered" />
|
<div class="oj-markdown" v-html="rendered" @click="onClick" />
|
||||||
|
<Teleport to="body">
|
||||||
|
<div v-if="zoomed" class="oj-markdown-zoom" @click="zoomed = ''">
|
||||||
|
<img :src="zoomed" alt="" />
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 不加 scoped:v-html 进来的节点不带 scoped 的属性,靠 .oj-markdown 前缀收住范围 -->
|
<!-- 不加 scoped:v-html 进来的节点不带 scoped 的属性,靠 .oj-markdown 前缀收住范围 -->
|
||||||
@@ -95,10 +113,36 @@ const rendered = computed(() => renderMarkdown(content ?? "", html))
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 富文本存的图片带行内 style="width; height",宽被 max-width 压窄时高还是原值,
|
||||||
|
图片就被压扁 —— 行内样式只有 !important 盖得住 */
|
||||||
.oj-markdown img {
|
.oj-markdown img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto !important;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oj-markdown a img {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oj-markdown-zoom {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 3000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
cursor: zoom-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oj-markdown-zoom img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oj-markdown hr {
|
.oj-markdown hr {
|
||||||
|
|||||||
Reference in new issue
Block a user