50 lines
1.0 KiB
Vue
50 lines
1.0 KiB
Vue
<template>
|
||
<image class="background-image" :src="backgroundSrc" :mode="mode" :style="customStyle"></image>
|
||
</template>
|
||
|
||
<script>
|
||
import CommonEnum from '../../enum/common'
|
||
|
||
export default {
|
||
name: 'BaseBackground',
|
||
props: {
|
||
// 背景图片源，如果不传则使用默认背景
|
||
src: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
// 图片裁剪模式
|
||
mode: {
|
||
type: String,
|
||
default: 'aspectFill',
|
||
},
|
||
// 自定义样式
|
||
customStyle: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
},
|
||
computed: {
|
||
CommonEnum() {
|
||
return CommonEnum
|
||
},
|
||
// 背景图片源，优先使用传入的src，否则使用默认背景
|
||
backgroundSrc() {
|
||
return this.src || CommonEnum.BACKGROUND
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.background-image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
border-radius: 16rpx;
|
||
}
|
||
</style>
|