Blocks 内容块

介绍

内容块组件用于展示结构化信息，支持图片、标题、描述等内容，常用于列表展示或内容卡片。

导入

import BackgroundBox from '@/components/display/block/BackgroundBox.vue'
import ImageBlock from '@/components/display/block/ImageBlock.vue'
import ImageBlock2 from '@/components/display/block/ImageBlock2.vue'
import ImageBlock3 from '@/components/display/block/ImageBlock3.vue'
import IconTextBlock from '@/components/display/block/IconTextBlock.vue'

用法

BackgroundBox 背景盒

BackgroundBox 组件用于显示背景图片、颜色、渐变等，支持多种背景填充方式。

vue

<template>
  <!-- 背景图片示例 -->
  <BackgroundBox
    width="fill"
    :height="200"
    backgroundImage="https://imengyu.top/assets/images/test/2.jpg"
    backgroundFillType="fillW"
    backgroundSize="100%"
    backgroundPosition="center"
    :radius="15"
    :margin="10"
  >
    <Text text="背景图片示例" color="white" fontSize="24" fontWeight="bold" />
  </BackgroundBox>
  
  <!-- 渐变色背景示例 -->
  <BackgroundBox
    width="fill"
    :height="200"
    color1="#667eea"
    color2="#764ba2"
    gradientAngle="135"
    :radius="15"
    :margin="10"
    center
  >
    <Text text="渐变色背景示例" color="white" fontSize="24" fontWeight="bold" />
  </BackgroundBox>
  
  <!-- 带圆角的纯色背景 -->
  <BackgroundBox
    width="fill"
    :height="100"
    color1="#f0f0f0"
    :radius="10"
    :margin="10"
    center
  >
    <Text text="带圆角的纯色背景" color="text.content" fontSize="20" />
  </BackgroundBox>
  
  <!-- 背景图片填充方式示例 -->
  <FlexRow wrap gap="10">
    <BackgroundBox
      width="150"
      :height="150"
      backgroundImage="https://imengyu.top/assets/images/test/3.jpg"
      backgroundFillType="fillW"
      :radius="8"
    >
      <Text text="fillW" color="white" fontSize="16" backgroundColor="rgba(0,0,0,0.5)" padding="5" />
    </BackgroundBox>
    <BackgroundBox
      width="150"
      :height="150"
      backgroundImage="https://imengyu.top/assets/images/test/3.jpg"
      backgroundFillType="fillH"
      :radius="8"
    >
      <Text text="fillH" color="white" fontSize="16" backgroundColor="rgba(0,0,0,0.5)" padding="5" />
    </BackgroundBox>
    <BackgroundBox
      width="150"
      :height="150"
      backgroundImage="https://imengyu.top/assets/images/test/3.jpg"
      backgroundFillType="none"
      :radius="8"
    >
      <Text text="none" color="white" fontSize="16" backgroundColor="rgba(0,0,0,0.5)" padding="5" />
    </BackgroundBox>
  </FlexRow>
  
  <!-- 九宫格拉伸示例 -->
  <Text text="九宫格拉伸" fontSize="20" :margin="10" fontWeight="bold" />
  <FlexRow :gap="10" :padding="10">
    <BackgroundBox 
      width="88"
      height="43"
      backgroundImage="https://imengyu.top/assets/images/test/2.jpg"
      :backgroundCutBorder="[25,25,25,25]"
      :backgroundCutBorderSize="[25,25,25,25]"
      :padding="[22,30]"
    >
      <Text text="源大小" color="white" fontSize="14" fontWeight="bold" />
    </BackgroundBox>
    <BackgroundBox 
      width="145"
      height="55"
      backgroundImage="https://imengyu.top/assets/images/test/2.jpg"
      :backgroundCutBorder="[25,25,25,25]"
      :backgroundCutBorderSize="[25,25,25,25]"
      :padding="[22,30]"
    >
      <Text text="九宫格拉伸" color="white" fontSize="14" fontWeight="bold" />
    </BackgroundBox>
    <BackgroundBox 
      width="205"
      height="85"
      backgroundImage="https://imengyu.top/assets/images/test/2.jpg"
      :backgroundCutBorder="[25,25,25,25]"
      :backgroundCutBorderSize="[25,25,25,25]"
      :padding="[22,30]"
    >
      <Text text="九宫格拉伸" color="white" fontSize="14" fontWeight="bold" />
    </BackgroundBox>
  </FlexRow>
</template>

<script setup>
import BackgroundBox from '@/components/display/block/BackgroundBox.vue'
import Text from '@/components/basic/Text.vue'
import FlexRow from '@/components/layout/FlexRow.vue'
</script>

IconTextBlock 图标文字块

IconTextBlock 组件用于展示包含图标、标题和描述的信息块，常用于列表项或导航项。

vue

<template>
  <!-- 基础用法 -->
  <IconTextBlock
    icon="icon-shopping-cart"
    title="购物车"
    desc="查看您的购物车"
    :margin="10"
  />
  
  <!-- 带额外信息的用法 -->
  <IconTextBlock
    icon="icon-message"
    title="消息通知"
    desc="您有3条未读消息"
    extra="新"
    :extraProps="{ color: 'danger', fontSize: '16' }"
    :margin="10"
    :viewProps="{ backgroundColor: '#f8f8f8', padding: 20, radius: 10 }"
  />
  
  <!-- 自定义样式 -->
  <IconTextBlock
    icon="icon-star"
    title="收藏"
    desc="收藏喜欢的商品"
    :iconProps="{ color: 'warning', size: 70 }"
    :titleProps="{ color: 'primary', fontSize: '24', fontWeight: 'bold' }"
    :descProps="{ color: 'text.second', fontSize: '18' }"
    :margin="10"
  />
  
  <!-- 不带图标的用法 -->
  <IconTextBlock
    title="设置"
    desc="管理您的账户设置">
    <template #extra>
      <Icon name="icon-right" color="text.second" size="40" />
    </template>
  </IconTextBlock>
  
  <!-- 垂直排列的示例 -->
  <FlexRow wrap :gap="10" :margin="10">
    <IconTextBlock
      icon="icon-home"
      title="首页"
      desc="返回首页"
      :viewProps="{ width: '48%', backgroundColor: '#f0f8ff', padding: 15, radius: 10 }"
    />
    <IconTextBlock
      icon="icon-user"
      title="个人中心"
      desc="查看个人信息"
      :viewProps="{ width: '48%', backgroundColor: '#fff0f5', padding: 15, radius: 10 }"
    />
  </FlexRow>
</template>

<script setup>
import IconTextBlock from '@/components/display/block/IconTextBlock.vue'
import Text from '@/components/basic/Text.vue'
import FlexRow from '@/components/layout/FlexRow.vue'
import Icon from '@/components/basic/Icon.vue'
</script>

ImageBlock 图片块

ImageBlock 组件用于展示图片，并支持在图片底部显示描述文字和视频标记。

vue

<template>
  <!-- 基础用法 -->
  <FlexRow wrap :gap="10" :margin="10">
    <ImageBlock
      src="https://imengyu.top/assets/images/test/1.jpg"
      width="200"
      height="150"
      radius="10"
      desc="图片描述"
    />
    <ImageBlock
      src="https://imengyu.top/assets/images/test/2.jpg"
      width="200"
      height="150"
      radius="10"
      desc="带圆角的图片"
    />
  </FlexRow>
  
  <!-- 带视频标记的图片 -->
  <ImageBlock
    src="https://imengyu.top/assets/images/test/1.jpg"
    width="200"
    height="150"
    radius="10"
    videoMark="true"
    desc="视频预览"
  />
  
  <!-- 自定义描述内容 -->
  <ImageBlock
    src="https://imengyu.top/assets/images/test/3.jpg"
    width="200"
    height="150"
    radius="10"
  >
    <template #desc>
      <BackgroundBox
        color1="rgba(0, 0, 0, 0.6)"
        position="absolute"
        :left="0"
        :right="0"
        :bottom="0"
        :padding="10"
      >
        <Text color="white" fontSize="16" text="自定义描述" />
      </BackgroundBox>
    </template>
  </ImageBlock>
</template>

<script setup>
import ImageBlock from '@/components/display/block/ImageBlock.vue'
import FlexRow from '@/components/layout/FlexRow.vue'
import BackgroundBox from '@/components/display/block/BackgroundBox.vue'
import Text from '@/components/basic/Text.vue'
</script>

ImageBlock2 图片块2

ImageBlock2 组件用于展示图片，并支持在图片下方显示标题、描述文字和额外信息。

vue

<template>
  <!-- 基础用法 -->
  <ImageBlock2
    src="https://imengyu.top/assets/images/test/1.jpg"
    width="100%"
    imageHeight="400"
    imageRadius="10"
    title="图片标题"
    desc="这里是图片的描述文字，用于介绍图片的内容"
  />
  
  <!-- 自定义图片尺寸 -->
  <FlexRow wrap :gap="10">
    <ImageBlock2
      src="https://imengyu.top/assets/images/test/1.jpg"
      width="200"
      imageHeight="150"
      imageRadius="10"
      title="小尺寸图片"
    />
    <ImageBlock2
      src="https://imengyu.top/assets/images/test/2.jpg"
      width="300"
      imageHeight="200"
      imageRadius="10"
      title="中等尺寸图片"
    />
  </FlexRow>
  
  <!-- 带圆角的图片 -->
  <FlexRow wrap :gap="10">
    <ImageBlock2
      src="https://imengyu.top/assets/images/test/3.jpg"
      width="200"
      imageHeight="150"
      imageRadius="20"
      title="带圆角的图片"
    />
    <ImageBlock2
      src="https://imengyu.top/assets/images/test/1.jpg"
      width="200"
      imageHeight="150"
      imageRadius="50"
      title="大圆角图片"
    />
  </FlexRow>
  
  <!-- 带额外信息的图片 -->
  <ImageBlock2
    src="https://imengyu.top/assets/images/test/2.jpg"
    width="100%"
    imageHeight="400"
    imageRadius="10"
    title="带额外信息"
    desc="这是一条带有额外信息的图片展示"
    extra="2023-08-15"
  />
  
  <!-- 自定义样式 -->
  <ImageBlock2
    src="https://imengyu.top/assets/images/test/3.jpg"
    imageHeight="400"
    imageRadius="10"
    title="自定义样式"
    desc="这是一条自定义样式的图片展示"
    backgroundColor="#ddd1dd"
    border="2px solid #aaa1ee"
    shadow="dark"
    :padding="20"
    radius="15"
  />
</template>

<script setup>
import ImageBlock2 from '@/components/display/block/ImageBlock2.vue'
import FlexRow from '@/components/layout/FlexRow.vue'
</script>

ImageBlock3 图片块3

ImageBlock3 组件用于展示左侧图片、右侧文字描述的布局，支持标题、描述和额外信息。

vue

<template>
  <!-- 基础用法 -->
  <ImageBlock3
    src="https://imengyu.top/assets/images/test/1.jpg"
    imageWidth="150"
    imageHeight="150"
    imageRadius="10"
    title="图片标题"
    desc="左侧图片，右侧文字描述内容示例"
  />
  
  <!-- 自定义图片尺寸 -->
  <ImageBlock3
    src="https://imengyu.top/assets/images/test/2.jpg"
    imageWidth="200"
    imageHeight="100"
    imageRadius="10"
    title="图片标题"
    desc="自定义图片宽高比"
  />
  
  <!-- 带圆角的图片 -->
  <ImageBlock3
    src="https://imengyu.top/assets/images/test/3.jpg"
    imageWidth="150"
    imageHeight="150"
    imageRadius="75"
    radius="75"
    title="图片标题"
    desc="圆形图片示例"
  />
  
  <!-- 多个图片块排列 -->
  <ImageBlock3
    src="https://imengyu.top/assets/images/test/1.jpg"
    imageWidth="180"
    imageHeight="120"
    title="新闻标题1"
    desc="新闻标题1：这是一条新闻的标题内容"
  />
  <ImageBlock3
    src="https://imengyu.top/assets/images/test/2.jpg"
    imageWidth="120"
    imageHeight="120"
    :imageRadius="10"
    :padding="20"
    title="新闻标题2"
    desc="新闻标题2：这是另一条新闻的标题内容，可能会比较长"
    extra="21分钟"
    shadow="light"
  />
  <ImageBlock3
    src="https://imengyu.top/assets/images/test/3.jpg"
    imageWidth="120"
    imageHeight="120"
    :imageRadius="10"
    :padding="20"
    :radius="10"
    title="新闻标题3"
    desc="新闻标题3：这是第三条新闻的标题内容"
    extra="2023-08-15"
    shadow="dark"
  />
</template>

<script setup>
import ImageBlock3 from '@/components/display/block/ImageBlock3.vue'
</script>

API 参考

BackgroundBox

背景盒子组件，用于显示背景图片、颜色、渐变等。

BackgroundBox Props

名称	说明	类型	必填	默认值
color1	背景颜色1	`string`	否	-
color2	背景颜色2	`string`	否	-
radius	圆角	`string \| number`	否	-
gradientAngle	背景渐变角度	`number`	否	-
backgroundImage	背景图片	`string`	否	-
backgroundFillType	背景填充方式	`'none' \| 'fillH' \| 'fillW'`	否	`'fillW'`
backgroundSize	背景填充大小	`string`	否	`'100%'`
backgroundPosition	背景填充位置	`string`	否	-
backgroundCutBorder	背景图片九宫格裁剪大小	`Array<number \| string>`	否	-
backgroundCutBorderSize	背景图片九宫格渲染大小	`Array<number \| string>`	否	`['auto']`

BackgroundBox 组件还支持所有 FlexView 组件的属性，如 width、height、padding、margin 等。

IconTextBlock

IconTextBlock 组件用于展示包含图标、标题和描述的信息块，常用于列表项或导航项。

IconTextBlock Props

名称	说明	类型	必填	默认值
icon	图标名称	`string`	否	`''`
iconProps	图标属性	`IconProps`	否	`{ color: 'text.content', size: 60 }`
title	标题	`string \| number`	否	`''`
desc	描述	`string \| number`	否	`''`
extra	额外信息	`string \| number`	否	`''`
titleProps	标题文字属性	`TextProps`	否	-
descProps	描述文字属性	`TextProps`	否	-
extraProps	额外信息文字属性	`TextProps`	否	-
viewProps	容器属性	`FlexProps`	否	-

IconTextBlock Slots

名称	说明
extra	自定义额外信息内容

IconTextBlock 组件还支持所有 FlexView 组件的属性，如 width、height、padding、margin 等。

ImageBlock

ImageBlock Props

名称	说明	类型	必填	默认值
width	宽度	`string \| number`	否	`200`
height	高度	`string \| number`	否	`100`
src	图片路径	`string`	否	`null`
radius	图片的圆角	`string \| number`	否	-
desc	图片下方显示描述	`string`	否	`null`
descProps	图片下方显示描述的文字属性	`TextProps`	否	`{}`
videoMark	是否显示播放视频标记	`boolean`	否	`false`
videoMarkImage	播放视频标记的图片路径	`string`	否	内置视频图标
videoMarkSize	播放视频标记的大小	`string \| number`	否	`80`

ImageBlock Events

名称	说明	参数
click	点击事件	`$event`

ImageBlock 组件还支持所有 Touchable 组件的属性。

ImageBlock Slots

名称	说明
desc	自定义渲染图片下方内容

ImageBlock2

ImageBlock2 Props

名称	说明	类型	必填	默认值
width	宽度	`string \| number`	否	`400`
imageHeight	图片高度	`string \| number`	否	`250`
src	图片路径	`string`	否	-
imageRadius	图片的圆角	`string \| number`	否	`0`
title	图片下方显示标题	`string`	否	-
desc	图片下方显示描述	`string`	否	-
extra	图片下方显示额外信息	`string`	否	-

ImageBlock2 Events

名称	说明	参数
click	点击事件	`$event`

ImageBlock2 组件还支持所有 Touchable 组件的属性。

ImageBlock2 Slots

名称	说明
desc	自定义渲染图片下方内容

ImageBlock3

ImageBlock3 Props

名称	说明	类型	必填	默认值
imageWidth	图片宽度	`string \| number`	否	`150`
imageHeight	图片高度	`string \| number`	否	`150`
src	图片路径	`string`	否	-
imageRadius	图片的圆角	`string \| number`	否	`0`
title	图片下方显示标题	`string \| number`	否	-
desc	图片下方显示描述	`string \| number`	否	-
extra	图片下方显示额外信息	`string \| number`	否	-

ImageBlock3 Events

名称	说明	参数
click	点击事件	`$event`

ImageBlock3 组件还支持所有 Touchable 组件的属性。

ImageBlock3 Slots

名称	说明
desc	自定义渲染图片下方内容

Blocks 内容块 ​

介绍 ​

导入 ​

用法 ​

BackgroundBox 背景盒 ​

IconTextBlock 图标文字块 ​

ImageBlock 图片块 ​

ImageBlock2 图片块2 ​

ImageBlock3 图片块3 ​

API 参考 ​

BackgroundBox ​

BackgroundBox Props ​

IconTextBlock ​

IconTextBlock Props ​

IconTextBlock Slots ​

ImageBlock ​

ImageBlock Props ​

ImageBlock Events ​

ImageBlock Slots ​

ImageBlock2 ​

ImageBlock2 Props ​

ImageBlock2 Events ​

ImageBlock2 Slots ​

ImageBlock3 ​

ImageBlock3 Props ​

ImageBlock3 Events ​

ImageBlock3 Slots ​