代码演示

基本形式

<check.group source={source} />
var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', id: 1},
            {name: '选项2', id: 2},
            {name: '选项3', id: 3},
            {name: '选项4', id: 4},
            {name: '选项5', id: 5},
            {name: '选项6', id: 6}
        ]
    }
});

表单项

在表单中使用

<ui.form>
    <form.item cols="12" title="用户名" hint="用户名的用途">
        <check.group source={source} />
    </form.item>
</ui.form>
var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', id: 1},
            {name: '选项2', id: 2},
            {name: '选项3', id: 3},
            {name: '选项4', id: 4},
            {name: '选项5', id: 5},
            {name: '选项6', id: 6}
        ]
    }
});

禁用组件

<check.group source={source} disabled />
var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', id: 1},
            {name: '选项2', id: 2},
            {name: '选项3', id: 3},
            {name: '选项4', id: 4},
            {name: '选项5', id: 5},
            {name: '选项6', id: 6}
        ]
    }
});

多行

<check.group source={source} block />
var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', id: 1},
            {name: '选项2', id: 2},
            {name: '选项3', id: 3},
            {name: '选项4', id: 4},
            {name: '选项5', id: 5},
            {name: '选项6', id: 6}
        ]
    }
});

远程数据

<check.group service={@(this.service)} />
var component = new NEKUI.Component({
    template: template,
    service: {
        getList: function(params, success) {
            NEKUI.ajax.request({
                url: '../data/list.json',
                method: 'get',
                type: 'json',
                data: params,
                success: success
            });
        }
    }
});

全选

<check name="全选" checked={checkedAll} on-check={this._checkAll($event)} />
<check.group source={source} />
var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', id: 1},
            {name: '选项2', id: 2},
            {name: '选项3', id: 3},
            {name: '选项4', id: 4},
            {name: '选项5', id: 5},
            {name: '选项6', id: 6}
        ]
    },
    computed: {
        checkedAll: function() {
            var source = this.data.source;
            return source.filter(function(item) {
                return item.checked;
            }).length === source.length;
        }
    },
    _checkAll: function(event) {
      this.data.source.forEach(function(d) {
        d.checked = !!event.checked;
      })
    },
});

API

Classes

CheckGroup

Functions

config()
max验证组件的值是否正确() ⇒ object

CheckGroup

Kind: global class
Extend: CheckGroup

new CheckGroup()

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 @=> 数据服务

config()

Kind: global function
Access: protected

← 复选框 日期选择 →
想让文档更完善？ 来 GitHub 提个 PR 吧！