Switch 开关

avue-switch：由两项 dic 决定：dic[0] 关闭，dic[1] 开启；值可以是数字、字符串或布尔值。

通用属性、字典与事件见 基础组件使用约定。模板属性可写为 kebab-case，Form 配置对象使用 camelCase。

基础用法

效果预览可直接操作下方示例

独立组件通过 v-model 绑定单个字段；在 Form 中使用时，将相应配置放入 column。

正在加载示例…

<template>
  <el-space wrap>
    <avue-switch v-model="value" :dic="options" :before-change="beforeChange" inline-prompt />
    <el-checkbox v-model="allow">允许切换</el-checkbox>
  </el-space>
  <pre>{{ JSON.stringify({ value, allow, decision }, null, 2) }}</pre>
</template>

<script setup>
import { ref } from 'vue';
const value = ref(0);
const allow = ref(true);
const decision = ref('尚未切换');
const options = [{ label: '停用', value: 0 }, { label: '启用', value: 1 }];
function beforeChange(done) {
  decision.value = allow.value ? '已允许切换' : '本次切换已取消';
  done(allow.value);
}
</script>

属性

属性	类型	默认值	说明
dic / props	array / object	[] / 默认映射	按关闭、开启顺序提供两项字典
beforeChange	function	—	(done) => void；done(true) 切换，done(false) 取消
len	number	—	宽度
inlinePrompt	boolean	false	文字/图标显示在圆点中
activeIcon / inactiveIcon	string	—	开启/关闭图标
activeActionIcon / inactiveActionIcon	string	—	动作图标

beforeChange 不能只 return true 或 Promise，必须调用 done 才能结束内部 loading。异步成功与失败分支分别调用 done(true/false)。