Appearance

指南 组件
VISTA B VISTA C

Dropdown 下拉菜单 ​

Dropdown 用于将动作或菜单折叠到下拉菜单中。VISTA B 直接使用 Element Plus 的 el-dropdown，常用于表格操作、更多操作、页面顶部工具栏和卡片操作菜单。

基础用法 ​

通过默认插槽设置触发元素，通过 dropdown 插槽设置下拉菜单。默认触发方式是 hover。

vue
<el-dropdown>
  <span class="dropdown-demo-link">
    Dropdown List
    <el-icon><ArrowDown /></el-icon>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item>Action 1</el-dropdown-item>
      <el-dropdown-item>Action 2</el-dropdown-item>
      <el-dropdown-item>Action 3</el-dropdown-item>
      <el-dropdown-item disabled>Action 4</el-dropdown-item>
      <el-dropdown-item divided>Action 5</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

位置 ​

通过 placement 设置下拉菜单弹出位置。常用位置包含 top-start、top、top-end、bottom-start、bottom、bottom-end。

vue
<el-dropdown placement="bottom-start">
  <el-button>bottomStart</el-button>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item>The Action 1st</el-dropdown-item>
      <el-dropdown-item>The Action 2nd</el-dropdown-item>
      <el-dropdown-item>The Action 3rd</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

触发对象 ​

Dropdown 可以用文字触发，也可以用按钮触发。设置 split-button 后，左侧为主按钮，右侧为下拉触发按钮。

vue
<el-dropdown>
  <el-button type="primary">
    Dropdown List
    <el-icon><ArrowDown /></el-icon>
  </el-button>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item>Action 1</el-dropdown-item>
      <el-dropdown-item>Action 2</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

<el-dropdown split-button type="primary" @click="handleClick">
  Dropdown List
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item>Action 1</el-dropdown-item>
      <el-dropdown-item divided>Action 2</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

触发方式 ​

trigger 支持 hover、click、contextmenu。默认值为 hover。

hover to trigger
click to trigger
right click to trigger
vue
<el-dropdown trigger="click">
  <span class="dropdown-demo-link">
    Dropdown List
    <el-icon><ArrowDown /></el-icon>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
      <el-dropdown-item :icon="CirclePlusFilled">Action 2</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

菜单隐藏方式 ​

下拉菜单默认会在点击菜单项后隐藏。将 hide-on-click 设置为 false，点击菜单项后菜单不会自动关闭。

vue
<el-dropdown :hide-on-click="false">
  <span class="dropdown-demo-link">
    Dropdown List
    <el-icon><ArrowDown /></el-icon>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item>Action 1</el-dropdown-item>
      <el-dropdown-item divided>Action 2</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

指令事件 ​

设置 command 后，点击菜单项会触发 command 事件，回调参数为对应菜单项的 command 值。

last command: 未选择
vue
<script setup>
import { ElMessage } from 'element-plus'

const handleCommand = (command) => {
  ElMessage(`click on item ${command}`)
}
</script>

<template>
  <el-dropdown @command="handleCommand">
    <span class="dropdown-demo-link">
      Dropdown List
      <el-icon><ArrowDown /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="a">Action 1</el-dropdown-item>
        <el-dropdown-item command="b">Action 2</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

下拉方法 ​

通过组件实例可以手动调用 handleOpen 和 handleClose。

visible: false
vue
<script setup>
import { ref } from 'vue'

const dropdownRef = ref()

const openDropdown = () => {
  dropdownRef.value?.handleOpen()
}

const closeDropdown = () => {
  dropdownRef.value?.handleClose()
}
</script>

<template>
  <el-button @click="openDropdown">打开</el-button>
  <el-button @click="closeDropdown">关闭</el-button>
  <el-dropdown ref="dropdownRef" trigger="contextmenu">
    <span class="dropdown-demo-link">Dropdown List</span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

尺寸 ​

size 支持 large、默认、small。在 split-button 模式下，尺寸也会作用于触发按钮。

vue
<el-dropdown size="large" split-button type="primary">
  Large
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item>Action 1</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

虚拟触发 ​

开启 virtual-triggering 后，可以把触发区域和下拉菜单写在不同位置。下面示例在卡片上右键打开菜单。

Right click
vue
<el-dropdown
  :virtual-ref="triggerRef"
  virtual-triggering
  trigger="contextmenu"
  placement="bottom-start"
>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

API ​

属性说明类型默认值
type菜单按钮类型，仅在 split-button 为 true 时有效primary / success / warning / danger / info / default / text空
size菜单尺寸，在 split-button 为 true 时也作用于触发按钮large / default / small空
button-props按钮组件的 propsobject空
max-height菜单最大高度string / number空
split-button下拉触发元素是否呈现为按钮组booleanfalse
disabled是否禁用booleanfalse
placement菜单弹出位置top / top-start / top-end / bottom / bottom-start / bottom-end 等bottom
effectTooltip 主题dark / light / stringlight
trigger触发下拉的行为hover / click / contextmenu / arrayhover
trigger-keys指定键盘上哪些按键可以触发操作array['Enter', 'Space', 'ArrowDown', 'NumpadEnter']
virtual-triggering是否启用虚拟触发器booleanfalse
virtual-ref下拉框所依附的参考元素HTMLElement / object空
hide-on-click是否在点击菜单项后隐藏菜单booleantrue
show-arrowTooltip 内容是否显示箭头booleantrue
show-timeout展开下拉菜单的延时，仅在 hover 时有效number150
hide-timeout收起下拉菜单的延时，仅在 hover 时有效number150
role下拉菜单的 ARIA 属性menu / navigation / group 等menu
tabindexDropdown 组件的 tabindexnumber / string0
popper-class自定义浮层类名string / object空
popper-style自定义浮层样式string / object空
popper-optionsPopper.js 参数object{}
teleported是否将下拉列表插入至 body 元素booleantrue
append-to下拉内容挂载到哪个元素CSSSelector / HTMLElement空
persistent非活动且 persistent 为 false 时是否销毁下拉菜单booleantrue
插槽说明
default下拉菜单的触发内容，必须是有效 DOM 元素或组件
dropdown下拉列表，通常放置 el-dropdown-menu
事件名说明类型
clicksplit-button 为 true 时，点击左侧按钮触发(event: MouseEvent) => void
command下拉项被点击时触发，参数为菜单项的 command(command: string | number | object) => void
visible-change下拉菜单出现或隐藏时触发(visible: boolean) => void
方法名说明类型
handleOpen打开下拉菜单() => void
handleClose关闭下拉菜单() => void
插槽说明
default下拉菜单项，通常放置 el-dropdown-item
属性说明类型默认值
command派发到 command 回调函数的指令参数string / number / object空
disabled是否禁用booleanfalse
divided是否显示分隔符booleanfalse
icon自定义图标string / Component空
插槽说明
default自定义菜单项内容
icon自定义图标，会覆盖 icon 属性

HOMEVISTA 设计规范

版权所有 © HOMEVISTA