Select 下拉选择

Select 组件可以内联 Option 或 OptionGroup 组件使用。

示例

尺寸

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

<template>
<article>
  <veui-select
    v-model="license"
    class="select"
    ui="l"
    :options="options"
  />
  <veui-select
    v-model="license"
    class="select"
    :options="options"
  />
  <veui-select
    v-model="license"
    class="select"
    ui="s"
    :options="options"
  />
  <veui-select
    v-model="license"
    class="select"
    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>
.select {
  max-width: 120px;
  margin-right: 10px;
}
</style>

内联选项

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

Selected: -

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

在 GitHub 上编辑此示例编辑

<template>
<article>
  <veui-select
    v-model="item"
    class="select"
    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>
.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 属性来开启多选模式。

Searchable

可使用 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

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`xs`	超小尺寸样式。
`s`	小尺寸样式。
`m`	中尺寸样式。
`l`	大尺寸样式。

options

Array<Object>

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

名称	类型	描述
`label`	`string`	选项的文字说明。
`value`	`*`	选项对应的值。
`options`	`Array<Object>`	选项的子选项数组，数组项类型同 `options` 属性数组项。
`disabled`	`boolean`	选项是否为禁用。

value

Array<*>|*

v-model

已选值。

multiple boolean false 是否允许多选。

max number - 多选时允许选择的项目上限。

placeholder string select.placeholder 未选择时的占位文本。

clearable boolean false 是否可以清除已选内容。

searchable boolean false 是否允许搜索选项。

show-select-all boolean false 多选模式下是否显示“全选”选项。

expanded

boolean

false

.sync

下拉菜单是否展开。

disabled boolean false 是否为禁用状态。

readonly boolean false 是否为只读状态。

composition boolean false 是否感知搜索框输入法输入过程的值。

overlay-class string | Array | Object - 参考 Overlay 组件的 overlay-class 属性。

overlay-style string | 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`	`*`	已选项值。
`select`	`function(value: *): void`	用于切换已选项。
`expanded`	`boolean`	下拉菜单是否展开。
`toggle`	`function(force?: boolean): void`	用于切换下拉菜单展开状态。

after 选项列表后的内容。无默认内容。插槽参数同 before 插槽。

label

下拉按钮文本区域。

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

名称	类型	描述
`label`	`string`	已选项文本。
`value`	`*`	已选项值。
`selected`	`boolean`	是否已选择某个值。
`disabled`	`boolean`	选项是否禁用。

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

group-label

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

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

名称	类型	描述
`label`	`string`	选项组标题文本。
`disabled`	`boolean`	选项组是否禁用。

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

option-label

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

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

名称	类型	描述
`label`	`string`	选项文本。
`value`	`*`	选项值。
`selected`	`boolean`	是否已选择。
`disabled`	`boolean`	选项是否禁用。

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

option

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

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

名称	类型	描述
`label`	`string`	选项文本。
`value`	`*`	选项值。
`selected`	`boolean`	是否已选择。
`disabled`	`boolean`	选项是否禁用。

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

trigger

整个下拉触发区域。

默认内容：下拉按钮。

名称	类型	描述
`attrs`	`Object`	需要输出到触发元素上的属性，包括 `aria-*` / `disabled` 等，可以使用 `v-bind="attrs"` 统一进行输出。
`handlers`	`Object`	需要绑定到触发元素上的事件监听器，可以使用 `v-on="handlers"` 统一进行输出。用于绑定 `handlers` 的元素需要支持获取焦点，以使各种键盘交互依然可以正常触发。
`value`	`*`	已选项值。
`select`	`function(value: *): void`	用于切换已选项。
`expanded`	`boolean`	下拉菜单是否展开。
`toggle`	`function(force?: boolean): void`	用于切换下拉菜单展开状态。

selected

选中值渲染区域。

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

名称	类型	描述
`label`	`string`	选项文本。
`value`	`*`	选项值。
`selected`	`boolean`	是否已选择。
`disabled`	`boolean`	选项是否禁用。

名称	类型	描述
`selected`	`Array<Object>`	选中项数据的数组。

no-data 用于定义当搜索无数据时要展现的内容。

事件

名称	描述
`input`	输入搜索关键词时触发。回调参数为 `(value: string)`，`value` 为输入框的 `value` 值。
`change`	`v-model` 选中状态变化后触发，回调参数为 `(value: *)`。`value` 为当前已选项 `value` 字段的值。
`toggle`	下拉菜单展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。
`clear`	点击清除按钮时触发。
`afteropen`	下拉打开完成之后触发。

全局配置

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

@@ 开头的值表示引用多语言配置中的相应字段。

图标

名称	描述
`expand`	展开浮层。
`collapse`	收起浮层。

自定义样式

名称	类型	默认值	描述
`--dls-dropdown-max-display-items`	`<integer>`	`8`	下拉选项同时显示的最大项目数，下拉框的最大高度将由此计算得出。需要通过 `overlay-style` 属性来设置。

在 GitHub 上编辑此页面编辑