❝

有的鱼是永远都关不住的

因为他们属于天空

❞

前言

明天是哪一天？
周末是哪个周末？
下次，又是哪一次？
永远，到底有多远？
那个曾经无论多少次摔倒都会重新爬起来的小男孩去哪儿了？
你还在期待吗？
不管怎么么样，希望都是个好东西，也许是世界上最好的东西
带着心里的那束光，一起出发 ^_^ 你怎么又躺下了呀 *……*

1 Date

花式短路

如果，明天不会下雨
如果，明天不用加班
如果，明天买一束花
如果，明天去看江滩
如果，明天你在那里
如果，...
天气通提醒您，明天有大到暴雨

代码片段

isValidValue(value) {
  return value && !isNaN(value) && (
    typeof this.disabledDate === 'function'
      ? !this.disabledDate(value)
      : true
  ) && this.checkDateWithinRange(value);
}

技巧解析

❝

你看哪有那么多如果！！
&& && && &&，不是更快
发现没？竟让藏着一个三目运算
所以，下次不要有那么多的如果
喝点小酒，让脑子短路一下
也许，事情就成了 ^^

❞

2 DataRange

事件传参

• 在？
• 沉默
• 在吗？
• 沉默
• 在干嘛？
• 还是沉默
• 不说话就是默认咯，嘻嘻
• 啥，你才默认呢
• 我那时名认好不好，哈哈哈

代码片段

<span class="el-date-range-picker__time-picker-wrap">
  <el-input
    ...
    @input="val => handleDateInput(val, 'max')"
    @change="val => handleDateChange(val, 'max')" />
</span>

技巧解析

❝

你看，要撬动别人的嘴巴，学点小技巧就好
沉默就是默默看着，不做声
@input="handleDateInput"
互动就是看着你，还能回应你
@input="val => handleDateInput(val, 'max')"
大吗？仔细看，挺大的，max还不够大

❞

3 picker

默认赋值

• 到底去不去嘛
• 沉默
• 说话呀
• 沉默
• 不说话就当你默认了呀
• 还是沉默
• 到底去不去啊
• 我都沉默这么久了，你还问

代码片段

function createDocumentHandler(el, binding, vnode) {
  return function(mouseup = {}, mousedown = {}) {
   ...
  }
}

技巧解析

❝

都说沉默是金，你还不赶紧加仓 $_$
搞事情: mouseup = mouseup||{}
沉默：(mouseup = {})
嘘！小点声，别吵着街坊邻居了

❞

「我们在时间里捉迷藏」 「但我再也不想跟你走散」

参考链接

• element官网
• element代码仓库
• vue官网
• ES6入门教程

往期回顾

• 跟随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