ETU组件库

Appearance

Return to top
On this page

Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

基础用法

悬停在下拉菜单上以展开更多操作。

通过组件 slot 来设置下拉触发的元素以及需要通过具名 slot 为 dropdown 来设置下拉菜单。 默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下拉菜单。

Dropdown List 
<template>
  <etu-dropdown>
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item disabled>选项1</etu-dropdown-item>
        <etu-dropdown-item divided>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
        <etu-dropdown-item>选项5</etu-dropdown-item>
        <etu-dropdown-item>选项6</etu-dropdown-item>
        <etu-dropdown-item>选项7</etu-dropdown-item>
        <etu-dropdown-item>选项8</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>

<script setup lang="ts"></script>

<template>
  <etu-dropdown>
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item disabled>选项1</etu-dropdown-item>
        <etu-dropdown-item divided>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
        <etu-dropdown-item>选项5</etu-dropdown-item>
        <etu-dropdown-item>选项6</etu-dropdown-item>
        <etu-dropdown-item>选项7</etu-dropdown-item>
        <etu-dropdown-item>选项8</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>

<script setup lang="ts"></script>

触发对象

可使用按钮触发下拉菜单。

设置 split-button 属性来让触发下拉元素呈现为双按钮组，左边是功能按钮，右边是触发下拉菜单的按钮。

<template>
  <etu-dropdown :arrowDown="false">
    <etu-button type="primary" @click="handleClick">Dropdown List</etu-button>

    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
        <etu-dropdown-item>选项5</etu-dropdown-item>
        <etu-dropdown-item>选项6</etu-dropdown-item>
        <etu-dropdown-item>选项7</etu-dropdown-item>
        <etu-dropdown-item divided>选项8</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
  <etu-dropdown split-button type="primary" @click="handleClick">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
        <etu-dropdown-item>选项5</etu-dropdown-item>
        <etu-dropdown-item>选项6</etu-dropdown-item>
        <etu-dropdown-item>选项7</etu-dropdown-item>
        <etu-dropdown-item divided>选项8</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>

<script setup lang="ts">
const handleClick = () => {
  // eslint-disable-next-line no-alert
  alert("button click");
};
</script>

<template>
  <etu-dropdown :arrowDown="false">
    <etu-button type="primary" @click="handleClick">Dropdown List</etu-button>

    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
        <etu-dropdown-item>选项5</etu-dropdown-item>
        <etu-dropdown-item>选项6</etu-dropdown-item>
        <etu-dropdown-item>选项7</etu-dropdown-item>
        <etu-dropdown-item divided>选项8</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
  <etu-dropdown split-button type="primary" @click="handleClick">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
        <etu-dropdown-item>选项5</etu-dropdown-item>
        <etu-dropdown-item>选项6</etu-dropdown-item>
        <etu-dropdown-item>选项7</etu-dropdown-item>
        <etu-dropdown-item divided>选项8</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>

<script setup lang="ts">
const handleClick = () => {
  // eslint-disable-next-line no-alert
  alert("button click");
};
</script>

触发方式

可以配置点击激活或者悬停激活。

将 trigger 属性设置为 click 即可， 默认为 hover

Dropdown List Dropdown List 

<template>
  <etu-dropdown trigger="hover" class="d-1">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>

  <etu-dropdown trigger="click">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>
<script setup lang="ts"></script>
<style scoped>
.d-1 {
  margin-right: 30px;
}
</style>

<template>
  <etu-dropdown trigger="hover" class="d-1">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>

  <etu-dropdown trigger="click">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
        <etu-dropdown-item>选项3</etu-dropdown-item>
        <etu-dropdown-item>选项4</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>
<script setup lang="ts"></script>
<style scoped>
.d-1 {
  margin-right: 30px;
}
</style>

指令事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。

Dropdown List 
<template>
  <etu-dropdown @command="handleCommandClick">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item command="1">选项1</etu-dropdown-item>
        <etu-dropdown-item command="2">选项2</etu-dropdown-item>
        <etu-dropdown-item command="3">选项3</etu-dropdown-item>
        <etu-dropdown-item command="4">选项4</etu-dropdown-item>
        <etu-dropdown-item command="5">选项5</etu-dropdown-item>
        <etu-dropdown-item command="6">选项6</etu-dropdown-item>
        <etu-dropdown-item command="7">选项7</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>

<script setup lang="ts">
import EtuMessage from "@etu-design/message";
const handleCommandClick = (command: string | number | object) => {
  // eslint-disable-next-line no-alert
  EtuMessage(`click on item ${command}`);
};
</script>

<template>
  <etu-dropdown @command="handleCommandClick">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item command="1">选项1</etu-dropdown-item>
        <etu-dropdown-item command="2">选项2</etu-dropdown-item>
        <etu-dropdown-item command="3">选项3</etu-dropdown-item>
        <etu-dropdown-item command="4">选项4</etu-dropdown-item>
        <etu-dropdown-item command="5">选项5</etu-dropdown-item>
        <etu-dropdown-item command="6">选项6</etu-dropdown-item>
        <etu-dropdown-item command="7">选项7</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>

<script setup lang="ts">
import EtuMessage from "@etu-design/message";
const handleCommandClick = (command: string | number | object) => {
  // eslint-disable-next-line no-alert
  EtuMessage(`click on item ${command}`);
};
</script>

尺寸

Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。

使用 size 属性配置尺寸，可选的尺寸大小有: large, default 或 small

<template>
  <etu-dropdown split-button size="large" class="d-1">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
  <etu-dropdown split-button size="default" class="d-1">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
  <etu-dropdown split-button size="small" class="d-1">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>

<script setup lang="ts"></script>
<style scoped>
.d-1 {
  margin-right: 30px;
}
</style>

<template>
  <etu-dropdown split-button size="large" class="d-1">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
  <etu-dropdown split-button size="default" class="d-1">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
  <etu-dropdown split-button size="small" class="d-1">
    Dropdown List
    <template #dropdown>
      <etu-dropdown-menu>
        <etu-dropdown-item>选项1</etu-dropdown-item>
        <etu-dropdown-item>选项2</etu-dropdown-item>
      </etu-dropdown-menu>
    </template>
  </etu-dropdown>
</template>

<script setup lang="ts"></script>
<style scoped>
.d-1 {
  margin-right: 30px;
}
</style>
属性名说明类型可选值默认值
type菜单按钮类型，仅在 split-button 为 true 的情况下有效。stringprimary/success/info/warning/dangerprimary
size菜单尺寸，在 split-button 为 true 的情况下也对触发按钮生效booleanlarge / default / smalldefault
max-height菜单最大高度string / number——
split-button下拉触发元素呈现为双按钮组boolean—false
placement菜单弹出位置string"auto"/"auto-start"/"auto-end"/"top"/"top-start"/"top-end"/"bottom"/"bottom-start"/"bottom-end"/"right"/"right-start"/"right-end"/"left"/"left-start"/"left-end"/—bottom
arrowDown使用默认的箭头 icon,仅在 split-button 为 false 的情况下有效boolean—true
属性名说明类型可选值默认值
command绑定在 Dropdown-item 上，作为Dropdown 事件command的回调参数string/object/number——
disableditem 的不可选取状态boolean—false
divided分割线boolean—false
事件名说明参数
clicksplit-button 为 true 时，点击左侧按钮的回调—
command点击菜单项触发的事件回调dropdown-item 的指令
插槽名说明子标签
dropdown下拉列表，通常是 <el-dropdown-menu> 组件Dropdown-Menu