要使用Vant的Sidebar組件，首先需要安裝Vant UI庫?？梢允褂胣pm或者yarn進行安裝：
npm install vant
或者
yarn add vant
然后在需要使用Sidebar組件的地方引入：
<template>
<div>
<van-sidebar v-model="activeKey">
<van-sidebar-item title="Option1" :key="1" />
<van-sidebar-item title="Option2" :key="2" />
<van-sidebar-item title="Option3" :key="3" />
</van-sidebar>
</div>
</template>
<script>
import { ref } from 'vue';
import { Sidebar, SidebarItem } from 'vant';
export default {
components: {
VanSidebar,
VanSidebarItem
},
setup() {
const activeKey = ref(1);
return {
activeKey
};
}
};
</script>
在上面的示例中，我們通過import引入了Sidebar和SidebarItem組件，并在template中使用了這兩個組件。activeKey是一個響應式變量，用來控制當前選中的菜單項。通過v-model指令我們將activeKey和Sidebar組件進行了雙向綁定。每個SidebarItem組件表示一個菜單項，通過設置key屬性來標識不同的菜單項。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
