uniapp 自制头部左侧胶囊组件

uniapp 自制头部左侧胶囊组件

	// 组件页面
<template>
	<view class="navigation-bar" :style="{
      height:navBarH}">
		<view class="navigation-bar-fixed" :style="{
      height:navBarH,background:(!config.transparent&&!config.linear)?config.bgcolor:'transparent'}">
			<!-- capsule or normal -->
			<view v-if="[1,2].indexOf(config.type)!= -1" :class="config.type==1?'navigation-bar-capsule':'navigation-bar-textbox'"
			 :style="{
      
				top:marTop,
				height:capsuleH,
				lineHeight:capsuleH,
				borderRadius:capsuleBr,
				width:width
				}">
				<view class="button-action" hover-class="button-action-active" @click="back_">
					<image :src="backIcon.icon" mode=""></image>
				</view>
				<view class="button-v-line"></view>
				<view v-if="!config.share" class="button-action" hover-class="button-action-active" @click="home_">
					<image :src="homeIcon.icon" mode=""></image>
				</view>
				<view v-if="config.share" class="button-action" hover-class="button-action-active">
					<button class="button_clear" open-type="share" hover-class="none">
						<image :src="shareIcon.icon" mode=""></image>
					</button>
				</view>
			</view>
			<!-- custom button -->
			<view v-if="[3,4].indexOf(config.type)!= -1" @click="conduct_" :class="config.type == 3?'navigation-bar-custom-capsule':'navigation-bar-custom-textbox'"
			 :style="{
      
				top:marTop, 
				backgroundColor :BGcolor,
				border:BGborder,
				height:capsuleH,
				lineHeight:capsuleH,
				borderRadius:capsuleBr
				}">
				<image v-if="config.menuIcon" class="custom-icon" :src="config.menuIcon"></image>
				<text class="custom-describe" style="color: #ff4200;">{
  {config.menuText}}</text>
			</view>


			<!-- title -->
			<view class="navigation-bar-title"