这是 Element-UI 的 Transfer 组件，下面就配合源码看下具体实现。 整体上，可以划分为左中右三块，左右两个 TransferPanel 组件承载数据展示。中间两个 ElButton 是左右移动的操作按钮。结构清晰。 mixins 部分混入了三个对象。Local…

可以看出-webkit-appearance:none,outline:none这些用法在和各个组件内都很普遍，目的就是去掉浏览器自己渲染出的样式，统一规定样式。这里的transition居然使用了贝塞尔曲线进行过渡，话说过渡时间才0.2秒，使用贝塞尔曲线能看出来么？直接eas…

我们一步步分析，首先很明确，<el-button>就是封装了原生的button而已，原生button有个地方需要注意，请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值,值有3种,button,subm…

form: 统一管理form-item。 form-item：负责完成验证等。 初始化，需要验证的让form组件收集起来，有验证规则的el.form.blur ，el.form.change 事件监听起来，等待触发验证。 这里用到的dispatch方法从mixins中引入：找到…

本文从select组件的代码结构入手，了解select组件如何组织父子组件通信，并重点分析了ElSelect组件 和 ElOption组件实现的巧妙之处。并介绍select组件的四个功能是如何实现的。 上一节分析代码结构时候，读者可能就觉得 select 组件很复杂了，其是如何…

前言建议先看上篇文章以了解Popper的用途：[element-ui源码]element-ui中的神器Popper（使用方法）1.关于popperjsPopper.js是网上一个开源项目(并非属于el

笔者现在是一个大三快要实习的学生，最近在学习 Vue 的时候感觉自己学了很多的东西但是没有什么实质性的进步，感觉达到了一个瓶颈，但自认为还没有达到可以深挖 Vue 源码的功力，所以打算开始剖析 Element-ui 的源码，希望可以借此深入 Vue，后面我也会开始 Vue 的源…

element-ui 源码解析，你知道 v-loading 是如何实现的吗？我们该如何最快速的实现一个 v-loading 功能？

官网说的很清楚，这就相当于进行了一个双向绑定，对input输入框的input事件进行监听，当键盘敲下时就实时改变searchText的值，同时修改searchText的值，输入框的value也跟着变化。那么底层是怎么处理互斥的呢？通过查看v-model相关源码 然后第二句:cl…

看来很多网友对element-ui的校验（或者说是async-validator）使用不太熟悉，想了想还是有必要分享下element-ui的表单校验机制的。 首先表单校验分el-form, el-form-item以及里面的el-input, el-select等。 这里就以e…