caimei-applets-store/components/views/cm-header/cm-header.vue

<template>
	<view class="cm-header-nav" :style="[headerNavStyle, { backgroundColor: bgColor }]">
		<view class="cm-header" :style="[headerStyle]">
			<!-- 左侧按钮组 -->
			<view class="header-left" :style="[headerLeftStyle]">
				<view
					class="button-group"
					:class="{ border: border }"
					:style="[
						buttonCount === 1 ? buttonGroupStyleOne : buttonGroupStyleTwo,
						{ backgroundColor: groupBgColor, borderColor: borderColor }
					]"
				>
					<view
						class="btn iconfont"
						v-if="groupLeftButton"
						:class="groupLeftButton.icon"
						:style="{ color: groupLeftButton.color }"
						@click.stop="handleLeftClick(0)"
					></view>
					<view class="btn iconfont icon-vertical_line" v-if="buttonCount > 1"></view>
					<view
						class="btn iconfont"
						v-if="groupRightButton"
						:class="groupRightButton.icon"
						:style="{ color: groupRightButton.color }"
						@click.stop="handleLeftClick(1)"
					></view>
				</view>
			</view>

			<!-- 标题 -->
			<view class="header-title" :class="align" :style="{ fontSize: systemInfo.fontSizeSetting + 'px' }">
				<text>{{ title | formatTitle }}</text>
				<text
					class="btn iconfont icon-sousuo"
					:class="rightButton.icon"
					:style="{ color: rightButton.color }"
					v-if="rightButton"
					@click.stop="handleRightClick"
				></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'cm-header',
	props: {
		// 导航标题
		title: {
			type: String,
			default: '页面标题页面标题页面标题'
		},
		align: {
			type: String,
			default: 'center'
		},
		// 是否显示按钮组边框
		border: {
			type: Boolean,
			default: true
		},
		// 按钮组数据
		leftButtonGroup: {
			type: Array,
			default: () => [
				{
					icon: 'icon-daohangfanhui',
					color: '#333'
				},
				{
					icon: 'icon-fanhuishouye',
					color: '#333'
				}
			]
		},
		// 标题按钮数据
		rightButton: {
			type: Object,
			default: () => ({
				icon: 'icon-sousuo',
				color: '#333'
			})
		},
		// 按钮组背景色
		groupBgColor: {
			type: String,
			default: '#fff'
		},
		// 按钮组边框颜色
		borderColor: {
			type: String,
			default: '#eee'
		},
		// 导航栏背景色
		bgColor: {
			type: String,
			default: '#fff'
		}
	},
	filters: {
		formatTitle(title) {
			if (!title) return '页面标题'
			return title.substring(0, 6) + (title.length > 6 ? '...' : '')
		}
	},
	data() {
		return {
			height: 0,
			menuButtonInfo: {},
			systemInfo: {}
		}
	},
	created() {
		this.getSystemInfo()
	},
	computed: {
		groupLeftButton() {
			return this.leftButtonGroup[0]
		},
		groupRightButton() {
			return this.leftButtonGroup[1]
		},
		buttonCount() {
			return this.leftButtonGroup.length
		},

		// 导航栏样式
		headerNavStyle() {
			const { height, top } = this.menuButtonInfo
			this.$emit('init', { height: height + top })
			return {
				height: height + 'px',
				paddingTop: top + 'px',
				lineHeight: height + 'px'
			}
		},
		// 导航栏可用
		headerStyle() {
			const { height, width, right, left } = this.menuButtonInfo
			const { screenWidth } = this.systemInfo
			return {
				width: left + 'px',
				height: height + 'px',
				padding: `0 ${screenWidth - right}px`
			}
		},

		// 导航左侧样式
		headerLeftStyle() {
			const { height, width, right } = this.menuButtonInfo
			const { screenWidth } = this.systemInfo
			return {
				width: width + 'px',
				height: height + 'px',
				marginRight: `${screenWidth - right}px`
			}
		},

		// 一个按钮时的样式
		buttonGroupStyleOne() {
			const { height, width, right } = this.menuButtonInfo
			return {
				width: height + 'px',
				height: height + 'px',
				borderRadius: height / 2 + 'px'
			}
		},
		// 两个按钮时的样式
		buttonGroupStyleTwo() {
			const { height, width, right } = this.menuButtonInfo
			const { screenWidth } = this.systemInfo
			return {
				width: width + 'px',
				height: height + 'px',
				borderRadius: height / 2 + 'px',
				padding: `0 ${screenWidth - right}px`
			}
		}
	},
	methods: {
		// 获取系统信息
		getSystemInfo() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.systemInfo = uni.getSystemInfoSync()

			console.log(this.menuButtonInfo)
		},
		// 按钮组点击事件
		handleLeftClick(index) {
			uni.navigateBack({
				delta:1
			})
			this.$emit('leftClick', { index })
		},
		// 标题按钮点击事件
		handleRightClick() {
			this.$emit('rightClick')
		}
	}
}
</script>

<style lang="scss" scoped>
.cm-header-nav {
	width: 100%;
	position: relative;
	z-index: 100000;
	background: #fff;

	.cm-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		box-sizing: border-box;
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		align-items: center;

		box-sizing: border-box;
		background: #eee;

		&.border {
			border: 1px solid #ccc;
		}

		.btn {
			text-align: center;
			flex: 1;
			&.icon-vertical_line {
				flex: unset;
			}
		}
	}

	.header-title {
		display: flex;
		flex: 1;
		justify-content: center;

		.btn {
			margin-left: 4px;
			height: 100%;
		}

		&.left {
			justify-content: space-between;
		}
	}
}
</style>