头部导航栏的封装

1.header.vue

<template>
	<div class="header">
		<slot name="left"></slot>
		<slot name="center"></slot>
		<a v-if="showExit" @click="exitService" class="exit">退出服务</a>
		<div class="spinner" v-if="this.$store.state.showSpinner">
			<span>正在录制</span>
			<i class="div bounce1"></i>
			<i class="div bounce2"></i>
			<i class="div bounce3"></i>
		</div>
	</div>
</template>

<script>
export default{
	data(){
		return { }
	},
	computed:{
		showExit(){
			return this.$store.state.showExit;
		}
	},
	methods:{
		exitService(){
			this.$store.commit("addCardList1", null);
      this.$store.commit("addCardList2", null);
			this.$store.commit("addSdmdm", 0);
			this.$store.commit("updateFundListType", ""); //vuex存储基金公司
			this.$router.push({ path:'/ratePage' })
      this.$store.commit("returnReBankURL",null)
		}
	}
	/*mounted(){
	  	//产品推送 from 工具箱   to 外屏理财机
//	  	setInterval(()=>{
//	  		var url=$.busitrans.getParamValue("url");
//	  		if(url !=""){
//	  			this.$router.push({
//	  				path:'/financeDetail',
//	  				query:{
//	  					id:'9907455'
//	  				}
//	  			});
//	  			$.busitrans.deleteParamValue("url");
//	  		}
//	  	},5000)
    }*/
}
</script>

<style>
/*头部*/
.header{
	position: relative;
	width: 100%;
	height: 80px;
	background: -webkit-linear-gradient(top, #467cff, #356aa6);
	/*background:-webkit-gradient(linear, 0 0, 0 bottom, from(#950210), to(#cb0114));*/
}
.header h1{
	font-size: 32px;
	line-height: 80px;
	font-weight: normal;
	color: rgb(255, 255, 255);
	text-align: center;
}
a.btn_return{
	position: absolute;
	left: 20px;
	top: 28px;
	color: #fff;
	cursor: pointer;
	font-size: 24px;
}

.logo{
	margin-left: 30px;
	margin-top: 24px;
}
.logo_img1{
	margin-left: 28px;
	margin-top:28px;
}
.exit{
	position: absolute;
	top: 20px;
	right: 37px;
	/*margin-left: 30px;*/
	padding-left: 44px;
	line-height: 40px;
	font-size: 26px;
	letter-spacing: 2px;
	background: url(../assets/images/exit.png) left center no-repeat;
}
.top_nav{
	float: right;
	width: 940px;
	margin-top: 14px;
	font-size: 0;
}
.top_nav li{
	display: inline-block;
	width: 180px;
	height: 66px;
	margin-right: 10px;
	line-height: 66px;
	border: 1px solid rgba(255, 255, 255,.5);
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	text-align: center;
	font-size: 28px;
	letter-spacing: 2px;
}

.spinner {
	position: absolute;
	right: 20px;
	bottom: -36px;
	display: inline-block;
  height: 34px;
  border: 2px dashed #f00;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 0 20px;
  text-align: center;
  /*background-color: #fff;*/
 z-index: 99;
}
 .spinner span {
	display: inline-block;
	vertical-align: top;
	line-height: 30px;
	font-size: 20px;
	color: #cb0114;
}
.spinner .div {
	margin-top: 7px;
  width: 16px;
  height: 16px;
  background-color: #cb0114;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
</style>

2.headerDemo.vue

<template>
<componentsHeader>
  		<a class="btn_return" slot='left' @click="reBack">&lt; 返回</a>
  		<h1 slot='center'>{{tableData.prdName}}</h1>
</componentsHeader>
</template>
<script>
import componentsHeader from '@/components/header.vue'
components:{componentsHeader},
</script>