63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<view class="nav flex-line" :style="`background-color:${bgColor}`">
|
||
|
|
<view class="icon-image">
|
||
|
|
<slot v-if="isLeftSlot" name="leftView"></slot>
|
||
|
|
<img v-else src="@/static/image/help/back.png" alt="" @click="back" />
|
||
|
|
</view>
|
||
|
|
<view class="color-3 title font-w500 font-36">
|
||
|
|
{{navTitle}}
|
||
|
|
</view>
|
||
|
|
<view class="flex-line">
|
||
|
|
<slot name="rightView"></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "navBar",
|
||
|
|
props: {
|
||
|
|
bgColor: {
|
||
|
|
type: String,
|
||
|
|
default: () => "transparent",
|
||
|
|
},
|
||
|
|
navTitle: {
|
||
|
|
type: String,
|
||
|
|
default: () => "标题",
|
||
|
|
},
|
||
|
|
emitBack:{
|
||
|
|
type: Boolean,
|
||
|
|
default: () => false,
|
||
|
|
},
|
||
|
|
isLeftSlot:{
|
||
|
|
type: Boolean,
|
||
|
|
default: () => false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
back(){
|
||
|
|
if(this.emitBack) {
|
||
|
|
this.$emit('backEvent')
|
||
|
|
} else {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.nav {
|
||
|
|
padding: 32rpx;
|
||
|
|
width: calc(100% - 64rpx);
|
||
|
|
justify-content: start;
|
||
|
|
.icon-image {
|
||
|
|
width: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
width: calc(100% - 3rem);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|