Switch 开关

开关选择器。

何时使用

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

代码演示

基本用法

最简单的用法。

<template>
  <a-switch v-model:checked="checked" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const checked = ref<boolean>(false);
    return {
      checked,
    };
  },
});
</script>

文字和图标

带有文字和图标。

<template>
  <div>
    <a-switch checked-children="开" un-checked-children="关" v-model:checked="checked1" />
    <br />
    <a-switch checked-children="1" un-checked-children="0" v-model:checked="checked2" />
    <br />
    <a-switch v-model:checked="checked3">
      <template #checkedChildren><check-outlined /></template>
      <template #unCheckedChildren><close-outlined /></template>
    </a-switch>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  setup() {
    const state = reactive({
      checked1: true,
      checked2: false,
      checked3: false,
    });
    return { ...toRefs(state) };
  },
  components: {
    CheckOutlined,
    CloseOutlined,
  },
});
</script>

加载中

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

<template>
  <div>
    <a-switch loading v-model:checked="checked1" />
    <br />
    <a-switch size="small" loading v-model:checked="checked2" />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
  setup() {
    const state = reactive({
      checked1: true,
      checked2: false,
    });
    return { ...toRefs(state) };
  },
});
</script>

不可用

Switch 失效状态。

<template>
  <div>
    <a-switch v-model:checked="checked" :disabled="disabled" style="margin-bottom: 5px" />
    <br />
    <a-button type="primary" @click="onToggle">Toggle disabled</a-button>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const checked = ref<boolean>(true);
    const disabled = ref<boolean>(true);
    const onToggle = () => {
      disabled.value = !disabled.value;
    };
    return {
      checked,
      disabled,
      onToggle,
    };
  },
});
</script>

两种大小

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

<template>
  <div>
    <a-switch v-model:checked="checked1" />
    <br />
    <a-switch size="small" v-model:checked="checked2" />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
  setup() {
    const state = reactive({
      checked1: true,
      checked2: false,
    });
    return { ...toRefs(state) };
  },
});
</script>

API

事件

方法