Dropdown 下拉菜单

Dropdown 组件可以内联 OptionOptionGroup 组件使用。

示例

样式

可选的样式 ui 属性值: primary/text

<template>
<article>
  <veui-dropdown
    label="Primary"
    ui="primary"
    :options="options"
  />
  <veui-dropdown
    label="Default"
    :options="options"
  />
  <veui-dropdown
    label="Normal"
    ui="normal"
    :options="options"
  />
  <veui-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>

尺寸

可选的尺寸 ui 属性值:xs/s/m/l

<template>
<article>
  <veui-dropdown
    label="Action"
    ui="xs"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="s"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    :options="operations"
    @click="alert"
  />
  <veui-dropdown
    label="Action"
    ui="l"
    :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 组件内支持内联使用 OptionGroupOption 组件来代替 options 属性。

OptionGroupposition 属性设置为 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>

含搜索的下拉框菜单

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

<template>
<article>
  <veui-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>

禁用状态的下拉框菜单

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

<template>
<article>
  <veui-dropdown
    label="Operation"
    disabled
    ui="text"
    :options="options"
  />
  <veui-dropdown
    label="Operation"
    disabled
    :options="options"
  />
  <veui-dropdown
    label="Operation"
    disabled
    ui="primary"
    :options="options"
  />
  <veui-dropdown
    label="Operation"
    disabled
    split
    :options="options"
  />
  <veui-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>

下拉触发时机与分离按钮

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

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

API

属性

名称类型默认值描述
uistring=-

预设样式。

描述
primary主题色样式。
text文字样式。
xs特小尺寸样式。
s小尺寸样式。
m中等尺寸样式。
l大尺寸样式。
optionsArray<Object>=[]

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

名称类型描述
labelstring选项的文字说明。
value*选项对应的值。
optionsArray<Object>=选项的子选项数组,数组项类型同 options 属性数组项。
disabledboolean=选项是否为禁用。
labelstring-下拉按钮的描述文本。
triggerstring='click'触发下拉框展开的时机,可选值为 'click'/'hover'
splitboolean=false是否将下拉按钮分离为指令按钮和切换下拉按钮两部分。
expandedboolean=false

.sync

下拉菜单是否展开。

disabledboolean=false是否为禁用状态。
overlay-classstring|Array|Object=-参考 Overlay 组件的 overlay-class 属性

插槽

名称描述
default选项列表的内容。在没有指定 options 属性时,可以用来直接内联 OptionOptionGroup
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 进行绑定到作用域参数上。

trigger

整个下拉触发区域。

默认内容:下拉按钮。

名称类型描述
attrsObject需要输出到触发元素上的属性,包括 aria-*/disabled 等,可以使用 v-bind="attrs" 统一进行输出。
handlersObject[^handlers-desc]
expandedboolean下拉菜单是否展开。
togglefunction(force?: boolean): void用于切换下拉菜单展开状态。

事件

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

图标

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