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>
|