saas_miniprogram/components/nav-bar/nav-logo.vue

<template>
	<view>
		<u-navbar :class="title ? 'navbarL' : 'navbarC'" :is-back="false" :title="title" :border-bottom="false"
			:height="height" title-color="#ffffff" back-icon-color="#ffffff" :background="background">
			<view class="slot-wrap" v-if="isShowLogo">
				<!-- #ifdef MP-WEIXIN -->
				<image :src="$method.splitImgHost(header.wxlogo)" @load="load"
					:style="{ width: imgwidth + 'rpx', height: imgheight + 'rpx' }" />
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image :src="$method.splitImgHost(header.h5logo)" @load="load"
					:style="{ width: imgwidth + 'rpx', height: imgheight + 'rpx' }" />
				<!-- #endif -->
			</view>
		</u-navbar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		name: "NavLogo",
		props: {
			title: {
				type: String,
				default: "",
			},
			isShowLogo: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				height: 50,
				imgwidth: 0,
				imgheight: 0,
				background: {
					backgroundColor: 'rgb(0, 122, 255)',
				}
			};
		},

		mounted() {},
		computed: {
			...mapGetters(["userInfo", "header"]),
		},
		methods: {
			load(e) {
				console.log(e, 'e')
				this.imgwidth = e.detail.width;
				this.imgheight = e.detail.height;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.navbarL {
		image {
			margin-left: 20rpx;
		}

		img {
			margin-left: 20rpx;
		}
	}

	.navbarC {
		/deep/ .u-navbar-inner {
			margin-right: 0 !important;
		}

		.slot-wrap {
			width: 100vw;
			display: flex;
			align-items: center;

			image {
				margin-left: 20rpx;
				width: 178rpx;
				height: 31rpx;
			}
		}
	}
</style>