Switch 开关

开关选择器。

何时使用

• 需要表示开关状态/两种状态之间的切换时；
• 和 checkbox的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

代码演示

基本用法

最简单的用法。

<template>
  <div>
    <a-switch defaultChecked @change='onChange'/>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    methods: {
      onChange(checked){
        console.log(`a-switch to ${checked}`);
      }
    },
  }
</script>

不可用

Switch 失效状态。

<template>
  <div>
    <a-switch defaultChecked :disabled="disabled" style="margin-bottom:5px"/>
    <br/>
    <a-button type="primary" @click='onToggle'>Toggle disabled</a-button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        disabled: true,
      }
    },
    methods: {
      onToggle(){
        this.disabled = !this.disabled
      }
    },
  }
</script>

文字和图标

带有文字和图标。

<template>
  <div>
    <a-switch checkedChildren="开" unCheckedChildren="关" defaultChecked/>
    <br>
    <a-switch checkedChildren="1" unCheckedChildren="0"/>
    <br>
    <a-switch defaultChecked >
      <a-icon type="check" slot="checkedChildren"/>
      <a-icon type="close" slot="unCheckedChildren"/>
    </a-switch>
  </div>
</template>

两种大小

size="small" 表示小号开关。

<template>
  <div>
    <a-switch defaultChecked/>
    <br>
    <a-switch size="small" defaultChecked/>
  </div>
</template>

加载中

标识开关操作仍在执行中。

<template>
  <div>
    <a-switch loading defaultChecked/>
    <br>
    <a-switch size="small" loading/>
  </div>
</template>

API

事件

方法