Elment UI 布局组件

1 Element UI 布局组件

javascript 复制代码
<!-- 外层容器:管「上下」结构 -->
<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.1el-dropdown Events 的command

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

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





image

Image 图片


相关推荐
海兰6 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(三)
javascript·python·金融
小磊哥er7 小时前
深入解构Claude Code - 第 7 篇 · 连接外面的世界
javascript·ai编程
小磊哥er8 小时前
深入解构Claude Code - 第 6 篇 · 终端里的图形界面
javascript·ai编程
海兰8 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(一)
javascript·python·金融
可乐鸡翅yeah_9 小时前
hls.js 内存泄漏实战排查,直播 M3U8 长时间播放异常定位方案
开发语言·javascript·python·django·ecmascript·m3u8·m3u8在线
可乐鸡翅yeah_9 小时前
第三方接口对接 M3U8 流媒体排坑实战,解决外部服务商流兼容难题
前端·javascript·python·django·html·m3u8·m3u8在线
默_笙10 小时前
🏠 「LLM Notes」:我用 Next.js + Redis 给自己造了个笔记博客
前端·javascript
ruanCat11 小时前
Prettier 明明执行成功,Markdown 为什么还是没变?一次插件误诊复盘
前端·javascript·node.js
软件开发技术深度爱好者11 小时前
在线学习实践 TypeScript 的官方Playground(演练场)使用介绍
javascript·学习·typescript
小磊哥er13 小时前
深入解构Claude Code - 第 5 篇 · 每次提问都给 AI 塞了什么资料
javascript·ai编程