代码演示

基本形式

<ui.select source={source} lang="en-US" />

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

表单项

在表单中使用

<ui.form>
    <form.item cols="12" title="用户名" hint="用户名的用途">
        <ui.select source={['简单选项1', '简单选项2', '简单选项3']} />
    </form.item>
</ui.form>

selected, value和key

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

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

<ui.form>
    <form.item cols=4>
        <ui.select source={source} selected={selected} />
    </form.item>
    <form.item cols=4>
        <ui.select source={source} value=2 />
    </form.item>
    <form.item cols=4>
        <ui.select source={source} key="name" value="选项3" />
    </form.item>
</ui.form>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {id: 1, name: '选项1'},
            {id: 2, name: '选项2'},
            {id: 3, name: '选项3'}
        ]
    },
    config: function() {
        this.data.selected = this.data.source[0];
    }
});

禁用某一项，禁用组件

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

<ui.form>
    <form.item cols=6>
        <ui.select source={source} />
    </form.item>
    <form.item cols=6>
        <ui.select source={source} disabled />
    </form.item>
</ui.form>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3（禁用）', disabled: true},
            {name: '选项4（禁用）', disabled: true, tip: 'tip'},
            {name: '选项5（禁用）', disabled: true, tip: 'tip', placement: 'bottom'}
        ]
    }
});

分隔线

<ui.form>
    <form.item cols=12>
        <ui.select source={source} />
    </form.item>
</ui.form>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {divider: true},
            {name: '选项3（禁用）', disabled: true}
        ]
    }
});

设置或取消默认项

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

<ui.form>
    <form.item cols=6>
        <ui.select source={source} placeholder="全部" />
    </form.item>
    <form.item cols=6>
        <ui.select source={source} placeholder="" />
    </form.item>
</ui.form>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

远程数据

<ui.select service={@(this.service)} value="2" />

var component = new NEKUI.Component({
    template: template,
    service: {
        getList: function(params, success) {
            this.request({
                url: '../../data/list.json',
                method: 'get',
                type: 'json',
                data: params,
                success: function(json) {
                     this.$update('source', json.result);
                 }.bind(this)
            });
        }
    }
});

数据绑定

<ui.select source={source} selected={selected} value={value} /> 当前选择项：{selected ? selected.name : 'undefined'}，当前选择值：{value || 'undefined'}

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {id: 1, name: '选项1'},
            {id: 2, name: '选项2'},
            {id: 3, name: '选项3'}
        ]
    }
});

事件

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

<ui.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: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

综合示例

<div class=g-row>
    <ui.button title="是否多选" on-click={this.toggleMultiple(multiple)}/>
    {multiple?'true:可多选':'false:不可多选'}
</div>
<div class=g-row>
    <ui.button title="是否有全选" on-click={this.toggleCanSelectAll(canSelectAll)}/>
    {canSelectAll?'true:有':'false:无'}
</div>
<div class=g-row>
    <ui.button title="是否选中关闭" on-click={this.toggleSelectedClose(selectedClose)}/>
    {canSelectAll?'true:有':'false:无'}
</div>
<div class=g-row>
    展示字段分隔符：
    <ui.input value={showSeparator}/>
    value分隔符：
    <ui.input value={separator}/>
</div>
<div class=g-row>
    最多展示多少个选项：
    <ui.input value={limit}/>
</div>
<div class=g-row>
    <ui.button title="是否可搜索" on-click={this.toggleCanSearch(canSearch)}/>
    {canSearch?'true:可搜索':'false:不可搜索'}
</div>
<div class=g-row>
    <ui.button title="区分大小写" on-click={this.toggleSensitive(isCaseSensitive)}/>
    {isCaseSensitive?'true:区分大小写':'false:不区分大小写'}
</div>
<ui.select source={source} multiple={multiple} canSearch={canSearch}
            showSeparator={showSeparator} separator={separator}
            selectedClose={selectedClose} canSelectAll={canSelectAll}
            isCaseSensitive={isCaseSensitive} searchInputPlaceholder="请输入"
            value={value} limit={limit}/>
<div class=g-row>
    选中值：{value}
</div>

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: '选项A'},{name: '选项a'},{name: '选项B'},{name: '选项b'},{name: '选项C'},{name: '选项c'},
            {name: '选项D'},{name: '选项d'},{name: '选项E'},{name: '选项e'},{name: '选项F'},{name: '选项f'},
            {name: '选项G'},{name: '选项g'},{name: '选项H'},{name: '选项h'},{name: '选项I'},{name: '选项i'},
            {name: '选项J'},{name: '选项j'},{name: '选项K'},{name: '选项k'},{name: '选项L'},{name: '选项l'},
            {name: '选项M'},{name: '选项m'},{name: '选项N'},{name: '选项n'},{name: '选项O'},{name: '选项o'},
            {name: '选项P'},{name: '选项p'},{name: '选项Q'},{name: '选项q'},{name: '选项R'},{name: '选项r'},
            {name: '选项S'},{name: '选项s'},{name: '选项T'},{name: '选项t'},{name: '选项U'},{name: '选项u'},
            {name: '选项V'},{name: '选项v'},{name: '选项W'},{name: '选项w'},{name: '选项X'},{name: '选项x'},
            {name: '选项Y'},{name: '选项y'},{name: '选项Z'}
        ]
    },
    toggleSelectedClose: function(selectedClose){
        this.data.selectedClose = !selectedClose;
    },
    toggleCanSelectAll: function(canSelectAll){
        this.data.canSelectAll = !canSelectAll;
    },
    toggleMultiple: function(multiple){
        this.data.multiple = !multiple;
    },
    toggleCanSearch: function(CanSearch){
        this.data.canSearch = !CanSearch;
    },
    toggleSensitive: function(isCaseSensitive){
        this.data.isCaseSensitive = !isCaseSensitive;
    }
});

API

Classes

• Select

Functions

• config()
• select(item) 选择某一项(item) 选择某一项) ⇒ void

Events

• “change 选择项改变时触发”
• “select 选择某一项时触发”

Select

Kind: global classExtend: Dropdown

new Select()

config()

Kind: global functionAccess: protected

select(item) 选择某一项(item) ⇒ void

Kind: global functionAccess: public

“change 选择项改变时触发”

Kind: event emittedProperties

“select 选择某一项时触发”

Kind: event emittedProperties