ElementUI组件系列解读之<Switch>

251 阅读1分钟

EL-switch

图片88.png

作用:这个组件的使用场景主要是针对那种只需要判断true或false的

源码部分:

图片89.png

图片90.png  

主要属性 checked

图片91.png

同时监听了它

图片92.png

看看改变它的函数

图片93.png

总结下它的逻辑部分:

首先通过父组件的v-model= 将value传进来 并通过它计算出属性状态checked

同时监听该状态进行样式(边框和背景颜色)及input的checked赋值

当我们点击时 将当前的this.checked取反或者是三元来获取activeValue及inactiveValue,并调用$emit的input和change通知父组件 而父组件因为value改变 又会进行上面的步骤,从而完成

样式部分:

图片94.png