下拉选择 KLSelect

基本形式

<kl-select source={source} />
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '母婴儿童'},
{name: '美容彩妆'},
{name: '服饰鞋包'}
]
}
});

表单项

在表单中使用

<kl-form>
<kl-form-item cols="12" title="所有分类" hint="所有BU的分类">
<kl-select source={['母婴儿童', '美容彩妆', '服饰鞋包']} />
</kl-form-item>
</kl-form>

selected, value和key

selected表示当前选择项,value表示当前选择值。key表示数据项的键,默认为'id'

它们三者的关系如下:selected[key] == value。其中selectedvalue是联动的,当一项变化时会同时改变另一项。

<kl-form>
<kl-form-item cols=4>
<kl-select source={source} selected={selected} />
</kl-form-item>
<kl-form-item cols=4>
<kl-select source={source} value={2} />
</kl-form-item>
<kl-form-item cols=4>
<kl-select source={source} key="name" value="服饰鞋包" />
</kl-form-item>
</kl-form>
var component = new NEKUI.Component({
template: template,
data: {
source: [
{id: 1, name: '母婴儿童'},
{id: 2, name: '美容彩妆'},
{id: 3, name: '服饰鞋包'}
]
},
config: function() {
this.data.selected = this.data.source[0];
}
});

禁用某一项,禁用组件

tip表示禁用某一项时给出的提示,不给则无提示,placement表示给出提示的方向,具体参考文字提示组件Tooltip

<kl-form>
<kl-form-item cols=6>
<kl-select source={source} />
</kl-form-item>
<kl-form-item cols=6>
<kl-select source={source} disabled />
</kl-form-item>
</kl-form>
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '母婴儿童'},
{name: '美容彩妆'},
{name: '服饰鞋包(禁用)', disabled: true},
{name: '家居个护(禁用)', disabled: true, tip: 'tip'},
{name: '营养保健(禁用)', disabled: true, tip: 'tip', placement: 'bottom'}
]
}
});

分隔线

<kl-form>
<kl-form-item cols=12>
<kl-select source={source} />
</kl-form-item>
</kl-form>
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '母婴儿童'},
{name: '美容彩妆'},
{divider: true},
{name: '服饰鞋包(禁用)', disabled: true}
]
}
});

设置或取消默认项

如果placeholder为空,刚开始将会自动选中第一项。

<kl-form>
<kl-form-item cols=6>
<kl-select source={source} placeholder="全部" />
</kl-form-item>
<kl-form-item cols=6>
<kl-select source={source} placeholder="" />
</kl-form-item>
</kl-form>
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '母婴儿童'},
{name: '美容彩妆'},
{name: '服饰鞋包'}
]
}
});

远程数据

<kl-select service={@(this.service)} value="2" />
var component = new NEKUI.Component({
template: template,
service: {
getList: function(params, success) {
this.request({
url: '../data/KLSelectList.json',
method: 'get',
type: 'json',
data: params,
success: function(json) {
this.$update('source', json.result);
}.bind(this)
});
}
}
});

数据绑定

如果同时设置selectedvalue的初始化值,selected的值会将value覆盖。

<kl-select source={source} selected={selected} value={value} />
<p>当前选择项:{selected ? selected.name : 'undefined'}</p>
<p>当前选择值:{value || 'undefined'}</p>
var component = new NEKUI.Component({
template: template,
data: {
source: [
{id: 1, name: '母婴儿童'},
{id: 2, name: '美容彩妆'},
{id: 3, name: '服饰鞋包'}
]
},
config: function(){
this.data.selected = this.data.source[1];
this.data.value = 1;
}
});

事件

请打开浏览器的控制台查看结果。

<kl-select source={source}
on-toggle={console.log('on-toggle:', '$event.open:', $event.open)}
on-select={console.log('on-select:', '$event.selected:', $event.selected)}
on-change={console.log('on-change:', '$event:', $event)} />
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '母婴儿童'},
{name: '美容彩妆'},
{name: '服饰鞋包'}
]
}
});

带清空按钮

<kl-select source={source} clearable={clearable} canSearch={canSearch} />
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '母婴儿童'},
{name: '美容彩妆'},
{name: '服饰鞋包'}
],
clearable: true,
canSearch: true
}
});

综合示例

<kl-form-item title="是否多选: ">
<kl-check checked={multiple} />
</kl-form-item>
<kl-form-item title="是否有全选: ">
<kl-check checked={canSelectAll} />
</kl-form-item>
<kl-form-item title="是否标签显示多选: ">
<kl-check checked={tags} />
</kl-form-item>
<kl-form-item title="是否选中关闭: ">
<kl-check checked={selectedClose} />
</kl-form-item>
<kl-form-item title="value分隔符: " col=11>
<kl-input value={separator}/>
</kl-form-item>
<kl-form-item title="最多展示多少个选项: " col=11>
<kl-input value={limit}/>
</kl-form-item>
<kl-form-item title="是否可搜索: " >
<kl-check checked={canSearch} />
</kl-form-item>
<kl-form-item title="区分大小写">
<kl-check checked={isCaseSensitive} />
</kl-form-item>
<kl-form-item>
<kl-select source={source}
on-search={this.search($event)}
tags={tags}
multiple={multiple}
canSearch={canSearch}
separator={separator}
selectedClose={selectedClose}
canSelectAll={canSelectAll}
isCaseSensitive={isCaseSensitive}
searchInputPlaceholder="请输入"
value={value} limit={limit}
/>
</kl-form-item>
<kl-form-item>
选中值:{value}
</kl-form-item>
var component = new NEKUI.Component({
template: template,
data: {
multiple: true,
tags: false,
separator: ',',
showSeparator: '、',
selectedClose: false,
canSelectAll: true,
canSearch: true,
isCaseSensitive: false,
value: null,
limit: null,
source: [
{name: '母婴儿童Dr.CI'},{name: '母婴儿童Filorga'},
{name: '母婴儿童age20'},{name: '母婴儿童'},
{name: '营养保健'},{name: '海外直邮'},
{name: '数码家电'},{name: '环球美食'},
{name: '运动户外'},{name: '水果生鲜'},
{name: '女士箱包'},{name: '男士箱包'},
{name: '运动服饰'},{name: '休闲零食'},
{name: '水产海鲜'},{name: '健康养护'},
{name: '速冻特产'},{name: '新鲜水果'}
]
},
search: function(event) {
console.log(event.sender);
console.log(event.value);
}
});

API

KLSelect

KLSelect

Param Type Default Description
[options.data] object = 绑定属性
[options.data.source] Array.<object> [] <=> 数据源
[options.data.source[].name] string => 每项的内容
[options.data.source[].disabled] boolean false => 禁用此项
[options.data.source[].tip] string => 禁用此项显示的提示,如果没有则不显示
[options.data.source[].placement] string => 禁用此项显示提示的方向,默认下方
[options.data.filter] function => 如果传了该参数会对 source 数组的每一项 item 进行 filter(item) 返回 true 则显示,否则不显示
[options.data.source[].divider] boolean false => 设置此项为分隔线
[options.data.selected] object <=> 当前选择项
[options.data.value] string/number <=> 当前选择值
[options.data.key] string "id" => 数据项的键
[options.data.nameKey] string "name" => 数据项的name键
[options.data.placeholder] string "请选择" => 默认项的文字,如果placeholder为空并且没有选择项时,将会自动选中第一项。
[options.data.hideTip] boolean false => 是否显示校验错误信息
[options.data.clearable] string false => 单选时是否有清空按钮
[options.data.required] 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.canSearch] boolean false => 是否可搜索
[options.data.isCaseSensitive] boolean false => 是否区分大小写
[options.data.noMatchText] boolean 无匹配项 => 搜索无结果文案
[options.data.delaySearch] Number 300 => 异步搜索的延迟
[options.data.maxShowCount] Number 1000 => 最大展示条数
[options.data.multiple] boolean false => 是否多选
[options.data.tags] boolean false => 是否用数字标签代替多行显示
[options.data.separator] string "," => 多选value分隔符
[options.data.selectedClose] boolean true => 多选时选中非全部和请选择项时 是否关闭
[options.data.canSelectAll] boolean true => 是否有全选
[options.data.size] string => 组件大小, sm/lg控制整体尺寸,smw/mdw/lgw控制宽度大小
[options.data.width] number => 组件宽度
[options.data.limit] number => 在选项过多的时候可能会有性能问题,limit 用来限制显示的数量

change 选择项改变时触发Event

Name Type Description
sender object 事件发送对象
selected object 改变后的选择项
key string 数据项的键
value string/number 改变后的选择值

search 在搜索框输入的值变化后发生Event

Name Type Description
sender object 事件发送对象
value string/number 输入的value

select 选择某一项时触发Event

Name Type Description
sender object 事件发送对象
selected object 当前选择项