具体代码
<view v-if="isCustom" class="nav-content-container" :style="'height:'+navContentHeight +'px;'">
<slot name="left">
</slot>
<slot name="middle"> </slot>
<view :style="'width:'+navPaddingRight+'px;'+'height:40px'"></view>
</view>
<view v-else class="nav-content-container" :style="'height:'+navContentHeight +'px;'">
<image v-if="!isInTab" class="nav-content-left" src="../../static/back.png" mode="widthFix"
@click="handleClickBack" />
<view class="nav-content-middle">
<text>{{titleText}}</text>
</view>
</view>
<slot name="bottom" :style="'height:'+bottomComponentHeight +'px;'"></slot>
</view>
使用方法:
使用默认配置:
<navbar titleText="这是标题"></navbar>
使用自定义插槽:
<navbar :isCustom="true" @init-height="initNavHeight" data-eventsync="true" bottomComponentHeight="45">
<template v-slot:left>
<image class="nav-content-left" src="../../static/back.png" mode="widthFix" @click="handleClickBack" />
</template>
<template v-slot:middle>
<view class="search-bar-middle" @click="handlerClickSearch()">
<image src="../../static/search.png" mode="widthFix" style="width: 24rpx"></image>
<text class="search-bar-middle-text">搜索内容、体系、文章</text>
</view>
</template>
<template v-slot:bottom>
<classify-menu-bar :tabArr="tabArr" @on-change-tab="onChangeTab" class="classify-top-container"></classify-menu-bar>
</template>
</navbar>
一共有三个插槽:
● left: 左侧
● middle:居中
● bottom:固定底部 (需用传递属性,作为底部buttom的高度)