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

事件

方法