shuju_ui/qsshujujugrid/_components/hCustom.vue

<template>
	<!-- 自定义头部 -->
	<div class="">
		<div  v-if="is_status_bar" :style="'height:'+StatusBar+'px'"></div>
		<view v-else  :style="'height:'+CustomBar+'px'" >
			<view class="cu-custom title-size fixed fixed-top"    :style="style"  :class="[bgImage!=''?' text-white bg-img':'','']">
				<view
						class=" box  flew flew-between w-100"

						:style="[{height:CustomBar-StatusBar+'px',top:StatusBar+'px'}]"
				>
					<view class="action flew-column flew flew-center " @tap="BackPage" v-if="isBack">
						<!--                                <text class="cuIcon-back"></text>-->
						<slot name="backText"></slot>
					</view>
					<view class="content">
						<slot name="content"></slot>
					</view>
					<view class="right ">
						<slot name="right"></slot>
					</view>

				</view>
			</view>
		</view>
	</div>
</template>

<script>
	    export default {
			name: "h_custom",
			data() {
				return {
					CustomBar: '',// 头部标题高度
					StatusBar: ''//标题内容距离顶部的距离
				}
			},
			 computed: {
				style() {
					var StatusBar= this.StatusBar;
					var CustomBar= this.CustomBar;
					var bgImage = this.bgImage;
					var bgColor = this.bgColor;
					var textColor = this.textColor;
					var bgLinear = this.bgLinear;
					var style = `height:${CustomBar}px;color:${textColor};`;
					if (bgImage) {
						style = `${style}background-image:url(${bgImage});`;
					}
					if(bgColor){
						style = `${style}background-color:${bgColor};`;
					}
					if(bgLinear){
						style = `${style}background-image:${bgLinear};`;
					}
	
	
					return style
				}
			},
			props: {
				bgColor: {
					type: String,
					default: '#fff'
				},
				textColor: {
					type: String,
					default: '#000000'
				},
				isBack: {
					type: [Boolean, String],
					default: false
				},
				is_status_bar: {
					type: [Boolean, String],
					default: false
				},
				bgImage: {
					type: String,
					default: ''
				},
				circle: {
					type: [Boolean, String],
					default: false
				},
				bgLinear: {
					type: [ String],
					default: ''
				},
	
	
			},
			methods: {
				BackPage() {
					uni.navigateBack()
	
				},
				initTitleBar() {
	
	
					let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	
	
					this.StatusBar = statusBarHeight;
					this.CustomBar = statusBarHeight+45;
	
	
	
	
	
				}
	
			},
			mounted() {
	
	
				// let custom = uni.getMenuButtonBoundingClientRect();
	
	
				this.initTitleBar()
	
	
	
			}
		}
</script>

<style>
</style>