.c-select(
role="combobox"
aria-autocomplete="list"
aria-haspopup="true"
:aria-expanded="isOpen"
aria-disabled="disabled"
:tabindex="disabled ? -1 : 0"
:class="classNames"
@keydown="onKeyDown"
@keydown.tab="onTabOut"
@click="toggleOpen"
)
i.c-select__caret
.c-select__selection
.c-select__placeholder(
v-if="showPlaceholder"
) {{ placeholder }}
.c-select__value(
v-if="!multiple && selectedOptions.length"
) {{ selectedOptions[0].label }}
.c-chip(
v-if="multiple && index <= maxChipCount"
v-for="(option, index) in selectedOptions"
:key="index"
:class=`{
'is-disabled': option.disabled,
'is-closeable': index < maxChipCount
}`
)
slot(name="selection" :option="option")
span(v-if="index < maxChipCount") {{ option.label }}
span(v-else) {{ maxChipText }}
.c-chip__close(
@click.stop="unselectOption(option)"
v-if="index < maxChipCount"
)
c-icon(name="x" valign="middle")
.c-select__input(
v-show="showInput"
:class="multiple ? 'is-multiple' : 'is-single'"
)
input(
ref="input"
v-model="query"
autocomplete="off"
@click.stop="noop"
@blur="$el.focus()"
@keydown.delete="onDeleteKey"
@input="onSearchInput"
)
c-portal(:aria-hidden="'' + !isOpen")
transition(name="fade-in-down")
.c-select__menu(
role="menu"
aria-activedescendant
v-show="isOpen"
:style="menuStyle"
:class="size ? 'is-'+size : ''"
ref="menu"
)
slot(
name="no-match"
v-if="autocomplete && !filteredOptions.length"
)
.c-select__empty 无匹配选项
c-option(
ref="$options"
v-for="(option, index) in filteredOptions"
:key="index"
:label="option.label"
:isActive="activeOption == option"
:isSelected="selectedOptions.indexOf(option) > -1"
:disabled="option.disabled"
:option="option"
)
slot(
name="menu-item"
:label="option.label"
:isActive="activeOption == option"
:isSelected="selectedOptions.indexOf(option) > -1"
:disabled="option.disabled"
:index="index"
:option="option"
)