Select 下拉选择

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

示例

尺寸

可选的尺寸 ui 属性值：large/small/tiny/micro。

<template>
<article>
  <veui-select
    v-model="license"
    ui="large"
    :options="options"
  />
  <veui-select
    v-model="license"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="small"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="tiny"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="micro"
    :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>

内联模式

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

Selected: -

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

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

过滤选项

使用 filter 属性来指定过滤选项的逻辑。

可以使用 before 插槽在选项列表最前面插入自定义内容。

<template>
<article>
  <veui-select
    v-model="license"
    :filter="filter"
    :options="options"
  >
    <div slot="before">
      <veui-input
        v-model="keyword"
        class="filter"
        ui="tiny"
      />
    </div>
  </veui-select>
</article>
</template>

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

export default {
  components: {
    'veui-select': Select,
    'veui-input': Input
  },
  data () {
    return {
      keyword: '',
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        }
      ],
      filter: ({ label }) => {
        return label.toLowerCase().indexOf(this.keyword.toLowerCase()) !== -1
      }
    }
  }
}
</script>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`alt`	备选样式。
`large`	大尺寸样式。
`small`	小尺寸样式。
`tiny`	特小尺寸样式。
`micro`	微型样式。

options

Array<Object>=

-

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

名称	类型	描述
`label`	`string`	选项的文字说明。
`value`	`*`	选项对应的值。
`disabled`	`boolean=`	选项是否为禁用。

value

*

v-model

已选值。

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

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

filter function - 选项过滤函数，签名为 function(option: Object): boolean。option 类型与 options 属性中的项相同。返回值表示是否将结果保留在下拉选项列表中。

disabled boolean false 是否为禁用状态。

readonly boolean false 是否为只读状态。

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

插槽

名称描述

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

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

after 选项列表后的内容。无默认内容。

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 进行绑定到作用域参数上。

事件

名称	描述
`change`	`v-model` 选中状态变化后触发，回调参数为 `(value: *)`。`value` 为当前已选项 `value` 字段的值。

全局配置

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

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

图标

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