zx-bg-image 背景图组件

简介

一个支持背景图片显示的容器组件，图片显示在最底层，上层可以放置其他内容。

基本用法

<template>
  <zx-bg-image src="/static/bg.jpg" width="100vw" height="300px">
    <view style="padding: 20px; color: white;">
      <text>这里是内容区域</text>
    </view>
  </zx-bg-image>
</template>

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | src | String | '' | 背景图片地址 | | width | String/Number | '100vw' | 组件宽度 | | height | String/Number | 'auto' | 组件高度 | | mode | String | 'aspectFill' | 图片裁剪模式 | | minHeight | String/Number | '' | 最小高度 | | maxHeight | String/Number | '' | 最大高度 | | backgroundColor | String | '#f5f5f5' | 背景色（图片加载失败时显示） | | showLoading | Boolean | false | 是否显示加载状态 | | contentClass | String | '' | 内容区域样式类名 | | contentPadding | String/Number | '0' | 内容区域内边距 |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | load | 图片加载成功时触发 | event | | error | 图片加载失败时触发 | event |

使用示例

基础用法

<zx-bg-image src="/static/banner.jpg">
  <view class="content">
    <text>内容区域</text>
  </view>
</zx-bg-image>

设置尺寸

<zx-bg-image 
  src="/static/bg.jpg" 
  width="375px" 
  height="200px"
  min-height="150px"
>
  <view>内容</view>
</zx-bg-image>

自定义内容样式

<zx-bg-image 
  src="/static/bg.jpg"
  content-padding="20px"
  content-class="custom-content"
>
  <view>带内边距的内容</view>
</zx-bg-image>

监听事件

<zx-bg-image 
  src="/static/bg.jpg"
  @load="onImageLoad"
  @error="onImageError"
>
  <view>内容</view>
</zx-bg-image>

注意事项

1. 背景图片使用绝对定位，层级为 z-index: 1
2. 内容区域层级为 z-index: 2，确保显示在背景图上方
3. 当 height 设置为 'auto' 时，组件高度会根据内容自适应
4. 支持所有 uni-app image 组件的 mode 属性值