charge_miniapp/components/ax-custom-title/ax-custom-title.vue

<template>
	<view v-if="visible" class="ax ax-custom-title" :style="{padding}">
		<view class="__body" :style="{height}">
			<slot>
				<view @click="back()">
					<text v-if="this.pages.length>1"  class="icon-back"></text>
					<text class="title">{{title || titleText}}</text>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	import PagesJSON from "@/pages.json";
	export default {
		name:"ax-custom-title",
		props:{
			// 显示首页按钮
			title:{type:String,default:''},
			// PC模式下无插槽内容也任然显示组件
			unlock:{type:Boolean,default:false},
		},
		data() {
			return {
				titleText: '',
				visible: false,
				padding: '0px',
				height: 'auto'
			};
		},
		async created() {
			const sys = await this.systemInfo();
			this.visible = sys.windowHeight === sys.screenHeight;
			if(this.visible==false) return;
			var rect = {top:0,left:0,right:0,bottom:0,width:0,height:0}
			if(sys.uniPlatform.indexOf('mp-')===0) rect = uni.getMenuButtonBoundingClientRect();
			var interval = sys.windowWidth - (rect.right || sys.windowWidth-10);
			const data = {
				top: rect.top,
				left: interval,
				right: (rect.width || interval*-1) + interval * 2,
				bottom: interval,
				componentHeight: rect.top+rect.height+interval,
				statusBarHeight: sys.statusBarHeight
			}
			var top  = `${data.top}px`;
			var left = `${data.left}px`;
			var right = `${data.right}px`;
			var bottom = `${data.bottom}px`;
			if(['windows','mac'].includes(sys.platform)){
				top = 0;
				bottom = 0;
				right = left;
				rect.height = 45;
				if(this.unlock == false && !this.$slots.default) this.visible = false;
			}
			this.padding = [top,right,bottom,left].join(' ');
			this.height = `${rect.height || 50}px`;
			const currentPage = Array.from(getCurrentPages()).pop();
			const pageConfig = PagesJSON.pages.find(i=>i.path==currentPage.route);
			this.titleText = pageConfig.style.navigationBarTitleText;
			this.$emit('display',data);
		},
		computed:{
			pages(){
				return getCurrentPages();
			}
		},
		methods:{
			systemInfo(){
				return new Promise((resolve,reject)=>{
					uni.getSystemInfo({
						success: res=>resolve(res),
						fail: err=>reject(err)
					});
				});
			},
			back(){
				uni.navigateBack({delta: 1});
			}
		}
	}
</script>

<style scoped>
@import url(../ax/ax.css);
.ax-title-bar{
	width: 100vw;
	color: #000;
	position: relative;
	z-index: 999999;
}
.__body{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.__body::after{
	content: '';
}
.icon-back{
	margin-right: 5px;
}
.icon-back::before{
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-width: 0 0 2px 2px;
	border-style: solid;
	border-color: #000;
	transform-origin: center center;
	transform: rotate(45deg) translateY(-3px) translateX(1px);
}
</style>