Dropdown 下拉菜单

下拉菜单（Dropdown）是一种常见的交互组件，在页面中提供一个下拉菜单，用户可以从中选择某项操作或选项。

基本使用

通过 NueDropdown 组件创建一个基本的按钮式的下拉菜单。

通过 text 属性设置下拉菜单触发按钮中的文字。

<template>
    <nue-div style="height: 128px">
        <nue-dropdown text="点击打开下拉菜单">
            <template #dropdown>
                <li>下拉菜单选项 A</li>
                <li>下拉菜单选项 B</li>
            </template>
        </nue-dropdown>
    </nue-div>
</template>

设置菜单的对齐方式

通过 placement 属性设置下拉菜单的对齐方式，可选值为 top-start、top-center、top-end、bottom-start、bottom-center 以及 bottom-end。

<template>
    <nue-div style="margin-bottom: 96px" justify="space-between">
        <nue-dropdown text="下-左" placement="bottom-start" hide-on-click>
            <template #dropdown>
                <li>下拉菜单选项 A</li>
                <li>下拉菜单选项 B</li>
            </template>
        </nue-dropdown>
        <nue-dropdown text="下-中" placement="bottom-center" hide-on-click>
            <template #dropdown>
                <li>下拉菜单选项 A</li>
                <li>下拉菜单选项 B</li>
            </template>
        </nue-dropdown>
        <nue-dropdown text="下-右" placement="bottom-end" hide-on-click>
            <template #dropdown>
                <li>下拉菜单选项 A</li>
                <li>下拉菜单选项 B</li>
            </template>
        </nue-dropdown>
    </nue-div>
</template>

菜单选项事件处理

通过事件 execute 处理下拉菜单选项的点击事件。

在 dropdown 插槽内，通过给对应的元素添加 data-executeid 属性来指定可执行选项的动作标识，并在 execute 事件所传递的 id 参数中获取该标识，根据标识执行对应的动作。

<template>
    <nue-div style="height: 160px">
        <nue-dropdown
            text="请选择动作"
            hide-on-click
            placement="bottom-end"
            @execute="handleExecute"
        >
            <template #dropdown>
                <li data-executeid="Coding">编写一段代码</li>
                <li data-executeid="Testing">测试一个功能</li>
                <li data-executeid="Maintaining">维护一个项目</li>
            </template>
        </nue-dropdown>
    </nue-div>
</template>

<script setup>
    import { NueMessage } from 'nue-ui';

    const handleExecute = id => {
        NueMessage({
            message: `Executing option ${id}`
        });
        // switch (id) { ... }
    };
</script>

自定义下拉菜单的触发元素

通过默认插槽指定下拉菜单的触发元素。

通过插槽传递出来的 clickTrigger 方法来控制下拉菜单的显示。

<template>
    <nue-div style="height: 128px">
        <nue-dropdown placement="bottom-center" hide-on-click>
            <template #default="{ clickTrigger }">
                <nue-avatar
                    src="https://picsum.photos/200/200"
                    @click="clickTrigger"
                />
            </template>
            <template #dropdown>
                <li>菜单项 1</li>
                <li>菜单项 2</li>
            </template>
        </nue-dropdown>
    </nue-div>
</template>

自定义主题

通过属性 theme 实现对某一个下拉菜单主题的定制。

<template>
    <nue-div style="height: 128px">
        <nue-dropdown theme="dark" text="点击打开下拉菜单">
            <template #dropdown>
                <li>下拉菜单选项 A</li>
                <li>下拉菜单选项 B</li>
            </template>
        </nue-dropdown>
    </nue-div>
</template>

<style>
    .nue-dropdown--dark {
        background-color: #333;
        color: #fff;
        width: 166px;
        border-color: #333;
        box-shadow: var(--primary-shadow);

        & li:hover {
            background-color: #696969;
            cursor: pointer;
        }
    }
</style>