请用vue写一个侧边栏
时间: 2023-07-04 10:20:44 浏览: 98
好的,以下是一个简单的侧边栏示例:
```html
<template>
<div>
<button @click="toggleSidebar">Toggle Sidebar</button>
<b-sidebar v-model="sidebarVisible" side="left">
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</b-sidebar>
</div>
</template>
<script>
import { BSidebar } from 'builders-vue'
export default {
components: {
BSidebar
},
data() {
return {
sidebarVisible: false
}
},
methods: {
toggleSidebar() {
this.sidebarVisible = !this.sidebarVisible
}
}
}
</script>
```
在这个示例中,我们使用了 Builders Vue 的 `b-sidebar` 组件来创建侧边栏。侧边栏默认位于左侧,当点击按钮时可以切换侧边栏的显示和隐藏。
需要注意的是,我们在 `ul` 元素内部添加了菜单项,这些菜单项是需要根据实际需求进行修改的。
同时,我们还需要在页面中添加一个按钮或链接等元素来触发侧边栏的显示和隐藏,这里我们使用了一个简单的按钮来实现。
阅读全文