yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

feat(theme): add width/center props support for ImageCard (#378)

Browse Source 
* feat(theme): add `width/center` props  support for `ImageCard`

* chore: tweak
This commit is contained in:
pengzhanbo 2024-12-15 00:26:54 +08:00 committed by GitHub
parent a776852a8a
commit e5d732bc79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/notes/theme/guide/组件/图片卡片.md
View File

@ -15,14 +15,16 @@ permalink: /guide/components/image-card/
## Props
| 名称 | 类型 | 默认值 | 说明 |
| ----------- | -------------------------- | ------ | --------------------------------------- |
| image | `string` | `''` | 必填，图片链接 |
| title | `string` | `''` | 可选，标题 (展示其它信息需要依赖此属性) |
| description | `string` | `''` | 可选，描述 |
| author | `string` | `''` | 可选，作者 |
| href | `string` | `''` | 可选，链接 |
| date | `string \| Date \| number` | `''` | 可选，日期 |
| 名称 | 类型 | 默认值 | 说明 |
| ----------- | -------------------------- | ------- | --------------------------------------- |
| image | `string` | `''` | 必填，图片链接 |
| title | `string` | `''` | 可选，标题 (展示其它信息需要依赖此属性) |
| description | `string` | `''` | 可选，描述 |
| author | `string` | `''` | 可选，作者 |
| href | `string` | `''` | 可选，链接 |
| date | `string \| Date \| number` | `''` | 可选，日期 |
| width | `string \| number` | `''` | 可选，宽度 |
| center | `boolean` | `false` | 可选，是否居中 |
## 示例

28
theme/src/client/components/global/VPImageCard.vue
View File

@ -9,6 +9,8 @@ const props = defineProps<{
href?: string
author?: string
date?: string | Date | number
width?: string | number
center?: boolean
}>()
const lang = usePageLang()
@ -24,10 +26,20 @@ const date = computed(() => {
return intl.format(date)
})
const styles = computed(() => {
const width = props.width
? String(Number(props.width)) === String(props.width)
? `${props.width}px`
: props.width
: undefined
return { width }
})
</script>
<template>
<div class="vp-image-card">
<div class="vp-image-card" :style="styles" :class="{ center }">
<div class="image-container">
<img :src="image" :alt="title" loading="lazy">
<div v-if="title || author || date || description" class="image-info">
@ -50,6 +62,7 @@ const date = computed(() => {
<style scoped>
.vp-image-card {
max-width: 100%;
margin: 16px 0;
border-radius: 8px;
box-shadow: var(--vp-shadow-2);
@ -57,18 +70,31 @@ const date = computed(() => {
transition-property: box-shadow;
}
.vp-image-card.center {
margin: 16px auto;
}
.vp-image-card:hover {
box-shadow: var(--vp-shadow-4);
}
.vp-image-card .image-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 0;
line-height: 1;
border-radius: 8px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-info {
position: absolute;
bottom: 0;