使用element写帅气的导航栏
时间: 2024-05-01 09:21:49 浏览: 6
好的,以下是一个简单的示例:
```html
<template>
<div class="nav">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">产品中心</el-menu-item>
<el-menu-item index="3">新闻中心</el-menu-item>
<el-menu-item index="4">联系我们</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
}
},
methods: {
handleSelect(index) {
this.activeIndex = index;
}
}
}
</script>
<style scoped>
.nav {
background-color: #409EFF;
padding: 10px 20px;
}
.el-menu-demo {
background-color: #409EFF;
border: none;
}
.el-menu-demo .el-menu-item {
font-size: 16px;
margin-right: 20px;
color: #ffffff;
}
.el-menu-demo .el-menu-item:hover {
background-color: #66b1ff;
}
.el-menu-demo .el-menu-item.is-active {
background-color: #66b1ff;
}
</style>
```
在这个示例中,我们使用了Element UI的`el-menu`组件来创建导航栏。通过设置`default-active`属性,默认选中第一个菜单项。`@select`事件监听用户选中的菜单项,并将其赋值给`activeIndex`变量,以便在后续操作中使用。
在样式部分,我们设置了导航栏的背景颜色、字体大小、字体颜色等属性,同时也设置了菜单项的样式,包括鼠标悬停和选中状态的样式。