寫一個公用的組件 這樣在其它頁面也可以直接復用
組件m-header.vue
<template>
<div class="top-page" :class="{'top-bg': hasBg}"
:style="{height:1.28+statusBarHeight+'rem',paddingTop:0.46+statusBarHeight+'rem'}">
<div class="top">
<div class="back" @click="goBack">
<!-- 返回圖標箭頭 -->
<img style="width:0.5rem;height:0.5rem" src="@/assets/img/return_1.png" alt="">
</div>
<div class="top-title">{{title}}</div>
<div class="top-right">
<slot name='right'></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'top',
props: {
title: {
type: String,
default: ''
},
hasBg: { //背景色默認橙色
type: Boolean,
default: true
},
routerName: { //傳路由跳特定頁面
type: String,
default: ''
}
},
data() {
return {
statusBarHeight: this.$sysInfo ? this.$sysInfo.statusBarHeight / 100 : 0,
}
},
methods: {
goBack() {
if (this.routerName) {
this.$router.replace({
name: this.routerName
});
} else {
this.$router.go(-1)
}
}
}
}
</script>
<style lang="scss">
*{
margin: 0;
padding: 0;
font-size: 0.32rem;
}
// 頭部樣式
.top-page{
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 1.28rem;
.top{
height: 1.28rem;
text-align: center;
display: flex;
font-size: 1rem;
padding: 0 0.2rem;
// justify-content: space-around;
align-items: center;
color: #fff;
.back{
}
.top-title{
flex: 1;
}
.top-right{
// width: 1.24rem;
}
}
}
.top-bg{
background: linear-gradient(-226deg, #FE7514 0%, #FFC15D 100%);
}
</style>
在其他頁面中引入組件並使用 index.vue
<template>
<div>
<top title="首頁表題" class="top">
<div slot="right">
右邊
</div>
</top>
<div style="height:500px;" @click="toPh">點擊</div>
</div>
</template>
<script>
import top from '@/components/m-header.vue'
export default {
components: {
top
},
name: 'index',
data() {
return {
};
},
created() {
// if(this.$client.WEBKIT) {
// console.log('谷歌首頁')
// }
},
methods:{
toPh() {
this.$router.push({
name: 'father'
})
},
}
};
</script>
效果顯示：
在其他頁面使用只需改頁面標題 title文字即可。