切换开关

切换开关用于选择布尔值。

导入 #


import ToggleSwitch from 'primevue/toggleswitch';

基本 #

切换开关与 v-model 属性一起使用，用于双向值绑定。


<ToggleSwitch v-model="checked" />

表单 #

切换开关与 PrimeVue 表单库无缝集成。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
    <div class="flex flex-col items-center gap-2">
        <ToggleSwitch name="activation" />
        <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

预选 #

启用 checked 属性会使组件初始显示为激活状态。


<ToggleSwitch v-model="checked" />

无效 #

无效状态使用 invalid 属性显示，以指示验证失败。当与表单验证库集成时，可以使用此样式。


<ToggleSwitch v-model="checked" :invalid="!checked" />

模板 #

可以使用 handle 插槽来显示自定义内容。


<ToggleSwitch v-model="checked">
    <template #handle="{ checked }">
        <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
    </template>
</ToggleSwitch>

禁用 #

当存在 disabled 时，元素无法编辑和聚焦。


<ToggleSwitch v-model="checked" disabled />

辅助功能 #

屏幕阅读器

切换开关组件内部使用一个隐藏的原生复选框元素，并带有 switch 角色，该元素仅对屏幕阅读器可见。用于描述组件的值可以通过与 id 属性组合使用的 label 标签，或使用 aria-labelledby、aria-label 属性来提供。


<label for="switch1">Remember Me</label>
<ToggleSwitch inputId="switch1" />

<span id="switch2">Remember Me</span>
<ToggleSwitch aria-labelledby="switch2" />

<ToggleSwitch aria-label="Remember Me" />

键盘支持

按键	功能
tab	将焦点移动到开关。
空格键	切换选中状态。