119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<!--
|
||
背景模板
|
||
|
||
使用方式：
|
||
|
||
A. 背景图片的通用外部view （ APP不支持背景图片的变量动态替换， 所以只能业务页面来写入背景图片的地址。 ）
|
||
<JeepayBackground :bgImgView="true">页面内容</JeepayBackground>
|
||
<style scoped>
|
||
/deep/ .bg-img-view { background: url('/static/indexImg/user-bg.svg'); }
|
||
</style>
|
||
|
||
B. 背景是自定义颜色的外部view ( 默认蓝色渐变 )
|
||
<JeepayBackground :bgColorStyle="{}">页面内容</JeepayBackground>
|
||
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/11/19 08:08
|
||
-->
|
||
<template>
|
||
|
||
<!-- 微信小程序： <page-meta>: 只能是页面内的第一个节点，且不能被 wx:if 或 wx:for 动态变更
|
||
uniapp: 打包到小程序， 会添加 <jeepay-background>标签， 导致该问题。 无奈 小程序不可使用： <page-meta> 标签， 实现方式为： page-wrapper height方式。
|
||
-->
|
||
<!-- <page-meta :pageStyle="'overflow:' + (vdata.pageMetaOverflow ? 'visible' : 'hidden')"></page-meta> -->
|
||
<!-- #ifdef APP-PLUS-->
|
||
<page-meta :pageStyle="'overflow:' + (vdata.pageMetaOverflow ? 'visible' : 'hidden')"></page-meta>
|
||
<!-- #endif -->
|
||
<!-- page-wrapper 包裹 -->
|
||
<view class="page-wrapper" :style="{overflow:vdata.pageMetaOverflow ? 'visible' : 'hidden', height:vdata.pageMetaOverflow ? 'auto' : '90vh'}">
|
||
|
||
<!-- 背景图片view -->
|
||
<view class="bg-img-view" :style="vdata.bgImgStyle">
|
||
|
||
<!-- 背景颜色view -->
|
||
<view class="bg-color-view" :style="vdata.bgColorStyle" style="border-radius:0;background-color: #318AFE!important;">
|
||
<view class="bgbottomStyle">
|
||
</view>
|
||
</view>
|
||
<!-- 解决定位层级问题 -->
|
||
<view class="bg-main">
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref, onMounted, provide, computed } from 'vue'
|
||
|
||
// 选择是图片风格 还是 背景颜色风格。
|
||
const props = defineProps({
|
||
// 背景图片
|
||
bgImgView: { type: Boolean }, // APP 不支持背景图片的动态替换。。。
|
||
|
||
// 背景颜色style
|
||
bgColorStyle: { type: Object },
|
||
// 禁止滚动穿透
|
||
|
||
})
|
||
|
||
|
||
function changePageMetaOverflowFunc(v){
|
||
vdata.pageMetaOverflow = v
|
||
}
|
||
provide('changePageMetaOverflowFunc', changePageMetaOverflowFunc)
|
||
|
||
|
||
const vdata = reactive({
|
||
|
||
bgImgStyle : { }, // 注意： style变量需要全部替换， 不可使用Object.assign修改里面的值, 否则 APP不生效！
|
||
bgColorStyle : { },
|
||
pageMetaOverflow: true
|
||
})
|
||
provide('pageMetaOverflow',computed(()=>vdata.pageMetaOverflow))
|
||
onMounted(() => {
|
||
|
||
// 包含背景图片
|
||
if(props.bgImgView){
|
||
vdata.bgImgStyle = {
|
||
position: "absolute",
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
backgroundRepeat: 'no-repeat'
|
||
}
|
||
}
|
||
|
||
|
||
// 包含背景色
|
||
if(props.bgColorStyle){
|
||
let defStyle = { // 默认颜色
|
||
position: "absolute",
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: '550rpx',
|
||
borderRadius: '0 0 32rpx 32rpx',
|
||
// background: 'linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)',
|
||
}
|
||
vdata.bgColorStyle = Object.assign(defStyle, props.bgColorStyle)
|
||
}
|
||
})
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.bg-main{
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
.bgbottomStyle{
|
||
position: absolute;
|
||
bottom: -2rpx;
|
||
left: 0;
|
||
|
||
width: 750rpx;
|
||
height: 74rpx;
|
||
background: linear-gradient( 180deg, rgba(195,215,235,0) 0%, #F9F9F9 100%);
|
||
}
|
||
</style>
|