NavBar 导航栏 - Vant 4

🧭 NavBar 导航栏

🎯 介绍

NavBar 组件提供页面导航功能，为页面提供导航功能，常用于页面顶部。支持标题显示、左侧返回、右侧按钮等功能，让页面导航更加清晰！

📦 引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from'vue'; import { NavBar } from'vant'; const app = createApp(); app.use(NavBar);

🎯 代码演示

🔧 基础用法

通过 title 属性设置导航栏标题，就像给页面戴上一顶漂亮的帽子！🎩

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

⬅️ 返回上级

在导航栏实现返回上级功能，让用户轻松找到回家的路！🏠

<van-navbar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};

➡️ 右侧按钮

在导航栏右侧添加可点击的按钮，就像给工具箱增加一个便捷的小工具！🔧

<van-navbar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

import { showToast } from 'vant';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => showToast('按钮');
    return {
      onClickLeft,
      onClickRight,
    };
  },
};

🎨 使用插槽

可以通过插槽自定义导航栏两侧的内容，就像装修房子一样自由发挥创意！✨

<van-navbar title="标题" left-arrow @click-left="onClickLeft">
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-navbar>

🚫 禁用按钮

通过 left-disabled 或 right-disabled 属性来禁用两侧的按钮。按钮被禁用时透明度降低，且无法点击，就像给按钮戴上了"请勿打扰"的标签！😴

<van-navbar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  right-disabled
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

📋 API

🎛️ Props

参数	说明	类型	默认值
title	标题文字，导航栏的"门牌号" 🏷️	string	''
left-text	左侧文案，通常是"返回"按钮 ⬅️	string	''
right-text	右侧文案，可以是"完成"、"保存"等 ➡️	string	''
left-disabled v4.6.8	是否禁用左侧按钮，禁用时透明度降低，且无法点击 🚫	boolean	false
right-disabled v4.6.8	是否禁用右侧按钮，禁用时透明度降低，且无法点击 🚫	boolean	false
left-arrow	是否显示左侧箭头，指引用户返回方向 🏹	boolean	false
border	是否显示下边框，为导航栏添加分割线 📏	boolean	true
fixed	是否固定在顶部，让导航栏始终可见 📌	boolean	false
placeholder	固定在顶部时，是否在标签位置生成一个等高的占位元素 🎭	boolean	false
z-index	导航栏层级，控制显示优先级 📚	number | string	1
safe-area-inset-top	是否开启顶部安全区适配，适配刘海屏 📱	boolean	false
clickable	是否开启两侧按钮的点击反馈，提供触觉体验 👆	boolean	true

🎰 Slots

名称	说明
title	自定义标题，让标题区域更个性化 🎨
left	自定义左侧区域内容，可以放置图标或其他元素 ⬅️
right	自定义右侧区域内容，可以放置按钮或图标 ➡️

🎪 Events

事件名	说明	回调参数
click-left	点击左侧按钮时触发，通常用于返回操作 👈	event: MouseEvent
click-right	点击右侧按钮时触发，可以执行各种操作 👉	event: MouseEvent

📝 类型定义

组件导出以下类型定义：

import type { NavBarProps } from 'vant';

🎨 主题定制

🎛️ 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-nav-bar-height	46px	导航栏高度 📏
--van-nav-bar-background	var(--van-background-2)	导航栏背景色 🎨
--van-nav-bar-arrow-size	16px	箭头图标大小 🏹
--van-nav-bar-icon-color	var(--van-primary-color)	图标颜色 🎯
--van-nav-bar-text-color	var(--van-primary-color)	文字颜色 ✏️
--van-nav-bar-title-font-size	var(--van-font-size-lg)	标题字体大小 📝
--van-nav-bar-title-text-color	var(--van-text-color)	标题文字颜色 🏷️
--van-nav-bar-z-index	1	导航栏层级 📚

📚 相关文档

• Icon 图标 - 图标组件
• Button 按钮 - 按钮组件
• Tabbar 标签栏 - 标签栏组件
• Tab 标签页 - 标签页组件