首先，确保你已经引入了 Vant 4 和 Vue.js。你可以通过在 HTML 文件中引入相关的 CSS 和 JavaScript 文件，或者通过 npm 安装并在 Vue 组件中引入。
然后，在你的 Vue 组件中，可以使用以下代码来创建一个基本的 Vant Sidebar：
<template>
<div>
<!-- Sidebar 组件 -->
<van-sidebar v-model="activeKey" :value="activeKey" :collapse="isCollapse" @change="handleSidebarChange">
<!-- Sidebar 导航项 -->
<van-sidebar-item index="1">菜单项1</van-sidebar-item>
<van-sidebar-item index="2">菜单项2</van-sidebar-item>
<van-sidebar-item index="3">菜单项3</van-sidebar-item>
</van-sidebar>
<!-- 页面内容 -->
<div style="margin-left: 80px; padding: 20px;">
<!-- 这里放置页面内容 -->
<!-- 可以是其他 Vant 组件、文本、图片等 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeKey: '1', // 当前激活的导航项
isCollapse: false, // 是否折叠侧边栏
};
},
methods: {
// 处理导航项变化事件
handleSidebarChange(key) {
// 在这里可以处理导航项变化时的逻辑
console.log('当前激活的导航项:', key);
},
},
};
</script>
在上述代码中，<van-sidebar> 表示侧边导航容器，通过设置 v-model 来绑定当前激活的导航项。通过 :value 设置初始激活的导航项，:collapse 设置是否折叠侧边栏。通过 @change 监听导航项变化事件，调用 handleSidebarChange 方法处理导航项变化时的逻辑。
在实际使用中，你可以根据需要调整导航项的数量、内容，以及在 handleSidebarChange 方法中处理导航项变化时的逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/5851/Vant