132 lines
2.5 KiB
Vue
132 lines
2.5 KiB
Vue
<template>
|
||
<view class="custom-navbar" :style="{
|
||
paddingTop: statusBarHeight + 'px',
|
||
color: color
|
||
}">
|
||
<!-- 左侧按钮 -->
|
||
<view class="navbar-left">
|
||
<slot name="left">
|
||
<!-- 返回按钮（独立点击事件） -->
|
||
<uni-icons type="left" v-if="showBack" size="26" color="rgba(255, 255, 255, 0.9)"
|
||
@click="handleBack"></uni-icons>
|
||
</slot>
|
||
</view>
|
||
<!-- 标题 -->
|
||
<view class="navbar-title" :style="{ color: color }">
|
||
<slot>{{ title }}</slot>
|
||
</view>
|
||
<!-- 右侧按钮 -->
|
||
<view class="navbar-right">
|
||
<slot name="right">
|
||
<!-- 默认显示文字 -->
|
||
<text v-if="rightText" :style="{ color: rightColor }" @click="handleRightClick">
|
||
{{ rightText }}
|
||
</text>
|
||
<!-- 或显示图标 -->
|
||
<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick" mode=""
|
||
class="pathIMG">
|
||
</image>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
title: String,
|
||
showBack: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
|
||
backgroundColor: {
|
||
type: String,
|
||
default: '#FFFFFF' // 修改默认背景色为白色
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: '#333333' // 修改默认文字色为深灰
|
||
},
|
||
rightText: String, // 右侧文字
|
||
rightIcon: {
|
||
type: String, // 改为 String 类型，接收图片路径
|
||
default: '' // 默认空字符串
|
||
},
|
||
rightColor: { // 右侧内容颜色
|
||
type: String,
|
||
default: '#FFFFFF'
|
||
},
|
||
rightIconSize: { // 图标大小
|
||
type: Number,
|
||
default: 24
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight: 0
|
||
}
|
||
},
|
||
created() {
|
||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||
},
|
||
methods: {
|
||
handleBack() {
|
||
uni.navigateBack()
|
||
},
|
||
handleRightClick() {
|
||
this.$emit('right-click'); // 触发右侧点击事件
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.custom-navbar {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 70px;
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
line-height: 44px;
|
||
background-color: #121212 !important;
|
||
}
|
||
|
||
.navbar-left,
|
||
.navbar-right {
|
||
min-width: 100rpx;
|
||
/* 增大最小宽度 */
|
||
padding: 0 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
/* 图标间距 */
|
||
}
|
||
|
||
.navbar-left {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.navbar-right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.navbar-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.icon {
|
||
width: 34px;
|
||
height: 34px;
|
||
}
|
||
|
||
.pathIMG {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
</style> |