下拉选择 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];
    }
});

数据绑定

如果同时设置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
    }
});

禁用某一项，禁用组件

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

综合示例

<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={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} 
            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,
        separator: ',',
        showSeparator: '、',
        selectedClose: false,
        canSelectAll: true,
        canSearch: true,
        isCaseSensitive: false,
        value: '',
        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: '新鲜水果'}
        ]
    },
});

API

KLSelect

KLSelect

change 选择项改变时触发Event

select 选择某一项时触发Event