ExUI

Appearance

Checkbox 复选框 ​

用于在多个选项中进行选择，支持单个复选框和复选框组。

基础用法 ​

简单的复选框，使用 v-model 绑定布尔值。

vue
<template>
  <ExCheckbox v-model="checked">同意用户协议</ExCheckbox>
</template>

<script setup>
import { ref } from 'vue'

const checked = ref(false)
</script>

禁用状态 ​

通过 disabled 属性禁用复选框。

vue
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <ExCheckbox :model-value="false" disabled>未选中禁用</ExCheckbox>
    <ExCheckbox :model-value="true" disabled>选中禁用</ExCheckbox>
  </div>
</template>

尺寸 ​

提供三种尺寸：small、medium（默认）、large。

vue
<template>
  <div style="display: flex; gap: 24px; align-items: center;">
    <ExCheckbox v-model="checked" size="small">小尺寸</ExCheckbox>
    <ExCheckbox v-model="checked" size="medium">中尺寸</ExCheckbox>
    <ExCheckbox v-model="checked" size="large">大尺寸</ExCheckbox>
  </div>
</template>

状态 ​

支持 success、warning、error 状态。

vue
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <ExCheckbox v-model="checked" status="default">默认状态</ExCheckbox>
    <ExCheckbox v-model="checked" status="success">成功状态</ExCheckbox>
    <ExCheckbox v-model="checked" status="warning">警告状态</ExCheckbox>
    <ExCheckbox v-model="checked" status="error">错误状态</ExCheckbox>
  </div>
</template>

多选框组 ​

使用多个复选框实现多选功能。

选中的值：[ "Apple", "Orange" ]

vue
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <ExCheckbox 
      v-for="option in options" 
      :key="option"
      :model-value="checkList.includes(option)"
      @update:model-value="(val) => {
        if (val) {
          checkList.push(option)
        } else {
          const index = checkList.indexOf(option)
          if (index > -1) checkList.splice(index, 1)
        }
      }"
    >
      {{ option }}
    </ExCheckbox>
  </div>
  <p>选中的值：{{ checkList }}</p>
</template>

<script setup>
import { ref } from 'vue'

const checkList = ref(['Apple', 'Orange'])
const options = ['Apple', 'Pear', 'Orange']
</script>

不确定状态 ​

indeterminate 属性用于表示复选框的不确定状态，常用于实现全选功能。

vue
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <ExCheckbox 
      :model-value="checkAll"
      :indeterminate="isIndeterminate"
      @update:model-value="handleCheckAllChange"
    >
      全选
    </ExCheckbox>
    <div style="margin: 8px 0;"></div>
    <ExCheckbox 
      v-for="city in cities" 
      :key="city"
      :model-value="checkedCities.includes(city)"
      @update:model-value="handleCityChange"
    >
      {{ city }}
    </ExCheckbox>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const checkAll = ref(false)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']

const isIndeterminate = computed(() => {
  const len = checkedCities.value.length
  return len > 0 && len < cities.length
})

const handleCheckAllChange = (val) => {
  checkedCities.value = val ? cities : []
  checkAll.value = val
}

const handleCityChange = () => {
  const len = checkedCities.value.length
  checkAll.value = len === cities.length
}
</script>

CheckboxGroup 组件 ​

使用 ExCheckboxGroup 组件管理多个复选框。

选中的值：[ "apple", "banana" ]

vue
<template>
  <ExCheckboxGroup v-model="groupValue" label="选择你喜欢的水果">
    <ExCheckbox 
      v-for="option in groupOptions" 
      :key="option.value"
      :value="option.value"
    >
      {{ option.label }}
    </ExCheckbox>
  </ExCheckboxGroup>
</template>

<script setup>
import { ref } from 'vue'

const groupValue = ref(['apple', 'banana'])
const groupOptions = [
  { value: 'apple', label: '苹果' },
  { value: 'banana', label: '香蕉' },
  { value: 'orange', label: '橙子' },
  { value: 'grape', label: '葡萄' }
]
</script>

垂直布局 ​

通过 vertical 属性设置垂直布局。

vue
<template>
  <ExCheckboxGroup v-model="value" vertical label="垂直布局">
    <ExCheckbox value="option1">选项 1</ExCheckbox>
    <ExCheckbox value="option2">选项 2</ExCheckbox>
    <ExCheckbox value="option3">选项 3</ExCheckbox>
  </ExCheckboxGroup>
</template>

最小/最大限制 ​

通过 min 和 max 属性限制选择数量。

vue
<template>
  <ExCheckboxGroup 
    v-model="value" 
    :min="1" 
    :max="2"
    label="最少选 1 个，最多选 2 个"
  >
    <ExCheckbox value="1">选项 1</ExCheckbox>
    <ExCheckbox value="2">选项 2</ExCheckbox>
    <ExCheckbox value="3">选项 3</ExCheckbox>
    <ExCheckbox value="4">选项 4</ExCheckbox>
  </ExCheckboxGroup>
</template>

表单验证 ​

通过 rules 属性添加验证规则。

vue
<template>
  <ExCheckbox
    v-model="agreed"
    :rules="[
      (value) => value === true || '请同意用户协议',
    ]"
    required
  >
    我已阅读并同意用户协议
  </ExCheckbox>
</template>

<script setup>
import { ref } from 'vue'

const agreed = ref(false)
</script>

API ​

ExCheckbox Props ​

属性说明类型默认值
modelValue / v-model绑定值boolean | string | numberfalse
trueValue选中状态的值boolean | string | numbertrue
falseValue未选中状态的值boolean | string | numberfalse
value复选框的值（在 CheckboxGroup 中使用）string | number-
label复选框标签string-
size组件大小'small' | 'medium' | 'large''medium'
status组件状态'default' | 'success' | 'warning' | 'error''default'
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
indeterminate是否为中间状态booleanfalse
required是否必填booleanfalse
helpText帮助文本string-
errorMessage错误信息string-
rules表单验证规则Array<(value) => boolean | string>-
customClass自定义类名string-
customStyle自定义样式Record<string, string>-

ExCheckbox Events ​

事件名说明回调参数
update:modelValue值变化时触发(value: boolean | string | number) => void
change值变化时触发(value: boolean | string | number, event: Event) => void
focus获得焦点时触发(event: FocusEvent) => void
blur失去焦点时触发(event: FocusEvent) => void

ExCheckbox Slots ​

插槽名说明
default标签内容
label标签插槽
help帮助文本插槽
error错误信息插槽

ExCheckbox Methods ​

方法名说明参数
focus使复选框获得焦点-
blur使复选框失去焦点-
getCheckboxElement获取复选框元素-

ExCheckboxGroup Props ​

属性说明类型默认值
modelValue / v-model绑定值Array<string | number>[]
options选项列表CheckboxOption[]-
name表单域 name 属性string-
size组件大小'small' | 'medium' | 'large''medium'
status组件状态'default' | 'success' | 'warning' | 'error''default'
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
min最小选择数量number-
max最大选择数量number-
vertical是否垂直排列booleanfalse
label标签文本string-
required是否必填booleanfalse
helpText帮助文本string-
errorMessage错误信息string-
rules表单验证规则Array<(value) => boolean | string>-
customClass自定义类名string-
customStyle自定义样式Record<string, string>-

ExCheckboxGroup Events ​

事件名说明回调参数
update:modelValue值变化时触发(value: Array<string | number>) => void
change值变化时触发(value: Array<string | number>) => void

ExCheckboxGroup Methods ​

方法名说明参数
checkAll全选-
uncheckAll取消全选-
toggleAll反选-
getCheckboxGroupElement获取复选框组元素-