❝Stay Hungry · Stay Foolish
❞
前言
Layout布局，朋友，你认真的吗？这么简单的组件还要你来教我？？？
是的，我灰常认真，来，给你看一张我认真的亚子，嘻嘻嘻
生活无非是一日三餐，搞定三餐，剩下的还会遥远吗，嘿嘿嘿
你准备好了吗？我将带你踏上第一趟旅行！
坐稳，扶好，起飞咯！
1 Row
组件接口
什么？你没听过组件接口！
该说你什么好呢？
其实吧，我也没听过，现在总该听过了吧！
API接口知道吧，入参知道吧，出参知道吧
那么，重点来了，喀喀喀
说你呢，还不赶紧做笔记
「组件接口」
属性 方法 事件
代码片段
props: {
tag: {
type: String,
default: 'div'
},
gutter: Number,
type: String,
justify: {
type: String,
default: 'start'
},
align: {
type: String,
default: 'top'
}
}
技巧解析
❝你看出什么来了吗？
❞
我是一个组件，我可以接受如下参数
tag我默认是div，保持沉默就好，小心枪打出头鸟哟
gutter我只接收数字类型，小样，字符串还行蒙混过关
type我只接收字符串类型，注意刷卡哟
justify我默认是start，万事开头难，当缩头乌龟也可以
align我默认是top，我的寂寞有谁懂
自定义属性
什么，你从来没有用过？
偷偷告诉你，我也没用过
收下这波骚操作，在妹纸面前好好秀一秀
多瑞米发索拉喜多, 动起来...
代码片段
componentName: 'ElRow',
gutter() {
...
while (parent && parent.$options.componentName !== 'ElRow')
...
}
技巧解析
❝componentName: 我适应不了这个世界，于是我创造了属于自己的世界
❞
gutter: 小鬼，站起来，说的就是你，我忍你很久了
「想要被发现了，就得跟别人不一样！！」
margin负值
啥？margin还可以是负值
那么，长胖了也能瘦回去咯
代码片段
style() {
const ret = {};
if (this.gutter) {
ret.marginLeft = `-${this.gutter / 2}px`;
ret.marginRight = ret.marginLeft;
}
return ret;
}
技巧解析
❝
姓名 年龄 工作 小可爱 18 吃可爱多 200 200 200 什么，一下子吃到了200斤，哈哈哈
❞
200只是盒子宽度而已,总宽度不就是 200 * 3 = 600
间隔20呢，不是得 200 * 3 + 20 * 2 = 640
可是盒子box左右margin各为10，算下来（200 + 20）* 3 = 660
平白无故多出了20斤赘肉，好可怕！！！
不怕不怕，给外层wrap左右margin设为-10，吸口气，往里缩20斤
所以 （200 + 20）* 3 - 10 * 2 = 640
简直是完美
render函数
这个，感觉挺高深的，一脸懵逼的样子？？？
大佬别急，且听小白我慢慢道来
代码片段
render(h) {
return h(this.tag, {
class: [
'el-row',
this.justify !== 'start' ? `is-justify-${this.justify}` : '',
this.align !== 'top' ? `is-align-${this.align}` : '',
{ 'el-row--flex': this.type === 'flex' }
],
style: this.style
}, this.$slots.default);
}
技巧解析
❝拿起手术刀，开始动手术咯
我一刀下去，h(tag, {}, text)
是不是瞬间不那么高大上了
大佬请看，<div class="el-row">我是默认内容<div>
找到感觉没？ 哦，原来是html拆解啊❞
- tag: div
- {class: 'el-row'}
- 我是默认内容
那么，this.$slots.default是个啥东东咧？
不急，不急，咱们的旅行长着呢
「好累！好累！我先休息一会儿」
「好累！好累！让我在偷个懒嘛」
2 Col
组件通信
喂？你在吗？
在的
喂？你还在吗？
在的
喂？你在吗？
在的
喂？你会一直在吗？
我会一直在的
这波狗粮，还够吃吗？
你回来，看我不告诉你爸，打死你！！！
代码片段
gutter() {
let parent = this.$parent;
}
技巧解析
❝
this: 这是我，是我
this: 下面请我老爸闪亮登场this.$children
this: 走开，儿子被闹
this.$children：爷爷，爸爸他偏心
this.$parent：孩子他爸，让咱孙子亲自尝试一回 所以呀，不要只想着从父亲那么索取，而一味溺爱孩子 也该让孩子做点贡献，自己尽心赡养父母父链子链, 你学会了吗？
❞
class遍历
来，把这个搬过来
嗯，把这个也搬过来
嗯...,还有这个
嗯...,这个，统统搬过来
你妹的，就不能一次说完吗，我直接遍历一波带走
代码片段
['span', 'offset', 'pull', 'push'].forEach(prop => {
if (this[prop] || this[prop] === 0) {
classList.push(
prop !== 'span'
? `el-col-${prop}-${this[prop]}`
: `el-col-${this[prop]}`
);
}
});
技巧解析
❝很简单，有木有
❞
我怕多说一句是对你们的侮辱！
对象遍历
你对象还好吗？
我对象很好啊，我对。。牛也很好，对猫也很好，对狗也很好，对谁都挺好的
代码片段
Object.keys(props).forEach(prop => {
classList.push(
prop !== 'span'
? `el-col-${size}-${prop}-${props[prop]}`
: `el-col-${size}-${props[prop]}`
);
})
技巧解析
❝对象，还遍历，渣男！
❞
传统遍历for(let key in props)
花式遍历Object.keys(props).forEach()
送你小花花
「还在装逼，不累吗？」
「不装了，我睡觉了」
❝我是一只只有七秒记忆的鱼
却妄想带你踏上一场奇妙的旅行
❞
