ui-form-switch 开关组

版本：v2.3.11

开关组件用于切换开关状态，支持自定义样式和禁用状态

基本使用

<template>
  <div class="form-switch-demo">
    <ui-form-switch v-model="checked" />
    <p>当前状态：{{ checked  '开 : '关闭' }}</p>
  </div>
</template>

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

<style scoped>
.form-switch-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
</style>

Props

参数	类型	默认值	说明
modelValue	Boolean	false	是否开
disabled	Boolean	false	是否禁用
size	String	'medium'	开关大小，可选值：small、medium、large
activeColor	String	'#1989fa'	开启状态颜
inactiveColor	String	'#e5e5e5'	关闭状态颜
activeText	String	-	开启状态文
inactiveText	String	-	关闭状态文

Events

事件	说明	回调参数
change	开关状态变化时触发	(value: Boolean) 当前开关状

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/form/form-switch/form-switch