Skip to content
On this page

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时,能才使用,可参考Buttontype参数。

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>

Released under the MIT License.