zenn
c9b484e4c8
파일명 alt와 캡션을 분리해 공개·미리보기에 캡션이 보이도록 하고, 관리자 미리보기에서 갤러리 순서를 드래그로 바꿀 수 있게 했다. Co-authored-by: Cursor <cursoragent@cursor.com>
42 lines
902 B
Vue
42 lines
902 B
Vue
<script setup>
|
|
defineProps({
|
|
src: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
alt: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 이미지 아래 표시용 캡션 */
|
|
caption: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: 'regular'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<figure
|
|
class="prose-image mb-2.5"
|
|
:class="{
|
|
'prose-image--wide lg:-mx-10 lg:max-w-none': variant === 'wide',
|
|
'prose-image--full lg:-mx-20 lg:max-w-none': variant === 'full'
|
|
}"
|
|
>
|
|
<div class="overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)]">
|
|
<img class="prose-image__media w-full object-cover" :src="src" :alt="alt">
|
|
</div>
|
|
<figcaption
|
|
v-if="caption"
|
|
class="prose-image__caption mt-1.5 text-center text-sm text-[var(--site-muted)]"
|
|
>
|
|
{{ caption }}
|
|
</figcaption>
|
|
</figure>
|
|
</template>
|