Checkbox 多选框
单独使用可以表示两种状态之间的切换,和 switch
类似。区别在于切换 switch
会直接触发状态改变,而 checkbox
一般用于状态标记,需要和提交操作配合。
基础用法
可使用 size
属性改变选择大小。 除了默认大小外,还有另外两个选项: large
, mini
。
html
<os-checkbox
v-model="status">
Option
</os-checkbox>
禁用状态
设置 disabled
属性即可禁用多选框。
多选框组
使用组件os-checkbox-group
作为容器,作为选中的组别,属性indeterminate
可设置不同的选中状态。
你已选择:[ "Option 1" ]
html
<os-checkbox
:modelValue="statusGroup.length > 0"
@change="() => {
statusGroup.length > 0 ? statusGroup.length = 0 : statusGroup = ['Option 1', 'Option 2', 'Option 3', 'Option 4']
}"
:indeterminate="statusGroup.length < 4">
All
</os-checkbox>
<os-checkbox-group v-model="statusGroup">
<os-checkbox label="Option 1"></os-checkbox>
<os-checkbox label="Option 2" class="os-margin-left-base"></os-checkbox>
<os-checkbox label="Option 3" class="os-margin-left-base"></os-checkbox>
<os-checkbox label="Option 4" class="os-margin-left-base" disabled></os-checkbox>
</os-checkbox-group>
按钮样式
os-checkbox-group
容器中属性mode
能更改选项样式,目前有 default
| button
两个参数。
os-checkbox-group
容器中属性type
能更改按钮样式,只有设置为button
时,能才使用,可参考Button
中type
参数。
html
<os-checkbox-group
v-model="statusGroup"
mode="button"
type="primary"
>
<os-checkbox label="Option 1"></os-checkbox>
<os-checkbox label="Option 2" class="os-margin-left-base"></os-checkbox>
<os-checkbox label="Option 3" class="os-margin-left-base"></os-checkbox>
<os-checkbox label="Option 4" class="os-margin-left-base" disabled></os-checkbox>
</os-checkbox-group>