Elment UI 布局组件

1 Element UI 布局组件

<!-- 外层容器：管「上下」结构 -->
<el-container class="layout">
  <!-- 第一部分：顶部Header（垂直布局的第一个子元素） -->
  <el-header>...</el-header>
  
  <!-- 内层容器：管「左右」结构（垂直布局的第二个子元素） -->
  <el-container>
    <!-- 左侧Aside（水平布局的左元素） -->
    <el-aside width="200px">...</el-aside>
    <!-- 右侧Main（水平布局的右元素） -->
    <el-main>...</el-main>
  </el-container>
</el-container>

2Form Methods validate

-

官方写的 Function(callback: Function(boolean, object))，是类型注解，拆解成两层：

外层 Function：表示 validate 方法的参数类型是一个函数（你必须传一个函数给它）；

内层 callback: Function(boolean, object)：

这个 callback 是你传的那个函数的名字（只是类型里的占位符，你实际写的时候可以叫任意名，比如 validCb、handleValid）；

Function(boolean, object)：表示这个回调函数本身有两个参数------ 第一个是布尔值（valid，是否通过），第二个是对象（invalidFields，未通过的字段详情）。

callback() 和 callback(new Error(...)) 都是对 el-form 专属回调函数的调用；

el-form 能精准捕获这两种调用：无参调用标记字段通过，传 Error 参数调用则捕获错误信息并渲染提示。

validator 本身是你定义的一个校验函数，el-form 会主动调用它，并把 rule、value、callback 这三个 "内部参数" 传给它；而你在函数里调用 callback()/callback(new Error())，本质是给 el-form 传进来的这个专属回调函数传参，完成校验结果的汇报。

3 message

4 Dropdown

4.1el-dropdown Events 的command

el-dropdown-item 会通过 Vue 组件的原生方法 $emit，主动向父组件 el-dropdown 派发一个「自定义事件」，事件名就是 command，并把 command 属性的值（如 logout）作为参数传过去；

父组件 el-dropdown 用 @command="handleCommand" 监听了这个自定义事件，所以接收到子组件的派发后，就会执行我们写的 handleCommand 方法，并接收参数。

5 NavMenu 导航菜单

image

Image 图片