93 lines
2.1 KiB
Markdown
93 lines
2.1 KiB
Markdown
# 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`，使用默认背景图片 |