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

表示当前选择项，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>

分隔线

<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 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>

API

Classes

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

Events

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

Select

Kind: global classExtend: Dropdown

new Select()

Kind: global functionAccess: protected

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

Kind: global functionAccess: public

“change 选择项改变时触发”

Kind: event emittedProperties