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

* feat(theme): add `width/center` props support for `ImageCard` * chore: tweak
pengzhanbo · Dec 14, 2024 · e5d732b · e5d732b
1 parent a776852
commit e5d732b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/docs/notes/theme/guide/组件/图片卡片.md b/docs/notes/theme/guide/组件/图片卡片.md
@@ -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` | 可选，是否居中                          |
 
 ## 示例
 

diff --git a/theme/src/client/components/global/VPImageCard.vue b/theme/src/client/components/global/VPImageCard.vue
@@ -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,25 +62,39 @@ const date = computed(() => {
 
 <style scoped>
 .vp-image-card {
+  max-width: 100%;
   margin: 16px 0;
   border-radius: 8px;
   box-shadow: var(--vp-shadow-2);
   transition: var(--vp-t-color);
   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;