Switch 开关

开关选择器。

何时使用

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

代码演示

基本用法

最简单的用法。

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

文字和图标

带有文字和图标。

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

加载中

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

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

不可用

Switch 失效状态。

<template>
  <div>
    <a-switch default-checked :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>

两种大小

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

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

API

事件

方法