Fuse.Design Dropdown 下拉菜单

下拉菜单是一种向下弹出的列表组件，适用于页面操作命令过多时，收纳操作元素。用户通过点击或移入触点，可展开下拉菜单进行选择并执行相应命令，与用于选择的 Select 组件不同，Dropdown 是命令集合。

一、代码演示

基本：最简单的下拉菜单示例，通过 a-dropdown 组件，在触发元素内设置 @click.prevent 阻止默认点击行为，使用 #overlay 插槽定义菜单内容。

vue

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      Hover me
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="javascript:;">1st menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">2nd menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">3rd menu item</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
</script>

右键菜单：默认移入触发菜单，通过设置 :trigger="['contextmenu']" 可改为右键点击触发。

vue

<template>
  <a-dropdown :trigger="['contextmenu']">
    <div
      :style="{
        textAlign: 'center',
        background: '#f7f7f7',
        height: '200px',
        lineHeight: '200px',
        color: '#777',
      }"
    >
      Right Click on here
    </div>
    <template #overlay>
      <a-menu>
        <a-menu-item key="1">1st menu item</a-menu-item>
        <a-menu-item key="2">2nd menu item</a-menu-item>
        <a-menu-item key="3">3rd menu item</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

带下拉框的按钮：包含按钮与右侧功能菜单，可设置 icon 属性修改图标，同时展示了按钮禁用等状态。

vue

<template>
  <div class="demo-dropdown-wrap">
    <a-dropdown-button @click="handleButtonClick">
      Dropdown
      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item key="1">
            <UserOutlined />
            1st menu item
          </a-menu-item>
          <a-menu-item key="2">
            <UserOutlined />
            2nd menu item
          </a-menu-item>
          <a-menu-item key="3">
            <UserOutlined />
            3rd item
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown-button>
    <a-dropdown-button>
      Dropdown
      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item key="1">
            <UserOutlined />
            1st menu item
          </a-menu-item>
          <a-menu-item key="2">
            <UserOutlined />
            2nd menu item
          </a-menu-item>
          <a-menu-item key="3">
            <UserOutlined />
            3rd item
          </a-menu-item>
        </a-menu>
      </template>
      <template #icon><UserOutlined /></template>
    </a-dropdown-button>
    <a-dropdown-button disabled @click="handleButtonClick">
      Dropdown
      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item key="1">
            <UserOutlined />
            1st menu item
          </a-menu-item>
          <a-menu-item key="2">
            <UserOutlined />
            2nd menu item
          </a-menu-item>
          <a-menu-item key="3">
            <UserOutlined />
            3rd item
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown-button>
    <a-dropdown>
      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item key="1">
            <UserOutlined />
            1st menu item
          </a-menu-item>
          <a-menu-item key="2">
            <UserOutlined />
            2nd menu item
          </a-menu-item>
          <a-menu-item key="3">
            <UserOutlined />
            3rd item
          </a-menu-item>
        </a-menu>
      </template>
      <a-button>
        Button
        <DownOutlined />
      </a-button>
    </a-dropdown>
  </div>
</template>
<script lang="ts" setup>
import { UserOutlined, DownOutlined } from '@ant-design/icons-vue'
import type { MenuProps } from '@design-middle-center/fuse-design-vue'
const handleButtonClick = (e: Event) => {
  console.log('click left button', e)
}
const handleMenuClick: MenuProps['onClick'] = (e) => {
  console.log('click', e)
}
</script>
<style scoped>
.demo-dropdown-wrap :deep(.ant-dropdown-button) {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>

加载中状态：通过设置 loading 属性让按钮处于加载状态。

vue

<template>
  <a-space direction="vertical">
    <a-dropdown-button type="primary" loading>
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">Submit and continue</a-menu-item>
        </a-menu>
      </template>
      Submit
    </a-dropdown-button>
    <a-dropdown-button type="primary" size="small" loading>
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">Submit and continue</a-menu-item>
        </a-menu>
      </template>
      Submit
    </a-dropdown-button>
    <a-dropdown-button type="primary" :loading="loading1" @click="enterLoading1">
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">Submit and continue</a-menu-item>
        </a-menu>
      </template>
      Submit
    </a-dropdown-button>
    <a-dropdown-button :loading="loading2" @click="enterLoading2">
      Submit
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">Submit and continue</a-menu-item>
        </a-menu>
      </template>
      <template #icon><DownOutlined /></template>
    </a-dropdown-button>
  </a-space>
</template>
<script lang="ts" setup>
import { Ref, ref } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
const loading1 = ref(false);
const loading2 = ref(false);
const enterLoading = (loading: Ref<boolean>) => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 6000);
};
function enterLoading1() {
  enterLoading(loading1);
}
function enterLoading2() {
  enterLoading(loading2);
}
</script>

API

属性如下

参数	说明	类型	默认值	版本
align	该值将合并到placement的配置中，设置参考dom-align	Object	-	-
arrow	下拉框箭头是否显示。取值可以是布尔值，当为`true`时显示箭头；也可以是一个对象`{ pointAtCenter: boolean }`，`pointAtCenter`设为`true`时箭头指向目标元素中心	boolean		false
destroyPopupOnHide	关闭后是否销毁Dropdown	boolean	false	3.0
disabled	菜单是否禁用	boolean	-	-
getPopupContainer	菜单渲染父节点。默认渲染到body上，如果遇到菜单滚动定位问题，可修改为滚动的区域，并相对其定位。该函数接收触发节点`triggerNode`作为参数	Function(triggerNode)	() => document.body	-
overlay(v-slot)	菜单内容，需使用`Menu`组件，还可包含菜单项`Menu.Item`、分割线`Menu.Divider` 。注意`Menu.Item`必须设置唯一的`key`属性	Menu	-	-
overlayClassName	下拉根元素的类名称	string	-	-
overlayStyle	下拉根元素的样式	object	-	-
placement	菜单弹出位置，可选值为`bottomLeft`、`bottom`、`bottomRight`、`topLeft`、`top`、`topRight`	`bottomLeft`	`bottom`	`bottomRight`
trigger	触发下拉的行为，移动端不支持`hover`。取值为数组，可选值为`click`、`hover`、`contextmenu`	Array<`click`	`hover`	`contextmenu`>
open(v-model)	菜单是否显示	boolean	-	-

overlay菜单使用Menu，还包括菜单项Menu.Item，分割线Menu.Divider。注意：Menu.Item必须设置唯一的key属性。Dropdown下的Menu默认不可选中。如果需要菜单可选中，可以指定<Menu selectable>。

事件

事件名称	说明	回调参数	版本
openChange	菜单显示状态改变时调用，参数为`visible`。点击菜单按钮导致的消失不会触发	function(open)	4.0

参数	说明	类型	默认值	版本
disabled	菜单是否禁用	boolean	-	-
icon	右侧的`icon`，可以是`VNode`或通过插槽`slot`传入	VNode	slot	-
loading	设置按钮载入状态，可以是布尔值，也可以是一个包含`delay`属性（延迟显示加载状态的时长，单位为毫秒）的对象	boolean		false
overlay(v-slot)	菜单内容，需使用`Menu`组件	Menu	-	-
placement	菜单弹出位置，可选值为`bottomLeft`、`bottom`、`bottomRight`、`topLeft`、`top`、`topRight`	`bottomLeft`	`bottom`	`bottomRight`
size	按钮大小，和`Button`组件一致	string	'default'	-
trigger	触发下拉的行为，取值为数组，可选值为`click`、`hover`、`contextmenu`	Array<`click`	`hover`	`contextmenu`>
type	按钮类型，和`Button`组件一致	string	'default'	-
open(v-model)	菜单是否显示	boolean	-	-

事件名称	说明	回调参数	版本
click	点击左侧按钮的回调，和`Button`组件一致	Function	-
openChange	菜单显示状态改变时调用，参数为`visible`。点击菜单按钮导致的消失不会触发	function(open)	4.0

Fuse.Design Dropdown 下拉菜单 ​

一、代码演示 ​

API ​

事件 ​

Dropdown.Button ​

Dropdown.Button事件 ​

Fuse.Design Dropdown 下拉菜单

一、代码演示

API

事件

Dropdown.Button

Dropdown.Button事件