navbar props

属性	描述	类型	默认值
title	标题	string	-
height	高度	number	44
hasBorder	是否要底部边框	boolean	true
leftIconName	左边icon的名称	string	arrow-left
leftIconSize	左边icon的大小，和icon组件的size字段一样	string	-
leftIconColor	左边icon的颜色，和icon组件的color字段一样	string	inherit
leftIconClassPrefix	左边icon的类名，和icon组件的classPrefix字段一样	string	vill-icon-
leftVisible	右边区域是否显示	boolean	true
rightIconName	右边icon的名称	string	-
rightIconSize	右边icon的大小，和icon组件的size字段一样	string	-
rightIconColor	右边icon的颜色，和icon组件的color字段一样	string	inherit
rightIconClassPrefix	右边icon的类名，和icon组件的classPrefix字段一样	string	vill-icon-
rightVisible	右边区域是否显示	boolean	true

navbar slot

名称	说明	返回的参数
left	左边的slot	-
middle	中间边的slot	title
right	右边的slot	-

navbar events

事件	说明	回调参数
left-click	左边区域点击事件	event
right-click	右边区域点击事件	event

例子代码

基础navbar

<vill-nav-bar title="基础navbar"></vill-nav-bar>

只显示title

<vill-nav-bar :leftVisible="false" :rightVisible="false" title="只显示title"></vill-nav-bar>

自定义navbar

<vill-nav-bar
  :height="54"
  :hasBorder="false"
  title="自定义navbar"
  leftIconSize="20"
  leftIconColor="red"
  :rightIconName="require('/assets/imgs/logo.png')"
  rightIconSize="20,30"
/>

slot 扩展navbar

<vill-nav-bar title="slot 扩展navbar,如果有很长很长很长的标题，会怎么样呢">
  <template #left>取消</template>
  <template #middle="{title}">{{ title }}</template>
  <template #right>添加</template>
</vill-nav-bar>