u

code/base-project/base-vue/packages/ao-design/src/checkbox/demo.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+/* 单个受控 */
+const checked1 = ref(false)
+
+/* 单个非受控（只用 defaultChecked） */
+const checked2 = ref(true) // 只是初始值演示，不跟随
+
+/* group 多选 */
+const groupValue = ref<Array<string | number>>(['B'])
+</script>
+
+<template>
+  <div style="padding:20px">
+    <h3>单个 Checkbox（受控 v-model:checked）</h3>
+    <ACheckbox v-model:checked="checked1" value="single1">
+      选项 1
+    </ACheckbox>
+    <p>当前状态: {{ checked1 }}</p>
+
+    <h3>单个 Checkbox（非受控 defaultChecked）</h3>
+    <ACheckbox value="single2" :default-checked="checked2">
+      选项 2
+    </ACheckbox>
+    <p>初始状态: {{ checked2 }}（点击后组件自己维护，不影响这个 ref）</p>
+
+    <h3>CheckboxGroup（多选）</h3>
+    <ACheckboxGroup v-model="groupValue" :options="['A', 'B', 'C']" />
+    <p>选中值: {{ groupValue }}</p>
+
+    <h3>CheckboxGroup（自定义插槽用法）</h3>
+    <ACheckboxGroup v-model="groupValue">
+      <ACheckbox value="X">
+        自定义 X
+      </ACheckbox>
+      <ACheckbox value="Y">
+        自定义 Y
+      </ACheckbox>
+      <ACheckbox value="Z">
+        自定义 Z
+      </ACheckbox>
+    </ACheckboxGroup>
+    <p>选中值: {{ groupValue }}</p>
+  </div>
+</template>