Switch 开关

常用true和false两种状态切换，例如开启或者关闭某个设置。

基础用法

控制台

false

查看代码

<template>
	<demo-container class="gov-demo-switch">
		<gov-switch v-model="value" />
		<template #console>{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(false);
</script>

不同尺寸

查看代码

<template>
	<demo-container class="gov-demo-switch">
		<gov-switch v-model="value" size="large" />
		<gov-switch v-model="value" />
		<gov-switch v-model="value" size="small" />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(false);
</script>

禁用状态

查看代码

<template>
	<demo-container class="gov-demo-switch">
		<gov-switch :modelValue="true" disabled />
		<gov-switch :modelValue="false" disabled />
	</demo-container>
</template>

<script setup></script>

不同类型

可以根据 type 设置不同类型的开关。

控制台

true

查看代码

<template>
	<demo-container class="gov-demo-switch">
		<gov-switch v-model="value" type="primary" />
		<gov-switch v-model="value" type="success" />
		<gov-switch v-model="value" type="info" />
		<gov-switch v-model="value" type="warning" />
		<gov-switch v-model="value" type="danger" />
		<template #console>{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(true);
</script>

设置 TrueValue 和 FalseValue

设置checkbox原生组件的 trueValue/falseValue 属性。

控制台

打开

查看代码

<template>
	<demo-container class="gov-demo-switch">
		<div class="box">
			<gov-switch v-model="value" trueValue="打开" falseValue="关闭" />
			{{ value }}
		</div>
		<template #console>{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("打开");
</script>
<style lang="scss">
.gov-demo-switch .box {
	line-height: 30px;
	font-size: 16px;
}
</style>

Attributes

属性名	说明	类型	可选值	默认值
modelValue	绑定的值，表示开关的状态	Boolean	true/false	—
type	开关的类型	String	default, primary, success, info, warning, danger	default
size	开关的尺寸	String	—	—
disabled	是否禁用开关	Boolean	true, false	false
trueValue	开关打开时的值	Boolean/Any	—	true
falseValue	开关关闭时的值	Boolean/Any	—	false
triggerForm	是否触发表单验证	Boolean	true, false	true

Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	新的值
change	开关状态改变时触发	新的值
focus	开关获得焦点时触发	—
blur	开关失去焦点时触发	—