VEUI

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

示例

样式

可供选用的样式 ui 属性值： primary / text。

<template>
<article>
  <veui-dropdown
    class="dropdown"
    label="Primary"
    ui="primary"
    :options="options"
  />
  <veui-dropdown
    class="dropdown"
    label="Default"
    :options="options"
  />
  <veui-dropdown
    class="dropdown"
    label="Normal"
    ui="normal"
    :options="options"
  />
  <veui-dropdown
    class="dropdown"
    label="Text"
    ui="text"
    :options="options"
  />
</article>
</template>

<script>
import { Dropdown } from 'veui'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      options: [
        {
          label: '新建',
          value: 'create'
        },
        {
          label: '编辑',
          value: 'edit'
        },
        {
          label: '删除',
          value: 'remove'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.dropdown {
  & + & {
    margin-left: 1em;
  }
}
</style>

尺寸

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

在 GitHub 上编辑此示例编辑

<template>
<article>
  <veui-dropdown
    class="dropdown"
    label="Action"
    ui="xs"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    class="dropdown"
    label="Action"
    ui="s"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    class="dropdown"
    label="Action"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    class="dropdown"
    label="Action"
    ui="l"
    :options="operations"
    @click="alert"
  />
</article>
</template>

<script>
import { Dropdown, toast } from 'veui'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      operations: [
        {
          label: 'Edit',
          value: 'edit'
        },
        {
          label: 'Delete',
          value: 'delete'
        },
        {
          label: 'Save',
          value: 'save'
        },
        {
          label: 'Publish',
          value: 'publish'
        }
      ]
    }
  },
  methods: {
    alert (e) {
      toast.info(e)
    }
  }
}
</script>

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

内联选项

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

将 OptionGroup 的 position 属性设置为 popup 后可以让子选项在新的浮动子菜单中展现。

在 GitHub 上编辑此示例编辑

<template>
<veui-dropdown
  label="Files"
  @click="alert"
>
  <veui-option-group>
    <veui-option
      value="new-file"
      label="New File"
    />
    <veui-option
      value="new-window"
      label="New Window"
    />
  </veui-option-group>
  <veui-option-group>
    <veui-option
      value="open"
      label="Open…"
    />
    <veui-option
      value="open-workspace"
      label="Open Workspace…"
    />
    <veui-option-group
      label="Open Recent"
      position="popup"
    >
      <veui-option-group>
        <veui-option
          value="reopen"
          label="Reopen Closed Editor"
        />
      </veui-option-group>
      <veui-option-group>
        <veui-option
          value="open:~/Dropdown.vue"
          label="~/Dropdown.vue"
        />
        <veui-option
          value="open:~/Select.vue"
          label="~/Select.vue"
        />
      </veui-option-group>
    </veui-option-group>
  </veui-option-group>
</veui-dropdown>
</template>

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

export default {
  components: {
    'veui-dropdown': Dropdown,
    'veui-option-group': OptionGroup,
    'veui-option': Option
  },
  methods: {
    alert (e) {
      toast.info(e)
    }
  }
}
</script>

可搜索

使用 searchable 属性使组件支持搜索并高亮显示符合条件的选项。

在 GitHub 上编辑此示例编辑

<template>
<article>
  <veui-dropdown
    class="dropdown"
    label="Operation"
    placeholder="Type to search..."
    searchable
    :options="options"
  />
</article>
</template>

<script>
import { Dropdown } from 'veui'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      options: [
        {
          label: '>',
          value: '>'
        },
        {
          label: '>>',
          value: '>>'
        },
        {
          label: '<',
          value: '<'
        },
        {
          label: '|',
          value: '|'
        },
        {
          label: '~/.bash_profile',
          value: '~/.bash_profile'
        },
        {
          label: 'alias',
          value: 'alias'
        },
        {
          label: 'cd',
          value: 'cd'
        },
        {
          label: 'cd ..',
          value: 'cd ..'
        },
        {
          label: 'cp',
          value: 'cp'
        },
        {
          label: 'Wildcards (*)',
          value: 'Wildcards (*)'
        },
        {
          label: 'env',
          value: 'env'
        },
        {
          label: 'env | grep VARIABLE',
          value: 'env | grep VARIABLE'
        },
        {
          label: 'export',
          value: 'export'
        },
        {
          label: 'grep',
          value: 'grep'
        },
        {
          label: 'grep -i',
          value: 'grep -i'
        },
        {
          label: 'grep -R',
          value: 'grep -R'
        },
        {
          label: 'grep -Rl',
          value: 'grep -Rl'
        },
        {
          label: 'HOME',
          value: 'HOME'
        },
        {
          label: 'ls',
          value: 'ls'
        },
        {
          label: 'mkdir',
          value: 'mkdir'
        },
        {
          label: 'mv',
          value: 'mv'
        },
        {
          label: 'nano',
          value: 'nano'
        },
        {
          label: 'PATH',
          value: 'PATH'
        },
        {
          label: 'pwd',
          value: 'pwd'
        },
        {
          label: 'rm',
          value: 'rm'
        },
        {
          label: 'rm -r',
          value: 'rm -r'
        },
        {
          label: 'sed',
          value: 'sed'
        },
        {
          label: 'sort',
          value: 'sort'
        },
        {
          label: 'standard error',
          value: 'standard error'
        },
        {
          label: 'source',
          value: 'source'
        },
        {
          label: 'standard input',
          value: 'standard input'
        },
        {
          label: 'standard output',
          value: 'standard output'
        },
        {
          label: 'touch',
          value: 'touch'
        },
        {
          label: 'uniq',
          value: 'uniq'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.dropdown {
  margin-left: 1em;
}
</style>

禁用

使用数据源中的 disabled 属性来禁用下拉项。

在 GitHub 上编辑此示例编辑

<template>
<article>
  <veui-dropdown
    class="dropdown"
    label="Operation"
    disabled
    ui="text"
    :options="options"
  />
  <veui-dropdown
    class="dropdown"
    label="Operation"
    disabled
    :options="options"
  />
  <veui-dropdown
    class="dropdown"
    label="Operation"
    disabled
    ui="primary"
    :options="options"
  />
  <veui-dropdown
    class="dropdown"
    label="Operation"
    disabled
    split
    :options="options"
  />
  <veui-dropdown
    class="dropdown"
    label="Operation"
    disabled
    split
    ui="primary"
    :options="options"
  />
</article>
</template>

<script>
import { Dropdown } from 'veui'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      options: [
        {
          label: '新建',
          value: 'create'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.dropdown {
  margin-left: 1em;
}
</style>

触发时机与分离按钮

使用 trigger 属性指定展开下拉菜单的时机，使用 split 属性来使命令按钮与下拉按钮分离。

在 GitHub 上编辑此示例编辑

<template>
<article>
  <div class="container">
    <veui-dropdown
      class="dropdown"
      label="Operation"
      split
      trigger="hover"
      :options="options"
    />
    <veui-dropdown
      class="dropdown"
      label="Operation"
      split
      trigger="click"
      :options="options"
    />
    <veui-dropdown
      class="dropdown"
      label="Operation"
      ui="primary"
      split
      trigger="hover"
      :options="options"
    />
    <veui-dropdown
      class="dropdown"
      label="Operation"
      ui="primary"
      split
      trigger="click"
      :options="options"
    />
  </div>
  <div class="container">
    <veui-dropdown
      class="dropdown"
      label="Operation"
      trigger="hover"
      :options="options"
    />
    <veui-dropdown
      class="dropdown"
      label="Operation"
      trigger="click"
      :options="options"
    />
    <veui-dropdown
      class="dropdown"
      label="Operation"
      ui="text"
      split
      trigger="hover"
      :options="options"
    />
    <veui-dropdown
      class="dropdown"
      label="Operation"
      ui="text"
      split
      trigger="click"
      :options="options"
    />
  </div>
</article>
</template>

<script>
import { Dropdown } from 'veui'

export default {
  components: {
    'veui-dropdown': Dropdown
  },
  data () {
    return {
      options: [
        {
          label: '新建新建新建新建新建新建新建',
          value: 'create'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        },
        {
          label: '编辑',
          value: 'edit',
          disabled: true
        },
        {
          label: '删除',
          value: 'remove'
        }
      ]
    }
  }
}
</script>

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

.dropdown {
  margin-left: 1em;
}
</style>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`primary`	主题色样式。
`text`	文字样式。
`xs`	特小尺寸样式。
`s`	小尺寸样式。
`m`	中等尺寸样式。
`l`	大尺寸样式。

options

Array<Object>

[]

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

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

label string - 下拉按钮的描述文本。

trigger string 'click' 触发下拉框展开的时机，可选值为 'click' / 'hover'。

split boolean false 是否将下拉按钮分离为指令按钮和切换下拉按钮两部分。

expanded

boolean

false

.sync

下拉菜单是否展开。

disabled boolean false 是否为禁用状态。

searchable boolean false 是否可搜索。

placeholder string - 搜索框的输入占位符。

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

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

match (item, keyword, { ancestors }) => boolean | Array<[number, number]> - 支持自定义高亮逻辑，默认大小写不敏感，参考 Autocomplete。

filter (item, keyword, { ancestors, offsets }) => boolean - 支持自定义搜索命中逻辑，参考 Autocomplete。

插槽

名称描述

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

label

下拉按钮文本区域。

默认内容：label 属性值。

名称	类型	描述
`label`	`string`	`label` 属性对应文本。

group-label

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

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

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

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

option-label

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

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

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

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

option

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

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

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

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

trigger

整个下拉触发区域。

默认内容：下拉按钮。

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

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

事件

名称	描述
`click`	点击选项后触发，回调参数为 `(value: *=)`。`value` 为当前已选项 `value` 字段的值。当 `split` 属性为 `true` 时，直接点击指令按钮部分也会触发，但不会携带 `value` 参数。
`toggle`	下拉菜单展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。

图标

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

自定义样式

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

在 GitHub 上编辑此页面编辑

Dropdown 下拉菜单

示例

样式

尺寸

内联选项

可搜索

禁用

触发时机与分离按钮

API

属性

插槽

事件

图标

自定义样式