TopBar.vue

<template>
	<view class="topbar_view" :style="[{'color': titleColor, 'background-color': bgColor}, bold ? {'font-weight':900} : 'initial']">
		<text class="eosfont left_icon" @click="back()">&#xe622;</text>
		{{this.title}}
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: '#212121'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			bold: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			back() {
				const routes = getCurrentPages();
				if(routes.length > 1){
					uni.navigateBack();
				}else{
					history.back();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.topbar_view {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #212121;
		font-size: 30rpx;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #fff;
		z-index: 100;
		.left_icon {
			position: absolute;
			left: 20rpx;
		}
	}
</style>