YingXingAI/components/HeaderBar.vue

87 lines
1.5 KiB
Vue

<template>
<view class="header">
<div class="header-left">
<u-icon
v-if="showLeftIcon"
class="header-left-icon"
:name="leftIcon"
@click="handleLeftClick"
></u-icon>
<slot name="left"></slot>
</div>
<text class="header-title" :style="{ color: titleColor }">{{ title }}</text>
<div class="header-right">
<slot name="right"></slot>
</div>
</view>
</template>
<script>
export default {
name: 'HeaderBar',
props: {
// 标题
title: {
type: String,
default: ''
},
// 标题颜色
titleColor: {
type: String,
default: '#333333'
},
// 是否显示左侧图标
showLeftIcon: {
type: Boolean,
default: true
},
// 左侧图标
leftIcon: {
type: String,
default: 'arrow-left'
}
},
methods: {
// 处理左侧按钮点击
handleLeftClick() {
this.$emit('leftClick');
}
}
}
</script>
<style lang="scss" scoped>
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
height: 88rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
z-index: 99;
.header-left {
width: 40rpx;
font-size: 36rpx;
display: flex;
align-items: center;
}
.header-title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.header-right {
width: 40rpx;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
</style>