Dropdown

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

基础用法

点击下拉菜单以展开更多
通过组件 slot 来设置下拉触发的元素以及需要通过具名 slot 为 dropdown 来设置下拉菜单。

vue

<template> <ap-dropdown label="请点击"> <template #dropdown> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> </template> </ap-dropdown> </template>

显示代码

触发方式

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

将 trigger 属性设置为 hover、focus 、 manual、click 即可， 默认为 click。

vue

<template> <ap-dropdown placement="bottom-start" trigger="hover"> <ap-button primary>请将鼠标移动放上</ap-button> <template #dropdown> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> </template> </ap-dropdown> </template>

显示代码

菜单隐藏

通过 hide-on-click 属性来配置。

下拉菜单默认在点击菜单项后不会被隐藏，将 hide-on-click 属性设置为 true 可以关闭此功能。

vue

<template> <ap-dropdown placement="top" :hide-on-click="false"> <ap-button primary>请点击</ap-button> <template #dropdown> <ap-dropdown-item v-for="(item, index) in list" :key="index" :active="isSame(item.value, select)" :disabled="item.value === 3" @click="changeSelect(item.value)" > <span>{{ item.label }}</span> </ap-dropdown-item> </template> </ap-dropdown> </template> <script lang="ts" setup> import { ref } from 'vue' const list = ref([ { value: 1, label: '熊熊勇闯异世界1', }, { value: 2, label: '熊熊勇闯异世界', }, { value: 3, label: '熊熊异世界', }, { value: 4, label: '熊熊勇闯异世界2', }, ]) let select = ref(0) const changeSelect = value => { select.value = value } const isSame = (a, b) => { return a === b } </script>

显示代码

禁用选项

通过给每个 dropdownItem 配置 disabled 属性来禁用某个选项。

vue

<template> <ap-dropdown label="请点击"> <template #dropdown> <ap-dropdown-item disabled>熊熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item disabled>熊熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> </template> </ap-dropdown> </template>

显示代码

DropdownGroup

用来对下拉选项进行分类，包裹同一类的选项

TIP

使用 DropdownGroup 时会触发 Dropdown 的 divide 功能未被当前组件包裹的 #dropdown 子内容都会被黑线分割

vue

<template> <ap-dropdown placement="bottom-start"> <ap-button>请点击</ap-button> <template #dropdown> <ap-dropdown-group> <ap-dropdown-item>熊勇闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> </ap-dropdown-group> <ap-dropdown-group> <ap-dropdown-item>熊熊闯异世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> </ap-dropdown-group> <ap-dropdown-group> <ap-dropdown-item>熊熊勇世界</ap-dropdown-item> <ap-dropdown-item>熊熊勇闯异世界</ap-dropdown-item> </ap-dropdown-group> </template> </ap-dropdown> </template>

显示代码

Props

dropdown props 如下

prop	说明	类型	默认值
label	展示默认的按钮	string	''
delay	hover 方式延迟时间 ms	number	300
disabled	 是否禁用	boolean	false
trigger	触发方式 'click', 'hover', 'focus', 'manual' 四选一	string	'click'
placement	弹出框位置 'top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end',	string	'top'
hideOnClick	点击后是否关闭	boolean	false

Events

事件名称	说明	回调参数
show	弹出时触发，参数是显隐状态的布尔值	true/false
hide	关闭时触发 参数是显隐状态的布尔值值	true/false

DropdownItem Props

prop	说明	类型	默认值
active	激活状态	boolean	false
disabled	 是否禁用	boolean	false