2.1 KiB
2.1 KiB
Checkbox 复选框
示例
尺寸
可选的 ui
属性值:s
/m
。
值设定
可以通过设置 true-value
和 false-value
来修改选中、非选中状态下 model
属性(v-model
)的值。
API
属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
ui |
string= |
- | [^ui] |
checked |
boolean= |
false |
[^checked] |
value |
* |
- | 当 v-model 绑定到数组时,代表当前复选框的值。 |
true-value |
*= |
true |
选中状态对应的值。 |
false-value |
*= |
false |
未选状态对应的值。 |
indeterminate |
boolean= |
false |
是否处于半选状态。 |
disabled |
boolean= |
false |
是否为禁用状态。 |
readonly |
boolean= |
false |
是否为只读状态。 |
^^^ui 预设样式。
+++枚举值
值 | 描述 |
---|---|
s |
小尺寸样式。 |
m |
中尺寸样式。 |
+++ | |
^^^ |
^^^checked
:::badges
.sync
:::
是否处于选中状态。 ^^^
插槽
名称 | 描述 |
---|---|
default |
复选框的描述文本,点击时会切换选择状态。无默认内容。 |
事件
名称 | 描述 |
---|---|
change |
用户切换选中状态时触发,回调参数为 (checked: boolean) 。checked 表示当前是否选中。 |
input |
[^event-input] |
^^^event-input
:::badges
v-model
:::
选中状态变化后触发,回调参数为 (val: *)
。val
为当前 v-model
的值。与 change
事件不同,input
事件在数据操作导致状态变化时也会触发。
^^^
此外,Checkbox
支持如下的原生事件:
auxclick
、click
、contextmenu
、dblclick
、mousedown
、mouseenter
、mouseleave
、mousemove
、mouseover
、mouseout
、mouseup
、select
、wheel
、keydown
、keypress
、keyup
、focus
、blur
、focusin
、focusout
。
回调参数均为相应的原生事件对象。
图标
名称 | 描述 |
---|---|
checked |
已选状态。 |
indeterminate |
半选状态。 |