value1是data中的值，当滑动滑块时这个值也会改变。我们先从slider-button这个按钮组件进行分析，因为它才是核心，该组件的代码200多行，可见不简单啊，仅仅一个子组件就那么多,html结构如下 这是一个wrapper里面嵌套了一个div作为button的主体,最…

关于开关组件，之前自己写了一个，其实这个组件是不需要绑定任何click事件的，也就是说js部分几乎可以不写，核心思想就是利用<input type=checkbox>的checked属性，当鼠标点击input时，会切换其checked属性，这是原生checkbox的特性。下面是…

Element中和该组件相关的文件有main.vue和menu.vue2个文件，前者代表输入框部分，后者代表下方的级联选择部分，以及附加的js文件popper.js以及vue.popper.js，用来处理弹出框逻辑，前面文章介绍过，这4个文件总代码量2000行左右，首先要明确，…

可见最外层的<el-select>有一个v-model，这个是组件的v-model用法，具体参考官网，value初始为空，当选择了下拉菜单的某一项后，value变成那一项的值。<el-select>标签内是用v-for循环出所有的options,<el-option>也是Ele…

这里的意思是当controls-right类被加上后,decrease这个类的css变化为上面的内容，也就是将减按钮从原本的左侧放置到右下角，我开始不明白这里的top:auto,left:auto是干嘛的，后来控制台调试得知，因为decrease类原本的top是1px，left…

简介复选框的逻辑比单选框更为复杂，代码量也更多，这里只介绍其与单选框不同的逻辑，其余的分析参考单选框先上代码,官网代码点此是不是看的一脸懵逼，最好是打开官网，对照checkbox用法一项项来分析其原理

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

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

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