buddhism/components/base-background

BaseBackground 背景图片组件

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

功能特性

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

使用方法

基础用法

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

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

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

自定义背景图片

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

自定义裁剪模式

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

自定义样式

<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，使用默认背景图片