下拉选择 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。其中selected和value是联动的，当一项变化时会同时改变另一项。

<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)
            });
        }
    }
});

数据绑定

如果同时设置selected和value的初始化值，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

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`	当前选择项

toggle 下拉关闭还是打开Event

Name	Type	Description
sender	`object`	事件发送对象
open	`object`	下拉状态