AntDesignVue 的开关禁用状态案例

<script setup>
import { ref } from 'vue';

// 开关的选中状态
const checked = ref(true);

// 开关的禁用状态
const disabled = ref(true);

// 切换禁用状态的方法
const onToggle = () => {
  disabled.value = !disabled.value;
};
</script>

<template>
  <a-space direction="vertical">
    <a-switch v-model:checked="checked" :disabled="disabled" />
    <a-button type="primary" @click="onToggle">Toggle disabled</a-button>
  </a-space>
</template>

<a-switch v-model:checked="checked" :disabled="disabled" />

• v-model:checked="checked"：双向绑定开关的选中状态
• :disabled="disabled"：动态绑定开关的禁用状态

<a-button type="primary" @click="onToggle">Toggle disabled</a-button>

通过按钮绑定点击事件，这样当我们点击的时候，就会自动触发切换禁用状态的功能