xiangyuan-app/src/components/display/block/ImageBlock.vue

<template>
  <Touchable
    touchable
    position="relative"
    overflow="hidden"
    v-bind="$props"
    :flexShrink="0"
    :innerStyle="{ borderRadius: theme.resolveThemeSize(radius), overflow: 'hidden', }"
    :width="width"
    :height="height"
    @click="$emit('click')"
  >
    <Image 
      :src="src"
      mode="aspectFill"
      width="100%"
      height="100%"
    >
      <Image 
        v-if="videoMark" 
        :src="videoMarkImage" 
        :width="videoMarkSize"
        :height="videoMarkSize"
        innerClass="nana-image-block-video-mark"
      />
    </Image>
    <slot name="desc">
      <BackgroundBox
        color1="background.mask"
        position="absolute"
        :left="0"
        :right="0"
        :bottom="0"
        :padding="[10,15]"
      >
        <Text class="nana-image-desc" color="text.second" v-bind="descProps" :text="desc" />
      </BackgroundBox>
    </slot>
    <slot name="footer" />
  </Touchable>
</template>

<script lang="ts">
/**
 * 组件说明：图片块。
 * 
 * 该组件可以用于显示图片，支持在图片下方显示描述。
 *
 * 该组件的默认高度为 200rpx。
 */
export default {}
</script>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';
import BackgroundBox from './BackgroundBox.vue';
import VideoMark from '../../images/icons/video-mark.png';
import Touchable from '@/components/feedback/Touchable.vue';
import Image from '@/components/basic/Image.vue';
import Text, { type TextProps } from '@/components/basic/Text.vue';
import type { PropType } from 'vue';

const theme = useTheme();

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});
defineProps({	
  /**
   * 宽度。
   */
  width: {
    type: [ String, Number ],
    default: 200
  },
  /**
   * 高度。
   */
  height: {
    type: [ String, Number ],
    default: 100
  },
  /**
   * 图片的路径。
   */
  src: {
    type: String,
    default: null
  },
  /**
   * 图片的圆角。
   */
  radius: {
    type: [ String, Number ],
    default: undefined
  },
  /**
   * 图片下方显示描述。
   */
  desc: {
    type: String,
    default: null
  },
  /**
   * 图片下方显示描述的文字属性。
   */
  descProps: {
    type: Object as PropType<TextProps>,
    default: () => ({})
  },
  /**
   * 是否显示播放视频标记。
   */
  videoMark: {
    type: Boolean,
    default: false
  },
  /**
   * 播放视频标记的图片路径。
   */
  videoMarkImage: {
    type: String,
    default: VideoMark
  },
  /**
   * 播放视频标记的大小。
   */
  videoMarkSize: {
    type: [ String, Number ],
    default: 80
  }
})

defineEmits([	
  "click"	
])
</script>

<style lang="scss">
.nana-image-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nana-image-block-video-mark {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 100;
  transform: translate(-50%, -50%);
}
</style>