1. 在你的组件中引入 NavBar 组件：
<template>
<vant-nav-bar
title="页面标题"
left-text="返回"
left-arrow
@click-left="onClickLeft"
right-text="按钮"
@click-right="onClickRight"
/>
</template>
<script>
import { NavBar } from 'vant';
export default {
components: {
[NavBar.name]: NavBar,
},
methods: {
onClickLeft() {
// 处理左侧按钮点击事件
console.log('点击了返回按钮');
},
onClickRight() {
// 处理右侧按钮点击事件
console.log('点击了右侧按钮');
},
},
};
</script>
在这个示例中：
- title 属性用于设置导航栏的标题。
- left-text 属性用于设置左侧按钮的文本。
- left-arrow 属性表示左侧按钮使用返回箭头样式。
- @click-left 事件会在左侧按钮点击时触发，你可以在 onClickLeft 方法中处理左侧按钮的点击逻辑。
- right-text 属性用于设置右侧按钮的文本。
- @click-right 事件会在右侧按钮点击时触发，你可以在 onClickRight 方法中处理右侧按钮的点击逻辑。
你可以根据实际需求添加其他属性或者定制样式。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5765/Vant