首先，确保你已经引入了 Vant 4 和 Vue.js。你可以通过在 HTML 文件中引入相关的 CSS 和 JavaScript 文件，或者通过 npm 安装并在 Vue 组件中引入。
然后，在你的 Vue 组件中，可以使用以下代码来创建一个基本的 Vant NavBar：
<template>
<div>
<!-- NavBar 组件 -->
<van-nav-bar
title="导航栏标题"
left-text="返回"
left-arrow
@click-left="handleNavBack"
right-text="按钮"
@click-right="handleNavButton"
/>
<!-- 页面内容 -->
<div>
<!-- 这里放置页面内容 -->
<!-- 可以是其他 Vant 组件、文本、图片等 -->
</div>
</div>
</template>
<script>
export default {
methods: {
// 处理左侧按钮点击事件（返回）
handleNavBack() {
// 这里可以处理返回逻辑
// 例如：this.$router.go(-1);
},
// 处理右侧按钮点击事件
handleNavButton() {
// 这里可以处理右侧按钮点击逻辑
},
},
};
</script>
在上述代码中，<van-nav-bar> 表示导航栏容器，通过设置 title 属性来设置导航栏的标题。left-text 表示左侧按钮的文本，left-arrow 表示左侧按钮是否显示为返回箭头，通过 @click-left 监听左侧按钮的点击事件。同样，通过设置 right-text 属性来设置右侧按钮的文本，通过 @click-right 监听右侧按钮的点击事件。
在实际使用中，你可以根据需要调整按钮的文本、样式，以及在方法中处理按钮点击事件的逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/5849/Vant