Navbar 导航栏

介绍

为页面提供导航功能，常用于页面顶部。

基础用法

通过 title 属性设置导航栏标题。

<vd-navbar title="标题" />

左侧箭头

通过 left-arrow 属性设置导航栏左侧箭头。

<vd-navbar title="标题" left-arrow />

左侧文案

通过 left-text 属性设置导航栏左侧文案。

<vd-navbar title="标题" left-text="返回" />

右侧文案

通过 right-text 属性设置导航栏右侧文案。

<vd-navbar title="标题" right-text="右侧" />

使用插槽

通过 left 和 right 插槽设置导航栏左侧和右侧内容。

<vd-navbar title="标题" left-arrow>
  <template #right>
    <vd-button type="primary" icon="search" link></vd-button>
  </template>
</vd-navbar>

禁用状态

通过 left-disabled 和 right-disabled 属性设置导航栏左侧和右侧的禁用状态。

<vd-navbar
  title="标题"
  left-arrow
  left-text="返回"
  right-text="右侧"
  left-disabled
  right-disabled
/>

状态栏占位

通过 status-bar 属性设置状态栏占位。

<vd-navbar title="标题" status-bar />

API

Props

参数	说明	类型	默认值
title	标题	string	-
height	高度	string | number	44
fixed	是否固定在顶部	boolean	true
placeholder	固定在顶部时，是否启用占位元素	boolean	true
left-arrow	是否显示左侧箭头	boolean	false
left-text	左侧文案	string	-
right-text	右侧文案	string	-
left-disabled	左侧是否禁用	boolean	false
right-disabled	右侧是否禁用	boolean	false
status-bar	是否状态栏占位	boolean	false
z-index	层级	string | number	99

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-title	标题点击时触发	MouseEvent
click-left	左侧点击时触发	MouseEvent
click-right	右侧点击时触发	MouseEvent
resize	尺寸改变时触发	NodeRect

Slots

名称	说明
default	自定义内容
left	左侧内容
right	右侧内容