bn-q-icon/components/Nav/Nav.vue

<template>
	<view class="nav-moudle" :class="{'bottom-border':border}" :style="{'background-color':backColor}">
		<view class="left-button button" @click="leftClick">
			<slot name="left" v-if="leftShow">
				<image :src="imgurl" class="icon-left">
				</image>
			</slot>
		</view>
		<view class="title-text" :style="{'color':titleColor}">
			{{title}}
		</view>
		<view class="right-button button" @click="rightClick">
			<slot name="right" v-if="rightShow">
				<image src="../../static/tabBar/business.png" class="icon-right"></image>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '标题'
			},
			titleColor: {
				type: String,
				default: '#333'
			},
			backColor: {
				type: String,
				default: '#fff'
			},
			leftShow: {
				type: Boolean,
				default: true
			},
			rightShow: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: true
			},
			imgurl: {
				type: String,
				default: require('../../static/home/retreat.png')
			}
		},
		methods: {
			leftClick() {
				this.$emit('leftClick')
			},
			rightClick() {
				this.$emit('rightClick')
			},
		},
	}
</script>

<style scoped lang="scss">
	.nav-moudle {
		display: flex;
		align-items: center;
		padding: 0 12px 0 12px;
		height: 44px;

		.title-text {
			flex: 1;
			text-align: center;
			font-size: 17px;
			font-weight: 600;
		}

		.icon-left {
			width: 20px;
			height: 20px;
		}
	}

	.button {
		width: 21px;
	}
</style>