
ElementPlus源码阅读
文章平均质量分 86
karshey
平平无奇打工人。
展开
-
【ElementPlus源码】Switch开关
分别表示开关文案、控制文本是否显示在点内。源码中是驼峰式的,主要通过条件渲染实现。开关icon。条件渲染实现。原创 2024-10-15 15:36:49 · 1158 阅读 · 0 评论 -
【ElementPlus源码】Scrollbar 滚动条
Scrollbar 滚动条组件从里到外分为三个组件:thumb(滚动条的可拖动部分)、bar(thumb的相关信息)和Scrollbar(滚动条组件)。此方法做的事情是:将滚动条thumb移动到点击位置,并相应地调整滚动区域的滚动位置。,可以在elementPlus滚动条的文档中试验一下,拖动滚动条结束后,滚动条的显示会消失。鼠标移动时,函数会根据鼠标位置更新滚动条thumb的位置,并调整滚动区域的滚动位置。通俗的语言就是:点击滚动条然后拖动,滚动条和滚动区域都会更新位置,就做了这样的事情。原创 2024-07-01 16:42:06 · 1302 阅读 · 0 评论 -
【ElementPlus源码】Layout 布局
col中注入一个rowContextKey,如果没有就默认为ref(0),解构出gutter。row和col感觉都挺简单的,样式文件的话,是以import形式写的。rowContextKey在row中provide。gutter是一个row的属性,表示栅格间隔。左右margin是gutter间隔/2。看源码时候做的笔记。col有属性如下:(与文档一致)原创 2024-06-28 15:40:54 · 477 阅读 · 0 评论 -
【ElementPlus源码】Container 布局容器
返回了一个对象ElContainer ,有一个install方法,若调用install方法,则将Container、Aside、Footer、Header、Main五个组件注册到app上,并可以通过ElContainer.Container的方法访问Container。在许多编程语言和环境中,它通常被用作一个占位符函数,当你需要一个函数但又不希望它做任何事情时,可以使用NOOP。若没有props.direction,判断插槽中是否有header和footer,有则返回true,代表垂直。原创 2024-06-28 14:22:47 · 1260 阅读 · 0 评论 -
【ElementPlus源码】Button 按钮
vm.proxy 是当前 Vue 实例的代理对象,$props 是代理对象的属性集合,[name] 是指定的属性。获取当前Vue实例,返回一个计算属性,其值是:实例的某个属性。调用useButton创建button实例,解构出一堆属性。,即是字符串类型的,values值是枚举值,非必填的属性。如:在button中,当传入的type为text时,定义了button有哪些属性,和属性的类型。作用:传入一个name,返回实例的name属性。是一个构建属性的方法,没看懂。看源码时候做的笔记。其他props的属性。原创 2024-06-28 09:48:39 · 1081 阅读 · 0 评论