❝孤独之前是迷茫
孤独之后是成长
❞
前言
生活无非是，吃饭，睡觉，打豆豆
程序无非是，Hello，world！
组件的世界呢？
Button是当之无愧的奠基人
按 ->
转 ->
拉 ->
开 ->
吃饱了，还不赶紧去洗碗！！
哐当！没时间，我还得去学习呢，哈哈哈
1 Button
动态类名
站在那里别动，好，摆好姿势
您看，我还有机会吗？
不动，我信你个鬼！
你个糟老头子坏得很！！
代码片段
<button
...
class="el-button"
:class="[ type ? 'el-button--' + type : '', buttonSize ? 'el-button--' + buttonSize : '', { 'is-disabled': buttonDisabled, 'is-loading': loading, 'is-plain': plain, 'is-round': round, 'is-circle': circle } ]"
>
...
</button>
技巧解析
❝静态class，常规写法
❞
动态class，加了：
什么，你不知道:class
走，吃烧烤去
oo,原来如此，哈哈
addClass-> is-disabled:true
removeClass-> is-disabled:false
toggleClass->
type ? 'el-button--' + type : ''
class小技巧，你学会了吗？
学会了，还不赶紧跑路
短路运算
你确定不是脑子进水了吗？
代码片段
buttonSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
技巧解析
❝a || b, a脑子进水了，就走b，哈哈
❞
类型判断常规写法
(a instanceof Object) ? a.size : undefined
短路写法，(a || {}).size
所以呀，做人不能太精明，难得糊涂！
组件事件
小哥，帮我个忙呗，帮我把花送过去
美女，送你小花花
哇，小哥哥，好帅，好帅！
不是，我，..., 我
没有什么不好意思的啦
这个，这个，...
我答应你啦
小样，看你还敢不敢忘记老娘的生日，哼！
代码片段
methods: {
handleClick(evt) {
this.$emit('click', evt);
}
}
技巧解析
❝喂，
❞$emit,帮我把evt传过去
亲爱的，我收到了，谢谢
看吧，没有$摆平不了得事
还记得吗，组件4要素
属性+事件+方法+插槽
2 ButtonGroup
CSS伪类
每个成功男人的背后，都有一个女人
每个有钱男人的背后，都有一群女人
你是成功人士，还有土豪呢？
我回头一看，好家伙，一群男人！！！
代码片段
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
{
.el-button-group>.el-button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.el-button-group>.el-button:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.el-button-group .el-button:not(:first-child):not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
技巧解析
❝:first-child，第一个
❞
:last-child，最后一个
:not(:first-child):not(:last-child) 不是第一个，也不是后一个
到底有多少个？？？你猜
所以，选中中间个，你学会了吗？
「愿你走出半生」
「归来仍少年！」
❝我是一只七秒记忆的鱼
带你来一场奇妙的旅行
❞
