Dropdown 下拉菜单

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

示例

尺寸

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

<template>
<article>
  <veui-dropdown
    label="Action"
    ui="large"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="small"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="tiny"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="micro"
    :options="operations"
    @click="alert"
  />
</article>
</template>

<script>
import { Dropdown } from 'veui'
import toast from 'veui/managers/toast'

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>

内联模式

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

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

<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 } from 'veui'
import toast from 'veui/managers/toast'

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

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
primary主题色样式。
alt备选样式。
large大尺寸样式。
small小尺寸样式。
tiny特小尺寸样式。
micro微型样式。
optionsArray<Object>=[]

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

名称类型描述
labelstring选项的文字说明。
value*选项对应的值。
disabledboolean=选项是否为禁用。
labelstring-下拉按钮的描述文本。
triggerstring'click'触发下拉框展开的时机，可选值为 'click'/'hover'。
splitbooleanfalse是否将下拉按钮分离为指令按钮和切换下拉按钮两部分。
disabledbooleanfalse是否为禁用状态。
overlay-classstring|Array|Object-参考 Overlay 组件的 overlay-class 属性。

插槽

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

下拉按钮文本区域。

默认内容：label 属性值。

名称类型描述
labelstringlabel 属性对应文本。
group-label

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

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

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

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

option-label

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

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

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

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

option

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

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

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

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

事件

名称描述
click点击选项后触发，回调参数为 (value: *=)。value 为当前已选项 value 字段的值。当 split 属性为 true 时，直接点击指令按钮部分也会触发，但不会携带 value 参数。

图标

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