复选框 KLCheck
基本形式
<kl-check name="多选按钮" checked={isChecked} on-check={console.log($event)} on-change={console.log($event)}/>
<div>checked: {isChecked}</div>
多行
<kl-check name="邮件" block />
<kl-check name="短信" block />
禁用组件
<kl-check name="禁用多选按钮" disabled />
在表单中使用
<kl-form>
<kl-form-item title="通知方式" tip="通知方式">
<kl-check name="邮件" checked={isEmail}/>
<kl-check name="短信" checked={isMsg}/>
</kl-form-item>
</kl-form>
<div>通知方式:{#if isEmail} 邮件 {/if} {#if isMsg} 短信 {/if} </div>
半选状态
<kl-check name="半选状态" checked={isChecked} />
<div>checked: {isChecked}</div>
var component = new NEKUI.Component({
template: template,
data: {
isChecked: null
}
});
API
KLCheck
KLCheck
Param | Type | Default | Description |
---|
options.data | object | | = 绑定属性 |
[options.data.name] | string | | => 多选按钮的文字 |
[options.data.checked] | boolean | false | <=> 多选按钮的选择状态。false 表示未选,true 表示已选,null 表示半选。 |
[options.data.block] | boolean | false | => 是否以block方式显示 |
[options.data.readonly] | boolean | false | => 是否只读 |
[options.data.disabled] | boolean | false | => 是否禁用 |
[options.data.visible] | boolean | true | => 是否显示 |
[options.data.class] | string | | => 补充class |
change 选中状态改变时触发Event
Name | Type | Description |
---|
sender | object | 事件发送对象 |
date | object | 改变后的选中状态 |
check 改变选中状态时触发Event
Name | Type | Description |
---|
sender | object | 事件发送对象 |
checked | boolean | 选中状态 |