jp-xpgj-GA-file/src/components/TopHeader.vue

<template>
	<header :class="'mui-bar mui-bar-nav '+headerClass" :style="headerStyle">
		<template>
			<a v-if="titleDownShow" class="mui-title" @click="downAction">{{pageTitle}}<span class="mui-icon mui-icon-arrowdown"></span></a>
			<a v-else class="mui-title">{{pageTitle}}</a>
		</template>
		<a v-if="leftShow" class="mui-icon mui-icon-left-nav mui-pull-left" :routeName="routeName" @click="goBack"></a>
		<a v-if="rightLink.show" @click="doRightLink" class="fyy-bar mui-pull-right">
			<span :class="'mui-icon '+(rightLink.icon?(rightLink.icon.indexOf('mui-')>-1?'':'iconfont'):'')+' '+rightLink.icon" :style="rightLink.style">
				<span class="header-right-wz">
					{{rightLink.title}}<i></i>
				</span>
				<span v-if="systemMessageNum>0" class="mui-badge mui-badge-danger jp-badge" v-text="systemMessageNum"></span>
			</span>
		</a>
	</header>
</template>

<script>
	export default {
		name: 'TopHeader',
		props: {
			headerClass: {
				require: false,
				default: '',
			},
			headerStyle: {
				require: false,
				default: '',
			},
			routeName: {
				require: false,
				default: '',
			},
			pageTitle: {
				require: false,
				default: '',
			},
			leftShow: {
				require: false,
				default: true,
			},
			rightLink: {
				require: false,
				type: Object,
				default: () => ({
					show: false,
					to: '',
					icon: '',
					style: '',
					title: ''
				}),
			},
			doRightLink: {
				require: false,
				type: Function,
			},
			systemMessageNum: {
				require: false,
				default: 0
			},
			titleDownShow: {
				require: false,
				default: false,
			},
			downAction: {
				require: false,
				type: Function,
			}

		},
		methods: {
			//返回上一层
			goBack() {
				if (this.routeName) {
					this.$router.push({
						name: this.routeName
					})
				} else {
					this.$router.go(-1);
				}
			},
		},
	}
</script>

<style scoped src="@/assets/css/xpgj.css"></style>
<style scoped>
	.jp-badge {
		font-size: 12px !important;
		margin-left: 0 !important;
		line-height: 1.4 !important;
		top: 5px !important;
		left: 50% !important;
		background-color: #F7D046 !important;
		color: #000 !important;
	}
</style>