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#

参数	说明	类型	默认值	版本
autofocus	组件自动获取焦点	boolean	false
checked(v-model)	指定当前是否选中	checkedValue \| unCheckedValue	false
disabled	是否禁用	boolean	false
loading	加载中的开关	boolean	false
size	开关大小，可选值：`default` `small`	string	default
unCheckedChildren	非选中时的内容	string\|slot
unCheckedChildren	非选中时的内容	string\|slot
checkedValue	选中时的值	boolean \| string \| number	true	2.2.1
unCheckedValue	非选中时的值	boolean \| string \| number	false	2.2.1

事件

事件名称	说明	回调参数
change	变化时回调函数	Function(checked: boolean \| string \| number, event: Event)
click	点击时回调函数	Function(checked: boolean \| string \| number, event: Event)

方法

名称	描述
blur()	移除焦点
focus()	获取焦点