54 lines
963 B
Vue
54 lines
963 B
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> |