vue3 + element-plus实现侧边导航栏
在Vue 3中,您可以使用Element Plus库来创建一个侧边导航栏。以下是一个简单的例子:
- 首先,确保您已经安装了Element Plus:
npm install element-plus --save
- 在您的Vue组件中,引入所需的组件并注册:
<template>
<el-aside width="200px">
<!-- 侧边导航栏内容 -->
<el-menu default-active="1" class="el-menu-vertical-demo">
<el-menu-item index="1">
<template #title>
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
</el-menu-item>
<!-- 其他菜单项 -->
</el-menu>
</el-aside>
</template>
<script setup>
import { ElAside, ElMenu, ElMenuItem } from 'element-plus';
</script>
<style>
/* 添加样式 */
</style>
这段代码创建了一个宽度为200px的侧边导航栏,并包含一个菜单项。您可以根据需要添加更多的菜单项。在<style>
标签中,您可以添加自定义CSS来进一步美化您的导航栏。
评论已关闭