请使用插槽实现一个导航栏结构
时间: 2024-05-06 08:21:02 浏览: 20
好的,以下是一个使用插槽实现导航栏的示例代码:
```html
<template>
<div class="navbar">
<div class="logo">Logo</div>
<ul class="nav-list">
<slot></slot>
</ul>
</div>
</template>
<style scoped>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
padding: 1rem;
background-color: #eee;
}
.logo {
font-size: 2rem;
font-weight: bold;
}
.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
margin-right: 1.5rem;
font-size: 1.5rem;
color: #333;
cursor: pointer;
transition: color 0.3s ease;
}
.nav-item:hover {
color: #007bff;
}
</style>
```
这是一个简单的导航栏结构,包含一个 Logo 和一个可自定义的导航列表,您可以在任何页面中使用它。您可以使用插槽向导航栏中添加自定义导航项。例如:
```html
<navbar>
<li slot="nav-item">Home</li>
<li slot="nav-item">About</li>
<li slot="nav-item">Contact</li>
</navbar>
```
在这个示例中,我们使用了三个导航项:Home、About和Contact。这些导航项将作为插槽内容传递到 Navbar 组件中,并显示在导航列表中。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)