单选组 KLRadioGroup

基本形式

单选组 KLRadioGroup - 图1

  1. <kl-radio-group source={source} value={value} on-select={console.log($event)} />
  1. var component = new NEKUI.Component({
    template: template,
    data: {
    source: [
    {name: '一般贸易', id: 1},
    {name: '海淘', id: 2},
    {name: '直邮', id: 3},
    {name: '保税', id: 4}
    ],
    value: 2
    }
    });

远程数据

单选组 KLRadioGroup - 图2

  1. <kl-radio-group service={@(this.service)} value={value}/>
  1. var component = new NEKUI.Component({
    template: template,
    service: {
    getList: function(params, success) {
    NEKUI.ajax.request({
    url: '/data/KLRadioGroup.json',
    method: 'get',
    type: 'json',
    data: params,
    success: success
    });
    }
    },
    data: {
    value: 4
    }
    });

多行

单选组 KLRadioGroup - 图3

  1. <kl-radio-group source={source} value={value} block />
  1. var component = new NEKUI.Component({
    template: template,
    data: {
    source: [
    {name: '一般贸易', id: 1},
    {name: '海淘', id: 2},
    {name: '直邮', id: 3},
    {name: '保税', id: 4}
    ],
    value: 2
    }
    });

数据绑定

单选组 KLRadioGroup - 图4

  1. <kl-radio-group source={source} value={value} selected={selected} />
    <div>value: {value}</div>
    <div>selected: {selected ? JSON.stringify(selected) : ''}</div>
  1. var component = new NEKUI.Component({
    template: template,
    data: {
    source: [
    {name: '一般贸易', id: 11},
    {name: '海淘', id: 22},
    {name: '直邮', id: 33},
    {name: '保税', id: 44}
    ],
    value: 3
    }
    });

表单项

单选组 KLRadioGroup - 图5

  1. <kl-form>
    <kl-form-item title="跨境方式" tip="跨境方式">
    <kl-radio-group source={source} value={value}/>
    </kl-form-item>
    </kl-form>
  1. var component = new NEKUI.Component({
    template: template,
    data: {
    source: [
    {name: '一般贸易', id: 1},
    {name: '海淘', id: 2},
    {name: '直邮', id: 3},
    {name: '保税', id: 4}
    ],
    value: 1
    }
    });

禁用组件

单选组 KLRadioGroup - 图6

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

API

KLRadioGroup

KLRadioGroup

ParamTypeDefaultDescription
[options.data]object= 绑定属性
[options.data.source]Array.<object>[]<=> 数据源
[options.data.nameKey]string"name"=> 数据项的name键
[options.data.key]string"id"=> 数据项的key键
[options.data.source[].name]string=> 每项的内容
[options.data.selected]object<=> 当前选择的对象
[options.data.value]number/string<=> 当前选择的值
[options.data.block]booleanfalse=> 多行显
[options.data.required]booleanfalse=> 是否必选
[options.data.message]string=> 验证错误提示
[options.data.hideTip]booleanfalse=> 是否显示校验错误信息
[options.data.readonly]booleanfalse=> 是否只读
[options.data.disabled]booleanfalse=> 是否禁用
[options.data.visible]booleantrue=> 是否显
[options.data.class]string=> 补充class
[options.service]object@=> 数据服务

select 选择某一项时触发Event

NameTypeDescription
senderobject事件发送对象
selectedobject当前选择