复选框 KLCheck

基本形式

复选框 KLCheck - 图1

  1. <kl-check name="多选按钮" checked={isChecked} on-check={console.log($event)} on-change={console.log($event)}/>
    <div>checked: {isChecked}</div>

多行

复选框 KLCheck - 图2

  1. <kl-check name="邮件" block />
    <kl-check name="短信" block />

禁用组件

复选框 KLCheck - 图3

  1. <kl-check name="禁用多选按钮" disabled />

在表单中使用

复选框 KLCheck - 图4

  1. <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>

半选状态

复选框 KLCheck - 图5

  1. <kl-check name="半选状态" checked={isChecked} />
    <div>checked: {isChecked}</div>
  1. var component = new NEKUI.Component({
    template: template,
    data: {
    isChecked: null
    }
    });

API

KLCheck

KLCheck

ParamTypeDefaultDescription
options.dataobject= 绑定属性
[options.data.name]string=> 多选按钮的文字
[options.data.checked]booleanfalse<=> 多选按钮的选择状态。false表示未选,true表示已选,null表示半选。
[options.data.block]booleanfalse=> 是否以block方式显示
[options.data.readonly]booleanfalse=> 是否只读
[options.data.disabled]booleanfalse=> 是否禁用
[options.data.visible]booleantrue=> 是否显示
[options.data.class]string=> 补充class

change 选中状态改变时触发Event

NameTypeDescription
senderobject事件发送对象
dateobject改变后的选中状态

check 改变选中状态时触发Event

NameTypeDescription
senderobject事件发送对象
checkedboolean选中状态