Element分析（组件篇）——Switch

switch组件是用来表示对立关系的切换的。

生命周期

mounted

mounted() {
  if (this.width === 0) {  // 如果没有传 width
    this.coreWidth = this.hasText ? 58 : 46;  // 有文字的时候是 58px， 没有文字则是 46px
  }

  this.handleButtonTransform();  // 移动按钮
  if (this.onColor || this.offColor) {  // 如果设置了颜色
    this.setBackgroundColor();
  }
}

handleButtonTransform

这是用来处理按钮的位移的方法。

methods: {
  handleButtonTransform() {
    // 根据开关移动圆点
    this.buttonStyle.transform = this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
  },
}

setBackgroundColor

这是用来改变开关颜色的。

methods: {
  setBackgroundColor() {
    // 根据开关设置颜色
    let newColor = this.value ? this.onColor : this.offColor;

    // 改变边框和背景色
    this.$refs.core.style.borderColor = newColor;
    this.$refs.core.style.backgroundColor = newColor;
  }
}

label

最外面是label，上面会根据是否禁用以及是否有文字来设置不同的类名。

<label
  class="el-switch"
  :class="{
    'is-disabled': disabled,
    'el-switch--wide': hasText
  }">
</label>

hasText

只要传入了on-text或者off-text就表明有文字。

computed: {
  hasText() {
    return this.onText || this.offText;
  },
}

mask

暂时没发现遮罩的作用。

<div class="el-switch__mask" v-show="disabled"></div>

模拟原生input

<input
  class="el-switch__input"
  type="checkbox"
  @change="handleChange"
  v-model="_value"
  :name="name"
  :disabled="disabled">

handleChange

处理change事件。

methods: {
  handleChange(event) {
    this.$emit('change', event.currentTarget.checked);  // 派发 change 事件
  },
}

_value

用来保存开关的情况，通过input事件来使用让父级改变value，从而进而改变get获得的值。

computed: {
  _value: {
    get() {
      return this.value;
    },
    set(val) {
      this.$emit('input', val);
    }
  }
}

核心部分

这一部分是用户真正接触的开关部分。

<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
  <span class="el-switch__button" :style="buttonStyle"></span>
</span>

其中宽度用了coreWidth，而buttonStyle中目前只设置了transform。

ON 标签

这一部分是用来实现ON标签的。

<transition name="label-fade">
  <div
    class="el-switch__label el-switch__label--left"
    v-show="value"
    :style="{ 'width': coreWidth + 'px' }">
    <i :class="[onIconClass]" v-if="onIconClass"></i>
    <span v-if="!onIconClass && onText">{{ onText }}</span>
  </div>
</transition>

label-fade

只是简单的改变了透明度。

& .label-fade-enter,
& .label-fade-leave-active {
  opacity: 0;
}

onIconClass

这是用来设置on的时候显示的图标的，如果设置了这个就不会再显示文字。

props: {
  onIconClass: {
    type: String,
    default: ''
  },
}

OFF 标签

这与ON类似，不再进行细致分析。

<transition name="label-fade">
  <div
    class="el-switch__label el-switch__label--right"
    v-show="!value"
    :style="{ 'width': coreWidth + 'px' }">
    <i :class="[offIconClass]" v-if="offIconClass"></i>
    <span v-if="!offIconClass && offText">{{ offText }}</span>
  </div>
</transition>