复选组 KLCheckGroup

基本形式

<kl-check-group source={source} value={checkedValue} />
<div>已选择的： {checkedValue}</div>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '一般贸易', id: 1},
            {name: '海淘', id: 2},
            {name: '直邮', id: 3},
            {name: '保税', id: 4}
        ],
        checkedValue: '1'
    }
});

表单项

<kl-form>
    <kl-form-item title="跨境方式" tip="跨境方式">
        <kl-check-group source={source} value={checkedValue}/>
    </kl-form-item>
</kl-form>
<div>已选择的： {checkedValue}</div>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '一般贸易', id: 1},
            {name: '海淘', id: 2},
            {name: '直邮', id: 3},
            {name: '保税', id: 4}
        ],
        checkedValue: '2,3'
    }
});

禁用组件

<kl-check-group source={source} disabled />

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '一般贸易', id: 1},
            {name: '海淘', id: 2},
            {name: '直邮', id: 3},
            {name: '保税', id: 4}
        ],
        checkedValue: ''
    }
});

多行

<kl-check-group source={source} value={checkedValue} block />
<div>已选择的： {checkedValue}</div>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '一般贸易', id: 1},
            {name: '海淘', id: 2},
            {name: '直邮', id: 3},
            {name: '保税', id: 4}
        ],
        checkedValue: '1,4'
    }
});

远程数据

<kl-check-group service={@(this.service)} value={checkedValue}/>
<div>已选择的： {checkedValue}</div>

var component = new NEKUI.Component({
    template: template,
    service: {
        getList: function(params, success) {
            NEKUI.ajax.request({
                url: '/data/KLCheckGroup.json',
                method: 'get',
                type: 'json',
                data: params,
                success: success
            });
        }
    },
    data: {
        checkedValue: '3,4'
    }
});

全选

<check name="全选" checked={checkedAll} on-check={this._checkAll($event)} />
<kl-check-group source={source} value={checkedValue}/>
<div>已选择的： {checkedValue}</div>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '一般贸易', id: 1},
            {name: '海淘', id: 2},
            {name: '直邮', id: 3},
            {name: '保税', id: 4}
        ],
        checkedValue: ''
    },
    computed: {
        checkedAll: function() {
            var source = this.data.source;
            return source.filter(function(item) {
                return item.checked;
            }).length === source.length;
        }
    },
    _checkAll: function(event) {
      var checkedValue = [];
      this.data.source.forEach(function(d) {
        d.checked = !!event.checked;
        if (d.checked) {
            checkedValue.push(d.id);
        }
      });
      this.data.checkedValue = checkedValue.join(',');
    },
});

插入模版

<kl-check-group source={source} value={checkedValue} />
<div>已选择的： {checkedValue}</div>
<div>test:  {test}</div>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '一般贸易', id: 1},
            {name: '海淘', id: 2},
            {name: '直邮', id: 3},
            {name: '保税', id: 4},
            {
                name: '插入模版', 
                id: 5,
                contentTemplate: '<kl-input class="kl-template" value={this.$parent.data.test}  />'
            },
        ],
        checkedValue: '1',
        test: '插入模版'
    }
});

API

KLCheckGroup

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.source]	`Array.<object>`	`[]`	<=> 数据源
[options.data.value]	`string`		<=> 选择的值,separator间隔的id值
[options.data.source[].name]	`string`	`"[]"`	=> 每项的内容
[options.data.key]	`string`	`"id"`	=> 数据项的键
[options.data.separator]	`string`	`","`	=> value的分割符号
[options.data.nameKey]	`string`	`"name"`	=> 数据项的name键
[options.data.min]	`number`		=> 最少选几项
[options.data.max]	`number`		=> 最多选几项
[options.data.required]	`boolean`		=> 是否必选
[options.data.message]	`string`		=> 校验错误提示信息
[options.data.hideTip]	`boolean`	`false`	=> 是否显示校验错误信息
[options.data.block]	`boolean`	`false`	=> 多行显示
[options.data.readonly]	`boolean`	`false`	=> 是否只读
[options.data.disabled]	`boolean`	`false`	=> 是否禁用
[options.data.visible]	`boolean`	`true`	=> 是否显示
[options.data.class]	`string`		=> 补充class
[options.service]	`object`		@=> 数据服务
[options.data.source.contentTemplate]	`string`		=> 内容模板，用于支持复杂内容的自定义。

validate 验证组件时触发Event

Name	Type	Description
sender	`object`	事件发送对象
result	`object`	验证结果