blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-09-18 18:00:01 +08:00
Code Issues Projects Releases Wiki Activity
vant/src/nav-bar/README.zh-CN.md
lmx-Hexagram f36961fe29
docs: change slot to # (#5858) 
* docs(SwipeCell): change "slot" to "v-slot"

* docs(SwipeCell): change `v-slot` to`#`

* docs(cell): change `slot` to `#`

* docs(checkbox): change `slot` to `v-slot`

* docs(field): change `slot` to `v-slot`

* docs(checkbox): remove wrong comment

* docs(radio): change `slot` to `#`

* docs(search): change `slot` to `#`

* docs(slider): change `slot` to `#`

* docs(switch): change `slot` to `#`

* docs(PullRefresh): change `slot` to `#`

* docs(collapse): change `slot` to `#`

* docs(panel): change `slot` to `#`

* docs(swipe): change `slot` to `#`

* docs(navbar): change `slot` to `#`

* docs(tab): change `slot` to `#`

* docs(tabber): change `slot` to `#`

* docs(TreeSelect): change `slot` to `#`

* docs(card): change `slot` to `#`

* docs(submitBar): change `slot` to `#`

* docs(sku): change `slot` to `#` unsure

* docs(cell): delete waste blank line

* docs(panel): fix indentation

* docs(PullRefresh): change "count" to "Refresh Count"

* docs(radio): delete waste blank line

* docs(search): move props above the event

* docs(submitBar): delete waste `<span>`

* docs(swipCell): delete waste blank line

* docs(tabbar): merge `<img>` into one line
2020-03-20 14:12:00 +08:00

1.4 KiB
Raw Blame History

NavBar 导航栏

引入

import Vue from 'vue';
import { NavBar } from 'vant';

Vue.use(NavBar);

代码演示

基础用法

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

import { Toast } from 'vant';

export default {
  methods: {
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    }
  }
}

高级用法

通过插槽定制内容

<van-nav-bar title="标题" left-text="返回" left-arrow>
  <template #right>
    <van-icon name="search"/> 
  </template>
</van-nav-bar>

API

Props

参数 说明 类型 默认值
title 标题 string ''
left-text 左侧文案 string ''
right-text 右侧文案 string ''
left-arrow 是否显示左侧箭头 boolean false
fixed 是否固定在顶部 boolean false
border 是否显示下边框 boolean true
z-index 元素 z-index number | string 1

Slots

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

Events

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