May 07, 2021 Vant
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('按钮');
}
}
}
Custom content through slots
<van-nav-bar title="标题" left-text="返回" left-arrow>
<van-icon name="search" slot="right" />
</van-nav-bar>
Parameters | Description | Type | The default |
---|---|---|---|
title | Title | string |
''
|
left-text | The left side of the paper | string |
''
|
right-text | The right-hand side of the paper | string |
''
|
left-arrow | Whether to display the left arrow | boolean |
false
|
fixed | Whether to pin to the top | boolean |
false
|
border | Whether to display the following border | boolean |
true
|
z-index | Element z-index | number | string |
1
|
Name | Description |
---|---|
title | Custom title |
left | Customize the contents of the left area |
right | Customize the contents of the right area |
The name of the event | Description | Callback parameters |
---|---|---|
click-left | Triggered when the left button is clicked | - |
click-right | Triggered when the right button is clicked | - |