145 lines
2.8 KiB
Vue
145 lines
2.8 KiB
Vue
<template>
|
|
<view class="header" :style="{backgroundColor:bgColor,height:height,borderBottomWidth:borderWidth}">
|
|
<view class="header-left">
|
|
<view class="header-left" v-if="isBack" @click="goback">
|
|
<u-icon :size="fontSize" name="arrow-left" :color="color"></u-icon>
|
|
</view>
|
|
<slot name="left" v-else>
|
|
</slot>
|
|
</view>
|
|
<view class="header-mid">
|
|
<slot name="mid" v-if="isMid">
|
|
|
|
</slot>
|
|
<text v-else :style="{fontSize:fontSize,fontWeight:fontWeight,color:color}">{{title}}</text>
|
|
</view>
|
|
<view class="header-right">
|
|
<slot name="right">
|
|
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* 共用头部
|
|
* title:中间标题 默认空
|
|
* bgColor:背景色 默认#fff
|
|
* height:高度 默认88rpx
|
|
* isBack:是否打开左方返回 默认打开
|
|
* borderWidth:下划线 默认无
|
|
* fontSize:返回箭头 中间字体大小 默认30rpx
|
|
* fontWeight:中间字体字重 默认加粗
|
|
* color:返回箭头 中间字体颜色 默认#333
|
|
* slot->left:左边插槽 开启后要将isBack传false
|
|
* slot->right:右边插槽
|
|
* isReturn 抛出返回方法
|
|
*/
|
|
export default {
|
|
props:{
|
|
black:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
isMid:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
title:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
bgColor:{
|
|
type:String,
|
|
default:'#fff'
|
|
},
|
|
height:{
|
|
type:String,
|
|
default:'88rpx'
|
|
},
|
|
isBack:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
borderWidth:{
|
|
type:String,
|
|
default:'0'
|
|
},
|
|
fontSize:{
|
|
type:String,
|
|
default:'36rpx'
|
|
},
|
|
fontWeight:{
|
|
type:String,
|
|
default:'bold'
|
|
},
|
|
color:{
|
|
type:String,
|
|
default:'#333'
|
|
},
|
|
isReturn:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
|
|
},
|
|
mounted(){
|
|
},
|
|
methods: {
|
|
goback(){
|
|
if(this.isReturn){
|
|
this.$emit('return');
|
|
}else{
|
|
console.log('2312313')
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header{
|
|
width:100vw;
|
|
height:88rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: #eee;
|
|
font-weight: bold;
|
|
padding: 0 30rpx;
|
|
font-size: 30rpx;
|
|
box-sizing: border-box;
|
|
.header-left{
|
|
min-width:120rpx;
|
|
height:100%;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.left-img{
|
|
width:18rpx;
|
|
height:32rpx;
|
|
}
|
|
}
|
|
.header-right{
|
|
min-width:120rpx;
|
|
height:100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
position: relative;
|
|
}
|
|
.header-mid{
|
|
flex:1;
|
|
height:100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
</style>
|