❝

我，

不能再次同样的失败了

❞

前言

你，去过最远的地方是哪里呢？

• 埃及
• 梵蒂冈
• 马尔代夫
• 好望角
• 泰姬陵
• 巴拿马
• 北京
• 香港
• 深圳
• 成都
• 杭州
• 武汉
• 云南
• ...

还是仅仅在小县城了待过
不管怎么，路都是自己选的
这个世界并不缺少美，
只是缺少发现美的眼睛
所以，让我们停下脚步，一起去慢慢欣赏
扫码了吗？出发！

1 Slider

computed

「本次消费100元」
你打算怎么付款？
如果你手上刚好有一张一百的，给一张就好
有两张伍十的呢？给两张咯
只有一张伍十，那还得凑二十的和十块的
老板，我能不能给硬币 @_@

代码片段

<div
  class="el-slider__stop"
  v-for="(item, key) in stops"
  :key="key"
  :style="getStopStyle(item)"
  v-if="showStops">
</div>

技巧解析

❝

还记得组件要素吗?
属性+方法+事件+插槽
静态属性，一张1百的，class="el-slider__stop"
动态属性，合成100的，:key="key"
需要找零怎么办？
只能用方法咯
:style="getStopStyle(item)
你可千万别傻傻的给人家整99枚硬币

❞

apply

最近听说，63岁精神小伙，去敬老院看望61岁老人
他究竟是怎样做到的呢？
怎么把一个人变年轻我不知道
但是怎么把参数变年轻，我倒是知道

代码片段

mounted() {
  let valuetext;
  if (this.range) {
    if (Array.isArray(this.value)) {
      this.firstValue = Math.max(this.min, this.value[0]);
      this.secondValue = Math.min(this.max, this.value[1]);
    }
    ...
  }
},

let precisions = [this.min, this.max, this.step].map(
  item => {
    let decimal = ('' + item).split('.')[1];
    return decimal ? decimal.length : 0;
  });
  return Math.max.apply(null, precisions);
},

技巧解析

❝

常规方法：Math.max(a,b,c,...，z)
年轻方法：Math.max.apply(null [a,b,c,...，z])
还记得this吗？
apply不仅可以改变this指向，还可以改变参数哦
愿你归来之后，仍是少年

❞

2 SliderButton

$parent

有个有钱的爸爸是什么感觉？
定个小目标，先挣它一个亿
还是...
在一个月内，花光一个亿

代码片段

watch: {
  dragging(val) {
    this.$parent.dragging = val;
  }
}

技巧解析

❝

组件通信还记得吧^^
父子组件，$parent-$children
子组件里，改变父组件，$parent
父组件里，改变子组件，$children
要是十兄弟呢，命个名，$refs.Tom

❞

drag

带给使用者全新的操作体验，拖拽，纵享丝滑！

代码片段

onDragStart(event) {
  this.dragging = true;
  this.isClick = true;
  if (event.type === 'touchstart') {
    event.clientY = event.touches[0].clientY;
    event.clientX = event.touches[0].clientX;
  }
  if (this.vertical) {
    this.startY = event.clientY;
  } else {
    this.startX = event.clientX;
  }
  this.startPosition = parseFloat(this.currentPosition);
  this.newPosition = this.startPosition;
},

 onDragging(event) {
  if (this.dragging) {
    this.isClick = false;
    this.displayTooltip();
    this.$parent.resetSize();
    let diff = 0;
    if (event.type === 'touchmove') {
      event.clientY = event.touches[0].clientY;
      event.clientX = event.touches[0].clientX;
    }
    if (this.vertical) {
      this.currentY = event.clientY;
      diff = (this.startY - this.currentY) / this.$parent.sliderSize * 100;
    } else {
      this.currentX = event.clientX;
      diff = (this.currentX - this.startX) / this.$parent.sliderSize * 100;
    }
    this.newPosition = this.startPosition + diff;
    this.setPosition(this.newPosition);
  }
},

onDragEnd() {
  if (this.dragging) {
    /*
     * 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移
     * 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
     */
    setTimeout(() => {
      this.dragging = false;
      this.hideTooltip();
      if (!this.isClick) {
        this.setPosition(this.newPosition);
        this.$parent.emitChange();
      }
    }, 0);
    window.removeEventListener('mousemove', this.onDragging);
    window.removeEventListener('touchmove', this.onDragging);
    window.removeEventListener('mouseup', this.onDragEnd);
    window.removeEventListener('touchend', this.onDragEnd);
    window.removeEventListener('contextmenu', this.onDragEnd);
  }
},

技巧解析

❝

巧克力已为你打包好了
你的女神约好了吗?

❞

3 SliderMarker

$createElement

女娲照着自己的样子，顺手从池边掘起一团黄泥，掺和了水，在手里揉团着，揉团着，揉团成了第一个娃娃模样的小东西

耶和华上帝按照自己的形象，用地上的尘土造出了一个人，往他的鼻孔里吹了一口气，有了灵，人就活了，能说话，能行走。上帝给他起了一个名字，叫亚当

你看，我们都是用尘土捏造出来的，只不过男人是用泥做的，女人是用水做的，所以男人得在田里干活，才会越晒越结实
再不济，大不了做回那摊烂泥，纵然扶不上墙，铺铺路也是好的 ^^

代码片段

render() {
  let label = typeof this.mark === 'string' ? this.mark : this.mark.label;

  return (
    <div class="el-slider__marks-text" style={ this.mark.style || {} }>
      { label }
    </div>
  );
}

<template>
<div class="block">
  <el-slider
    v-model="value"
    range
    :marks="marks">
  </el-slider>
</div>
</template>

<script>
export default {
  data() {
    return {
      value: [30, 60],
      marks: {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA'
          },
          label: this.$createElement('strong', '50%')
        }
      }
    }
  }
}
</script>

技巧解析

❝

你以为label只能传字符串吗？
我真的是这么以为的--
原来创建一个DOM也是可以的
this.$createElement('strong', '50%')
DOM可以乱造，人可不能随便

❞

「想和你重新认识一次」 「从你叫什么名字说起」

参考链接

• 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