first

components/JeepayBackground/JeepayBackground.vue

@@ -0,0 +1,107 @@
+<!--
+  背景模板 
+  
+  使用方式： 
+  
+  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">
+		  </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;
+}
+</style>