NavBar 导航栏

使用指南

  1. import { NavBar } from 'vant';
  3. Vue.use(NavBar);

代码演示

基础用法

  1. <van-nav-bar
  2.   title="标题"
  3.   left-text="返回"
  4.   right-text="按钮"
  5.   left-arrow
  6.   @click-left="onClickLeft"
  7.   @click-right="onClickRight"
  8. />
  1. export default {
  2.   methods: {
  3.     onClickLeft() {
  4.       Toast('返回');
  5.     },
  6.     onClickRight() {
  7.       Toast('按钮');
  8.     }
  9.   }
  10. }

高级用法

通过 slot 定制内容

  1. <van-nav-bar title="标题" left-text="返回" left-arrow>
  2.   <van-icon name="search" slot="right" />
  3. </van-nav-bar>

API

参数 说明 类型 默认值
title 标题 String ''
left-text 左侧文案 String ''
right-text 右侧文案 String ''
left-arrow 是否显示左侧箭头 Boolean false
fixed 是否固定在顶部 Boolean false
z-index 元素 z-index Number 1

Slot

名称 说明
title 自定义标题
left 自定义左侧区域内容
right 自定义右侧区域内容

Event

事件名 说明 参数
click-left 点击左侧按钮时触发 -
click-right 点击右侧按钮时触发 -

原文:

https://youzan.github.io/vant/#/zh-CN/nav-bar