❝这世界笑了
于是你合群的一起笑了
❞
前言
两只兔子被抓进监狱,有一天,它们终于逃出了监狱的大门,还要翻100道墙。
翻到第55道墙时,公兔子问母兔子:“亲爱的,你累不累?”
母兔子答道:“我们继续翻吧,我不累。”
于是它们继续翻墙。
翻到第99道墙时,公兔子又问:“你累不累?”
母兔子答道:“我累了,我们回去吧”
于是它们又翻回去了
翻过去,又翻回来,真是有够折腾的
你别说,年纪轻轻的不折腾,难道等老了再折腾吗?
所以,来折腾折腾手风琴,展开,收缩,展开,收缩...
1 Collapse
will-change
代码片段
.el-collapse-item__wrap {
will-change: height;
background-color: #fff;
overflow: hidden;
box-sizing: border-box;
border-bottom: 1px solid #ebeef5;
}
技巧解析
❝will-change,什么鬼?没见过呀
❞
en,看名字是将要变化,什么意思呢?
就像你约女神出去吃饭,一个电话打过去,你至少得等上2小时吧,o(╯□╰)o
如果前一天就约好了,你的女神就有了准备,然后就可以高高兴兴的约会咯(〃'▽'〃)
浏览器渲染也是类似的,告诉它哪些属性将要变化,它好提前准备,这样就不会卡顿啦,O(∩_∩)O哈哈~
CSS页面渲染优化 传送门
浏览器渲染流程 传送门
小技巧
contact
代码片段
/*
* [].concat(1) =>[1]
* [].concat([1]) =>[1]
*
* Array.isArray(value) ? value : [value]
* =>[].concat(value)
*/
props: {
value: {
type: [Array, String, Number],
default() {
return [];
}
}
},
data() {
return {
activeNames: [].concat(this.value)
};
},
「因为你」
「我爱上了雨季」
参考链接
往期回顾
- 跟随Element学习Vue小技巧(1)——Layout
- 跟随Element学习Vue小技巧(2)——Container
- 跟随Element学习Vue小技巧(7)——Button
- 跟随Element学习Vue小技巧(8)——Link
- 跟随Element学习Vue小技巧(9)——Radio
- 跟随Element学习Vue小技巧(10)——Checkbox
- 跟随Element学习Vue小技巧(11)——Input
- 跟随Element学习Vue小技巧(12)——InputNumber
- 跟随Element学习Vue小技巧(13)——Select
- 跟随Element学习Vue小技巧(14)——Cascader
- 跟随Element学习Vue小技巧(15)——Switch
- 跟随Element学习Vue小技巧(16)——Slider
- 跟随Element学习Vue小技巧(17)——TimePicker
- 跟随Element学习Vue小技巧(18)——DatePicker
- 跟随Element学习Vue小技巧(20)——Upload
- 跟随Element学习Vue小技巧(21)——Rate
- 跟随Element学习Vue小技巧(23)——Transfer
- 跟随Element学习Vue小技巧(24)——Form
- 跟随Element学习Vue小技巧(25)——Table
- 跟随Element学习Vue小技巧(26)——Tag
- 跟随Element学习Vue小技巧(27)——Progress
- 跟随Element学习Vue小技巧(28)——Tree
- 跟随Element学习Vue小技巧(29)——Pagination
- 跟随Element学习Vue小技巧(31)——Avatar
- 跟随Element学习Vue小技巧(33)——Loading
- 跟随Element学习Vue小技巧(34)——Message
- 跟随Element学习Vue小技巧(36)——Notification
- 跟随Element学习Vue小技巧(37)——Menu
- 跟随Element学习Vue小技巧(38)——Tabs
- 跟随Element学习Vue小技巧(39)——Breadcrumb
- 跟随Element学习Vue小技巧(41)——Dropdown
- 跟随Element学习Vue小技巧(42)——Steps
- 跟随Element学习Vue小技巧(43)——Dialog
- 跟随Element学习Vue小技巧(44)——Tooltip
- 跟随Element学习Vue小技巧(45)——Popover
- 跟随Element学习Vue小技巧(48)——Carousel