Vue3+Element-Plus 主页Aside布局设计 二四
1.左侧菜单布局设计效果2. 左侧菜单布局分析菜单分为两级,并且有折叠效果3.用到的菜单组件(Meun)介绍 Menu 菜单 | Element Plus (gitee.io)el-menu 整个左侧菜单最外层必须使用menu 包裹着el-submenu 一级菜单组件el-icon 菜单图标项span 菜单的文本el-menu-item 二级菜单组件<!-- 侧边栏菜单区域 -->&l
文章共2,237字 · 阅读需要大约8分钟
一键AI生成摘要,助你高效阅读
问答
·
1.左侧菜单布局设计效果
2. 左侧菜单布局分析
- 菜单分为两级,并且有折叠效果
3.用到的菜单组件(Meun)介绍 Menu 菜单 | Element Plus (gitee.io)
- el-menu 整个左侧菜单最外层必须使用menu 包裹着
- el-submenu 一级菜单组件
- el-icon 菜单图标项
- span 菜单的文本
- el-menu-item 二级菜单组件
<!-- 侧边栏菜单区域 -->
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
text-color="#fff">
<!-- 一级菜单 -->
<el-submenu index="1">
<!-- 一级菜单模板区域 -->
<template #title>
<!-- 图标 -->
<el-icon><location /></el-icon>
<!-- 文本 -->
<span>导航一</span>
</template>
<!-- 二级菜单 -->
<el-menu-item index="1-4-1">
<!-- 二级菜单模板区域 -->
<template #title>
<!-- 图标 -->
<el-icon><document /></el-icon>
<!-- 文本 -->
<span>导航二</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
注意:原本 element-plus 一级菜单官网是用el-sub-menu,但是这样好像不起作用,所以就改成了element-ui 这种el-submenu 这写法。有知道的小伙伴可以留言。
4. 布局了解清楚后,我们得知道如何按需去改造及使用这个菜单组件
4.1 打开官网,找到 Menu 菜单 | Element Plus (gitee.io) 选择合适的布局,粘贴代码
4.2 需要学会梳理基本代码结构
- 删除暂时使用不上的属性,可以让代码结构更加清晰一些
4.3 结构梳理完成后,下一步在需要先在element.js 导入并注册对应的组件
-
特别提醒,每开发一个页面所使用到的组件,如果是按需引用,一定要先导入对应组件,再进行功能开发
5. 查看页面效果
5.1 页面不显示相关图标,原因是需要安装icon 图标依赖
5.2 打开可视化面板,点击依赖,安装依赖
5.3 点击运行依赖,搜索element-plus/icons 依赖项,点击安装
5.4 安装完成后,需要在element.js 按需导入对应的图标样式
1.例如,页面使用到了一个location (位置) 的图标
2. element.js 导入
- 图标组件注册格式参考官方文档icon用例Component Registration | Vue.js (vuejs.org)
3. 重新编译后运行
啊这,奇丑无比图标。这是为何呢。
5. 哎,原来是忘记把图标组件注册了,那就去element.js 配置文件全局注册一下
6. 刷新页面看效果
7.小技巧 element-ui 和element-plus 图标使用方式有区别
- element-plus 是按需注册,用啥样的图标,需要手动注册啥样的图标
// element-ui 图标使用方式
<i class="el-icon-edit"></i>
// element-plus 使用方式
<el-icon >
<edit></edit>
</el-icon>
8. 特殊图标menu引入注意事项
- menu 图标需要加别名进行图标呈现
- 组件页面使用示例
9.vue 3 +element-plus 项目element.js 组件命名引入 小技巧
- 例如当页面中使用到一个组件,名称为el-button
由于组件使用的是驼峰式命名规则,那么在 element.js 导入该组件时。
需要写成,ElButton
5. 到此页面改造完成效果
6. Home.vue 代码
<template>
<el-container class="home_container">
<!-- 头部区域 -->
<el-header>
<div>
<img src="../assets/heima.png" alt="" />
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 页面主体区域 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">
<!-- 侧边栏菜单区域 -->
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
text-color="#fff">
<!-- 一级菜单 -->
<el-submenu index="1">
<!-- 一级菜单模板区域 -->
<template #title>
<el-icon><location /></el-icon>
<span>导航一</span>
</template>
<!-- 二级菜单 -->
<el-menu-item index="1-4-1">
<template #title>
<el-icon><document /></el-icon>
<span>导航二</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧内容主体区域 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
methods: {
logout () {
window.sessionStorage.clear()
this.$router.push('/login')
}
}
}
</script>
<style lang="less" scoped>
.home_container {
height: 100%;
}
.el-header {
background-color: #363d40;
// 给头部设置一下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
// 清空图片左侧padding
padding-left: 0;
// 按钮居中
align-items: center;
// 文本颜色
color: #fff;
// 设置文本字体大小
font-size: 20px;
// 嵌套
> div {
// 弹性布局
display: flex;
// 纵向上居中对齐
align-items: center;
// 给文本和图片添加间距,使用类选择器
span {
margin-left: 15px;
}
}
}
.el-aside {
background-color: #313743;
}
.el-main {
background-color: #e9edf1;
}
</style>
7. element.js 代码
import {
ElButton,
ElForm,
ElFormItem,
ElInput,
ElRow,
ElMessage,
ElContainer,
ElHeader,
ElAside,
ElMain,
ElMenu,
ElSubmenu,
ElMenuItem,
ElIcon
} from 'element-plus'
import {
Location,
Menu as IconMenu
} from '@element-plus/icons'
export default (app) => {
app.use(ElButton)
app.use(ElForm)
app.use(ElFormItem)
app.use(ElInput)
app.use(ElRow)
app.use(ElContainer)
app.use(ElHeader)
app.use(ElAside)
app.use(ElMain)
app.use(ElMenu)
app.use(ElSubmenu)
app.use(ElMenuItem)
app.use(ElIcon)
app.component('location', Location)
app.component('iconMenu', IconMenu)
app.config.globalProperties.$message = ElMessage
}
以上出自:
更多推荐
已为社区贡献8条内容
所有评论(0)