跟随Element学习Vue小技巧(49)——Collapse

358 阅读3分钟

这世界笑了

于是你合群的一起笑了

前言

两只兔子被抓进监狱,有一天,它们终于逃出了监狱的大门,还要翻100道墙。

翻到第55道墙时,公兔子问母兔子:“亲爱的,你累不累?”
母兔子答道:“我们继续翻吧,我不累。”
于是它们继续翻墙。

翻到第99道墙时,公兔子又问:“你累不累?”
母兔子答道:“我累了,我们回去吧”
于是它们又翻回去了 翻过去,又翻回来,真是有够折腾的
你别说,年纪轻轻的不折腾,难道等老了再折腾吗?

所以,来折腾折腾手风琴,展开,收缩,展开,收缩...

1 Collapse

will-change

代码片段

.el-collapse-item__wrap {
    will-change: height;
    background-color#fff;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom1px 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)
  };
},



因为你 我爱上了雨季

参考链接

往期回顾