❝

笔直前进

说到做到

❞

前言

一步一个台阶，成功其实很简单嘛 ^_^
Take it eazy，step by step

1 Steps

盒子尺寸 flex-basis

A B C D E ？

代码片段

技巧解析

❝

弹性盒子，顾名思义具有弹性
怎么才能让盒子固定呢？
width，height，你会发现没有作用
除非，除非，flex：none
除此之外呢？
还有flex-basis属性

flex-basis 传送门

❞

2 Step

父链子链

儿子可以找父亲要零花钱
父亲当然可以找儿子要赡养费

beforeCreate() {
  this.$parent.steps.push(this);
},

beforeDestroy() {
  const steps = this.$parent.steps;
  const index = steps.indexOf(this);
  if (index >= 0) {
    steps.splice(index, 1);
  }
},

updateStatus(val) {
  const prevChild = this.$parent.$children[this.index - 1];

  if (val > this.index) {
    this.internalStatus = this.$parent.finishStatus;
  } else if (val === this.index && this.prevStatus !== 'error') {
    this.internalStatus = this.$parent.processStatus;
  } else {
    this.internalStatus = 'wait';
  }

  if (prevChild) prevChild.calcProgress(this.internalStatus);
},

技巧解析

❝

作为父亲，this.$children找儿子
作为儿子，this.$parent找父亲
兄弟咋整？ 找父亲的儿子咯
this.$parent.$children

❞

动态watch

好看不？
要不，今天换个望远镜看看

mounted() {
  const unwatch = this.$watch('index', val => {
    this.$watch('$parent.active', this.updateStatus, { immediate: true });
    this.$watch('$parent.processStatus', () => {
      const activeIndex = this.$parent.active;
      this.updateStatus(activeIndex);
    }, { immediate: true });
    unwatch();
  });
}

技巧解析

❝

动态添加watch，this.$watch
三个参数: data + handler + option
怎么移除呢？ unwatch，不观察就好

Vue中watch使用 传送门

❞

「我动身踏上旅程」 「是为了与你道别」

参考链接

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