高清版思维导图见后台管理项目地址
1.login登录页面
< el-form >表单
在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
<el-form
label-position="top" --【 对齐方式 (顶部对齐) 登录-换行-input的形式】
label-width="80px" -- 【表单域标签的宽度。作为 Form 直接子元素的 form-item 会继承该值。支持 auto】
:model="formdata" -- 【双向数据绑定,表单数据对象】
class="login-form"
:rules="rules" -- 【表单验证规则
ref="formdata" -- 【vue操作dom元素】
>
<el-form-item
label="用户名" -- 【label是form-item的属性】
prop="username" -- 【设置为需校验的字段名】
>
<el-input
v-model="formdata.username"
placeholder="请输入一个美丽的用户名"
prefix-icon="el-icon-s-custom"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="formdata.password" type="password"
placeholder="请输入密码"
prefix-icon="el-icon-s-goods" -- 【input标签内使用图标】
show-password --【可显示密码】
></el-input>
</el-form-item>
</el-form>
2.主页home页面
2.1< el-container > 布局容器
用于布局的容器组件,方便快速搭建页面的基本结构:
< el-container>:外层容器。当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。
< el-header>:顶栏容器。
< el-aside>:侧边栏容器。
< el-main>:主要区域容器。
< el-footer>:底栏容器。
以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外,< el-container> 的子元素只能是后四者,后四者的父元素也只能是 < el-container>。
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
2.2 Layout 布局
通过基础的 24 分栏,迅速简便地创建布局。
用于< el-header>
<el-row>
<el-col
:span="4" -- 【栅格占据的列数】
> </el-col>
<el-col :span="16"></el-col>
<el-col :span="4"></el-col>
</el-row>
因此登录页面的【登录】【重置】按钮应使用layout布局
<el-row
justify="center" -- 【flex 布局下的水平排列方式】
type="flex" -- 【布局模式,可选 flex,现代浏览器下有效】
>
<el-button type="primary" class="login-btn" @click="handleLogin('formdata')" >登录</el-button>
<el-button @click="resetForm('formdata')" type="info" class="login-btn" >重置</el-button>
</el-row>
2.3 < el-menu>导航菜单-侧栏
- 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。另外,在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
- 通过el-menu-item-group组件可以实现菜单进行分组,分组名可以通过title属性直接设定,也可以通过具名 slot 来设定。-- 在项目中未用到,因为菜单是动态生成而非一一列举的,
<el-aside class="aside" width="200px">
<el-col :span="24">
<el-menu
default-active="2" -- 【当前激活菜单的 index】
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="teal"
text-color="#fff"
active-text-color="#ffff33"
:unique-opened= true -- 【是否只保持一个子菜单的展开】
:router= true -- 【是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转】
>
<el-submenu -- 【启用二级菜单】
:index="item1.order.toString()" -- 【渲染一级菜单,index1~5】
v-for="(item1,i) in menus"
:key="item1.id">
<template slot="title"> -- 【↖一级菜单】
<i :class="iconlist[i]"></i>
<span>{
{item1.authName}}</span>
</template>
<el-menu-item -- 【二级菜单】
:index="item2.path"
v-for="it