关于 Switch 组件开发相关

[pengyinghao]

基础配置项

value / v-model 绑定值
disabled 是否禁用
active-value 打开时的值
inactive-value 关闭时的值
active-color 打开时的颜色
inactive-color 关闭时的颜色
active-text 打开时的文本
inacitve-text 关闭时的文本

事件

change 值改变事件

[Tyh2001]

关于 switch 的大小，可以参考下面伪代码：

<template>
  <div class="switch-large">
    <span></span>
  </div>
  <div class="switch-middle">
    <span></span>
  </div>
  <div class="switch-small">
    <span></span>
  </div>
</template>

<style lang="scss" scoped>
  $primary: #2d5af1;

  $SwitchSize: (
    'large': 24px,
    'middle': 20px,
    'small': 16px
  );

  @each $key, $value in $SwitchSize {
    .switch-#{$key} {
      height: $value;
      width: $value * 2;
      display: inline-flex;
      background: $primary;
      border-radius: 20px;
      cursor: pointer;
      span {
        width: $value - 2;
        height: $value - 2;
        display: inline-block;
        border-radius: 50%;
        background: #fff;
        border: 1px solid $primary;
      }
    }
  }
</style>

[Tyh2001]

设计稿：https://www.figma.com/file/c9m9TsJrN1OKKFPBo897DI/Switch-%E7%BB%84%E4%BB%B6?node-id=0%3A1

[Tyh2001]

哇，bug 有点多，自己先好好测测

[Tyh2001]

我重构了一些，可以看一下最新的
https://github.com/FightingDesign/fighting-design/blob/master/packages/fighting-components/switch/src/switch.vue