1. 安装 Vant4：
确保你的项目中已经安装了 Vue.js，并使用以下命令安装 Vant4：
npm install vant@next
2. 引入 Vant4：
在你的 Vue 组件中，通过 import 语句引入需要的 Vant 组件。对于导航组件，你可能需要引入 Tab 和 NavBar 组件。
import { createApp } from 'vue';
import { Tab, Tabs, NavBar } from 'vant';
import 'vant/lib/index.css';
const app = createApp(/* your app */);
app.use(Tab);
app.use(Tabs);
app.use(NavBar);
3. 使用 Tab 标签页组件：
在你的 Vue 模板中使用 <van-tabs> 和 <van-tab> 标签来创建标签页。
<template>
<van-tabs v-model="active">
<van-tab title="标签页1">内容1</van-tab>
<van-tab title="标签页2">内容2</van-tab>
<!-- 可以根据需要添加更多标签页 -->
</van-tabs>
</template>
<script>
export default {
data() {
return {
active: 0, // 当前激活的标签页索引
};
},
};
</script>
4. 使用 NavBar 导航栏组件：
在你的 Vue 模板中使用 <van-nav-bar> 标签来创建导航栏。
<template>
<van-nav-bar
title="导航标题"
left-text="返回"
@click-left="onClickLeft"
right-text="按钮"
@click-right="onClickRight"
/>
</template>
<script>
export default {
methods: {
onClickLeft() {
// 处理左侧按钮点击事件
},
onClickRight() {
// 处理右侧按钮点击事件
},
},
};
</script>
以上是使用 Vant4 的 Tab 标签页和 NavBar 导航栏组件的基本步骤。你可以根据实际需求进一步调整样式和配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5845/Vant