47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<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>
|