# BaseBackground 背景图片组件

一个可复用的背景图片组件，支持自定义背景图片源和样式。

## 功能特性

- 支持自定义背景图片源
- 支持自定义图片裁剪模式
- 支持自定义样式
- 默认使用 CommonEnum.BACKGROUND 作为背景

## 使用方法

### 基础用法

```vue
<template>
  <view class="page">
    <base-background />
    <!-- 其他内容 -->
  </view>
</template>

<script>
  import BaseBackground from '@/components/base-background/base-background.vue'

  export default {
    components: {
      BaseBackground,
    },
  }
</script>
```

### 自定义背景图片

```vue
<template>
  <view class="page">
    <base-background :src="customBackground" />
    <!-- 其他内容 -->
  </view>
</template>
```

### 自定义裁剪模式

```vue
<template>
  <view class="page">
    <base-background mode="aspectFit" />
    <!-- 其他内容 -->
  </view>
</template>
```

### 自定义样式

```vue
<template>
  <view class="page">
    <base-background
      :custom-style="{
        borderRadius: '8rpx',
        opacity: 0.8,
      }"
    />
    <!-- 其他内容 -->
  </view>
</template>
```

## Props

| 参数        | 类型   | 默认值       | 说明                               |
| ----------- | ------ | ------------ | ---------------------------------- |
| src         | String | ''           | 背景图片源，如果不传则使用默认背景 |
| mode        | String | 'aspectFill' | 图片裁剪模式                       |
| customStyle | Object | {}           | 自定义样式对象                     |

## 裁剪模式说明

- `aspectFill`: 保持纵横比缩放图片，只保证图片的短边能完全显示出来
- `aspectFit`: 保持纵横比缩放图片，使图片的长边能完全显示出来
- `scaleToFill`: 不保持纵横比缩放图片，使图片完全适应容器
- `widthFix`: 宽度不变，高度自动变化，保持原图宽高比不变
- `heightFix`: 高度不变，宽度自动变化，保持原图宽高比不变

## 注意事项

1. 组件会自动设置 `position: absolute` 和 `z-index: -1`，确保背景图片在内容下方
2. 默认样式包含 `border-radius: 16rpx`，可以通过 `customStyle` 覆盖
3. 组件会自动导入 `CommonEnum`，使用默认背景图片