用vue3写一个侧边悬浮导航栏
时间: 2023-10-30 10:06:18 浏览: 163
好的,下面是一个简单的侧边悬浮导航栏的 Vue 3 组件的示例代码:
```html
<template>
<div class="sidebar">
<div class="sidebar-toggle" @click="toggleSidebar">
<i class="fa fa-bars"></i>
</div>
<div class="sidebar-items" :class="{ active: isOpen }">
<div class="sidebar-item" v-for="(item, index) in items" :key="index">
<router-link :to="item.route" @click="closeSidebar">
{{ item.label }}
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Sidebar",
data() {
return {
isOpen: false,
items: [
{ label: "Home", route: "/" },
{ label: "About", route: "/about" },
{ label: "Contact", route: "/contact" },
],
};
},
methods: {
toggleSidebar() {
this.isOpen = !this.isOpen;
},
closeSidebar() {
this.isOpen = false;
},
},
};
</script>
<style scoped>
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background-color: #f1f1f1;
overflow: hidden;
}
.sidebar-toggle {
position: absolute;
top: 10px;
right: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #333;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.sidebar-items {
padding-top: 60px;
transition: transform 0.3s ease-in-out;
transform: translateX(-200px);
}
.sidebar-items.active {
transform: translateX(0);
}
.sidebar-item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.sidebar-item:last-child {
border-bottom: none;
}
.sidebar-item a {
color: #333;
text-decoration: none;
}
.sidebar-item a:hover {
color: #000;
}
</style>
```
这个组件包含一个侧边悬浮导航栏,可以通过点击一个按钮来打开/关闭它。导航栏的项是通过 `items` 数组传递给组件的,每一项是一个包含 `label` 和 `route` 属性的对象。在组件中,我们使用 `v-for` 指令来遍历所有项,并使用 `router-link` 组件来渲染每个链接。你可以根据你的需求进行修改和定制。
阅读全文