VEUI

VEUI on GitHub
中文

Select

Demos

Size variants

Available size variants for the ui prop: xs / s / m / l.

请选择
请选择
请选择
请选择
Edit this demo on GitHubEdit
<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>

Embedded options

Can be used with embedded OptionGroups & Options.

Pick one...

Selected: -

clearable can be used to allow selected values to be discarded for Select. Set position of the embedded OptionGroups to popup to display children options inside a popup menu.

Edit this demo on GitHubEdit
<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 options

Use the searchable prop to make options searchable.

请选择
Edit this demo on GitHubEdit
<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 selections

Use the multiple prop to enable multiple selections.

请选择
0/5

Use max to specify the max number of options that can be selected. The searchable prop can also be used here to make options searchable.

Edit this demo on GitHubEdit
<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>

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
xsExtra small.
sSmall.
mMedium.
lLarge.
optionsArray<Object>-

The list of options with the option type being {label, value, options, disabled, ...}.

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
optionsArray<Object>=The child options of current option. The item type is the same as the items of the options prop.
disabledboolean=Whether the option is disabled.
valueArray<*>|*-

v-model

The value of the selected option.

multiplebooleanfalseWhether users can select multiple items.
maxnumber-The max items users can select.
placeholderstringselect.placeholderPlaceholder text when no option is selected.
clearablebooleanfalseWhether the select is clearable.
searchablebooleanfalseWhether the options are searchable.
show-select-allbooleanfalseWhether to display the “Select All” option in multi-select mode.
expandedboolean=false

.sync

Whether the dropdown menu is expanded.

disabledboolean=falseWhether the select is disabled.
readonlyboolean=falseWhether the select is read-only.
overlay-classstring | Array | Object=-See the overlay-class prop of the Overlay component.
overlay-stylestring | Array | Object=-See the overlay-style prop of the Overlay component.
match(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>-Custom highlighting logic, case insensitive by default. See Autocomplete.
filter(item, keyword, { ancestors, offsets }) => boolean-Custom hit logic, case insensitive by default. See Autocomplete.

Slots

NameDescription
defaultThe content of the options dropdown layer. Can be used to place Options or OptionGroupss when the options prop is not specified.
before

The content before the options in the dropdown layer. No default content.

NameTypeDescription
value*The value of the selected option.
selectfunction(value: *): voidTo select a specified value.
expandedbooleanWhether the dropdown menu is expanded or not.
togglefunction(force?: boolean): voidUsed to toggle the expanded state of the dropdown menu.
afterThe content after the options in the dropdown layer. No default content.
label

The content of the select button. Displays the label of selected option or the text content of the selected embedded option by default.

NameTypeDescription
labelstringThe descriptive label of the selected option.
value*The value of the selected option.
selectedbooleanWhether the select has a selected value.
disabledboolean=Whether the option is disabled.

Additionally, custom properties apart from the listed ones will also be passes into the slot props object via v-bind.

group-label

The label text of each option group (option with child options). Displays the label of the option by default.

NameTypeDescription
labelstringThe descriptive label of the option group.
disabledboolean=Whether the option group is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the slot props object via v-bind.

option-label

The label text of each option (option without child options). Displays the label of the option by default.

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
selectedbooleanWhether the the option is selected.
disabledboolean=Whether the option is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the slot props object via v-bind.

option

The entire content area of each option (option without child options). Displays the default content of Options component by default.

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
selectedbooleanWhether the the option is selected.
disabledboolean=Whether the option is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the slot props object via v-bind.

trigger

The entire drop-down trigger area. Displays the select input by default.

NameTypeDescription
attrsObjectAttributes that need to be output to the trigger element, including aria-* / disabled, etc., can be output using v-bind="attrs".
value*The value of the selected option.
selectfunction(value: *): voidTo select a specified value.
handlersObject

Event listeners that need to be bound to the trigger element, can be output using v-on="handlers".

expandedbooleanWhether the dropdown menu is expanded or not.
togglefunction(force?: boolean): voidUsed to toggle the expanded state of the dropdown menu.

Events

NameDescription
change

v-model

Triggers when the selected option changed. The callback parameter list is (value: *) and value is the value of the selected option.

toggleTriggered when the expanded state is going to change. The callback parameter list is (expanded: boolean). expanded denotes whether the dropdown menu is to be expanded or collapsed.

Configs

KeyTypeDefaultDescription
select.placeholderstring@@select.placeholderThe placeholder text when no option is selected.

Icons

NameDescription
expandExpand the dropdown panel.
collapseCollapse the dropdown panel.
Edit this page on GitHubEdit
© Baidu, Inc. 2023