Select 下拉选择

示例

尺寸

可选的尺寸 ui 属性值：xs / s / m / l。

请选择
请选择
请选择
请选择
在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-select
    v-model="license"
    ui="l"
    :options="options"
  />
  <veui-select
    v-model="license"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="s"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="xs"
    :options="options"
  />
</article>
</template>

<script>
import { Select } from 'veui'

export default {
  components: {
    'veui-select': Select
  },
  data () {
    return {
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.veui-select {
  max-width: 120px;
  margin-right: 10px;
}
</style>

内联模式

Select 组件内支持内联使用 OptionGroup 及 Option 组件来代替 options 属性。

Pick one...

Selected: -

可以使用 clearable 属性将 Select 组件设置为允许删除已选值的模式。将 OptionGroup 的 position 属性设置为 popup 后可以让子选项在新的浮动子菜单中展现。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-select
    v-model="item"
    placeholder="Pick one..."
    clearable
  >
    <veui-option-group
      label="Editors"
      position="popup"
    >
      <veui-option
        value="vscode"
        label="VSCode"
      />
      <veui-option
        value="sublime"
        label="SublimeText"
      />
      <veui-option
        value="atom"
        label="Atom"
      />
    </veui-option-group>
    <veui-option-group
      label="Browsers"
      position="popup"
    >
      <veui-option-group
        label="Desktop"
        position="popup"
      >
        <veui-option
          value="ie"
          label="IE"
        />
        <veui-option
          value="edge"
          label="Edge"
        />
        <veui-option
          value="firefox"
          label="Firefox"
        />
        <veui-option
          value="chrome"
          label="Chrome"
        />
      </veui-option-group>
      <veui-option-group
        label="Mobile"
        position="popup"
      >
        <veui-option
          value="ios_safari"
          label="iOS Safari"
        />
        <veui-option
          value="android"
          label="Android Browser"
        />
        <veui-option
          value="android_chrome"
          label="Chrome for Android"
        />
      </veui-option-group>
    </veui-option-group>
  </veui-select>
  <p>Selected: {{ item || '-' }}</p>
</article>
</template>

<script>
import { Select, OptionGroup, Option } from 'veui'

export default {
  components: {
    'veui-select': Select,
    'veui-option-group': OptionGroup,
    'veui-option': Option
  },
  data () {
    return {
      item: null
    }
  }
}
</script>

<style lang="less" scoped>
.veui-select {
  width: 180px;
}
</style>

搜索选项

使用 searchable 属性来开启选项搜索。

请选择
在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-select
    v-model="license"
    :options="options"
    searchable
  />
</article>
</template>

<script>
import { Select } from 'veui'

export default {
  components: {
    'veui-select': Select
  },
  data () {
    return {
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        }
      ]
    }
  }
}
</script>

多选

使用 multiple 属性来开启多选模式。

请选择
0/5

可使用 max 属性控制选中选项的最大数量。这种场景下也可以使用 searchable 属性控制是否允许搜索选项。

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-checkbox v-model="searchable">
      Searchable
    </veui-checkbox>
  </section>
  <section>
    <veui-select
      v-model="license"
      multiple
      :options="options"
      :max="5"
      :searchable="searchable"
    />
  </section>
</article>
</template>

<script>
import { Select, Checkbox } from 'veui'

export default {
  components: {
    'veui-select': Select,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      searchable: false,
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        },
        {
          label: 'GPL 3.0',
          value: 'gpl3'
        },
        {
          label: 'AGPL 3.0',
          value: 'agpl3'
        },
        {
          label: 'LGPL 2.1',
          value: 'lgpl2'
        },
        {
          label: 'MPL 2.0',
          value: 'mpl2'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

自定义已选项展示

使用 label 插槽来自定义下拉关闭时已选项如何展示。

使用 selected 插槽来自定义已选项如何展示，和下拉是否关闭无关。

下拉关闭时省略显示已选项

请选择

始终省略显示已选项

请选择
在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <h4>下拉关闭时省略显示已选项</h4>
    <veui-select
      v-model="license"
      multiple
      :options="options"
    >
      <template
        #label="{ selected }"
      >{{ selected[0].label }}等{{ selected.length }}个{{ ' ' }}</template>
    </veui-select>
  </section>
  <section>
    <h4>始终省略显示已选项</h4>
    <veui-select
      v-model="license"
      multiple
      :options="options"
    >
      <template
        #selected="{ selected }"
      >{{ selected[0].label
      }}{{ selected.length > 1 ? `等${selected.length}个` : '' }}</template>
    </veui-select>
  </section>
</article>
</template>

<script>
import { Select } from 'veui'

export default {
  components: {
    'veui-select': Select
  },
  data () {
    return {
      searchable: false,
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        },
        {
          label: 'GPL 3.0',
          value: 'gpl3'
        },
        {
          label: 'AGPL 3.0',
          value: 'agpl3'
        },
        {
          label: 'LGPL 2.1',
          value: 'lgpl2'
        },
        {
          label: 'MPL 2.0',
          value: 'mpl2'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

API

属性

名称类型默认值描述
uistring=-

预设样式。

值描述
xs超小尺寸样式。
s小尺寸样式。
m中尺寸样式。
l大尺寸样式。
optionsArray<Object>-

选项列表，项目的类型为 {label, value, options, disabled, ...}。

名称类型描述
labelstring选项的文字说明。
value*选项对应的值。
optionsArray<Object>=选项的子选项数组，数组项类型同 options 属性数组项。
disabledboolean=选项是否为禁用。
valueArray<*>|*-

v-model

已选值。

multiplebooleanfalse是否允许多选。
maxnumber-多选时允许选择的项目上限。
placeholderstringselect.placeholder未选择时的占位文本。
clearablebooleanfalse是否可以清除已选内容。
searchablebooleanfalse是否允许搜索选项。
filterfunction-选项过滤函数，签名为 function(option: Object): boolean。option 类型与 options 属性中的项相同。返回值表示是否将结果保留在下拉选项列表中。
expandedboolean=false

.sync

下拉菜单是否展开。

disabledboolean=false是否为禁用状态。
readonlyboolean=false是否为只读状态。
overlay-classstring | Array | Object=-参考 Overlay 组件的 overlay-class 属性。
overlay-stylestring | Array | Object=-参考 Overlay 组件的 overlay-style 属性。
match(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>-支持自定义高亮逻辑， 默认大小写不敏感，参考 Autocomplete。
filter(item, keyword, { ancestors, offsets }) => boolean-支持自定义搜索命中逻辑，参考 Autocomplete。

插槽

名称描述
default选项列表的内容。在没有指定 options 属性时，可以用来直接内联 Option 或 OptionGroup。
before

选项列表前的内容。无默认内容。

名称类型描述
value*已选项值。
selectfunction(value: *): void用于切换已选项。
expandedboolean下拉菜单是否展开。
togglefunction(force?: boolean): void用于切换下拉菜单展开状态。
after选项列表后的内容。无默认内容。作用域参数同 before 插槽。
label

下拉按钮文本区域。

默认内容：已选项对应的 label 属性值或内联模式下已选项的文本内容。

名称类型描述
labelstring已选项文本。
value*已选项值。
selectedboolean是否已选择某个值。
disabledboolean=选项是否禁用。

另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到作用域参数上。

group-label

下拉选项组（带 options 的选项）的标题文本区域。

默认内容：选项的 label 属性值。

名称类型描述
labelstring选项组标题文本。
disabledboolean=选项组是否禁用。

另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到作用域参数上。

option-label

下拉选项（不带 options 的选项）的文本区域。

默认内容：选项的 label 属性值。

名称类型描述
labelstring选项文本。
value*选项值。
selectedboolean是否已选择。
disabledboolean=选项是否禁用。

另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到作用域参数上。

option

可供选择的下拉选项的整个区域。

默认内容：Option 内的组件默认结构。

名称类型描述
labelstring选项文本。
value*选项值。
selectedboolean是否已选择。
disabledboolean=选项是否禁用。

另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到作用域参数上。

trigger

整个下拉触发区域。

默认内容：下拉按钮。

名称类型描述
attrsObject需要输出到触发元素上的属性，包括 aria-* / disabled 等，可以使用 v-bind="attrs" 统一进行输出。
handlersObject

需要绑定到触发元素上的事件监听器，可以使用 v-on="handlers" 统一进行输出。

value*已选项值。
selectfunction(value: *): void用于切换已选项。
expandedboolean下拉菜单是否展开。
togglefunction(force?: boolean): void用于切换下拉菜单展开状态。
selected

选中值渲染区域。

默认内容：单选时渲染选中项目的标签；多选时将每个选中项目的标签渲染为 Tag 组件。

名称类型描述
labelstring选项文本。
value*选项值。
selectedboolean是否已选择。
disabledboolean=选项是否禁用。
名称类型描述
selectedArray<Object>选中项数据的数组。

事件

名称描述
input输入搜索关键词时触发。回调参数为 (value: string)，value 为输入框的 value 值。
change

v-model

选中状态变化后触发，回调参数为 (value: *)。value 为当前已选项 value 字段的值。

toggle下拉菜单展开状态切换时触发，回调参数为 (expanded: boolean)。expanded 表示操作将触发下拉菜单展开还是收起。

全局配置

配置项类型默认值描述
select.placeholderstring@@select.placeholder未选择时的占位内容。

图标

名称描述
expand展开浮层。
collapse收起浮层。
在 GitHub 上编辑此页编辑