element-UI源码
文章平均质量分 50
少油少盐不要辣
趁着年轻,去折腾,去改变吧
展开
-
自定义条件筛选组件
自定义筛选组件原创 2022-06-13 20:50:37 · 578 阅读 · 0 评论 -
阅读element-ui之el-image懒加载如何判断子元素出现在父元素内
1.核心代码isInContainer 函数// 判断子元素是否出现在父元素内export const isInContainer = (el, container) => { if (isServer || !el || !container) return false; const elRect = el.getBoundingClientRect(); let containerRect; // 排除掉不支持getBoundingClientRect的元素 if (原创 2021-10-23 10:36:07 · 1057 阅读 · 0 评论 -
阅读element-ui源码之select选择器下拉菜单如何关闭
1.前言element-ui框架的select组件,点击后,会出现下拉菜单。当我们点击页面上除选择框和下拉菜单的区域时,下拉菜单会关闭,那么,element是如何实现的呢?2.逻辑解读翻开源码目录后,找到了clickoutside.js。该文件就是处理鼠标是否点击相应元素外面的。之所以这么说,是因为这是个公共处理方法,除了select选择器,还有其他组件也用到的。对于判断鼠标点击元素之外,element使用了vue自定义指令来实现。好处就是有相应的钩子函数,从元素绑定,元素更新,元素销毁,都能够原创 2021-03-13 22:14:12 · 8030 阅读 · 1 评论 -
阅读element-ui源码之ResizeObserver使用
1.题外话如何学习一个东西呢?- 是什么- 怎么用(应用场景)- 优点?缺点?如何看框架源码?- 反推法。大概了解 一个功能后,从其中的一个点切入,一步步去阅读。直至读完相关代码。比如,element-ui的tabs标签页功能,标签下面的滑动条是如何滑动的呢?首先,找到DOM,然后,从DOM上的点击回调开始看起。一步一步的去查找。- 按需阅读法。阅读源码要始终秉持想搞明白一个功能点的理念去阅读部分源码。不能像无头苍蝇一样,乱找,那样效率极低。- 先大概了解待读功能代码整体构建,然后,深入原创 2021-01-26 21:56:47 · 2166 阅读 · 0 评论 -
element-ui框架源码阅读之tabs标签页
最近闲来无事,对平常用的饿了么UI框架感兴趣了,很好奇element-ui对tabs标签页下面的滑动条滑动是如何实现的。说实话,我就喜欢研究与浏览器交互的东西,哈哈哈。1.tabs标签页通过阅读源码,知道标签页下方的滑动条是单独写的一个组件叫做tab-bar组件。这个组件只接受tabs属性。当这个tabs属性值变化的时候,又通过计算属性barStyle来计算出滑动条需要滑行(translate)的距离和其本身的宽度。核心源码见下方。2.代码computed: { barStyle: { g原创 2021-01-22 16:36:53 · 2029 阅读 · 0 评论