Fes Design

Dropdown 下拉菜单 ​

向下弹出的列表。

组件注册 ​

js
import { FDropdown } from '@fesjs/fes-design';

app.use(FDropdown);

代码演示 ​

基础用法 ​

简单的下拉菜单。

play
<template>
    <FDropdown arrow :options="options">
        <FButton>下拉菜单</FButton>
    </FDropdown>
</template>

<script>
export default {
    setup() {
        const options = [
            {
                value: '1',
                label: '删除',
                disabled: true,
            },
            {
                value: '2',
                label: '修改',
            },
            {
                value: '3',
                label: '添加',
            },
            {
                value: '4',
                label: '评论',
            },
            {
                value: '5',
                label: '收藏',
            },
        ];
        return {
            options,
        };
    },
};
</script>

选中效果 ​

展示选中选项

play
<template>
    <FDropdown arrow :options="options" showSelectedOption>
        <FButton>下拉菜单</FButton>
    </FDropdown>
</template>

<script>
export default {
    setup() {
        const options = [
            {
                value: '1',
                label: '删除',
                disabled: true,
            },
            {
                value: '2',
                label: '修改',
            },
            {
                value: '3',
                label: '添加',
            },
            {
                value: '4',
                label: '评论',
            },
            {
                value: '5',
                label: '收藏',
            },
        ];
        return {
            options,
        };
    },
};
</script>

图标 ​

菜单项可配置图标。

play
<template>
    <FDropdown :options="options">
        <FButton>下拉菜单</FButton>
    </FDropdown>
</template>

<script>
import { h } from 'vue';
import {
    DeleteOutlined,
    EditOutlined,
    PlusSquareOutlined,
    StarOutlined,
    UserOutlined,
} from '@fesjs/fes-design/icon';

export default {
    setup() {
        const options = [
            {
                value: '1',
                label: '删除',
                icon: () => {
                    return h(DeleteOutlined);
                },
            },
            {
                value: '2',
                label: '修改',
                icon: () => {
                    return h(EditOutlined);
                },
            },
            {
                value: '3',
                label: '添加',
                icon: () => {
                    return h(PlusSquareOutlined);
                },
            },
            {
                value: '4',
                label: '评论',
                icon: () => {
                    return h(UserOutlined);
                },
            },
            {
                value: '5',
                label: '收藏',
                icon: () => {
                    return h(StarOutlined);
                },
            },
        ];
        return {
            options,
        };
    },
};
</script>

触发方式 ​

触发下拉菜单弹出的行为有hover、click、focus、contextmenu

play
<template>
    <FSpace>
        <FSelect v-model="trigger" style="width: 100px">
            <FOption value="hover">hover</FOption>
            <FOption value="click">click</FOption>
            <FOption value="focus">focus</FOption>
            <FOption value="contextmenu">contextmenu</FOption>
        </FSelect>
        <FDropdown :trigger="trigger" :options="options">
            <FButton>{{ trigger }}</FButton>
        </FDropdown>
    </FSpace>
</template>

<script>
import { h, ref } from 'vue';
import {
    DeleteOutlined,
    EditOutlined,
    PlusSquareOutlined,
    StarOutlined,
    UserOutlined,
} from '@fesjs/fes-design/icon';

export default {
    setup() {
        const trigger = ref('hover');
        const options = [
            {
                value: '1',
                label: '删除',
                icon: () => {
                    return h(DeleteOutlined);
                },
            },
            {
                value: '2',
                label: '修改',
                icon: () => {
                    return h(EditOutlined);
                },
            },
            {
                value: '3',
                label: '添加',
                icon: () => {
                    return h(PlusSquareOutlined);
                },
            },
            {
                value: '4',
                label: '评论',
                icon: () => {
                    return h(UserOutlined);
                },
            },
            {
                value: '5',
                label: '收藏',
                icon: () => {
                    return h(StarOutlined);
                },
            },
        ];
        return {
            trigger,
            options,
        };
    },
};
</script>

弹出位置 ​

弹出位置，可选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

play
<template>
    <FSpace>
        <FDropdown placement="top" :options="options">
            <FButton>top</FButton>
        </FDropdown>
        <FDropdown placement="bottom" :options="options">
            <FButton>bottom</FButton>
        </FDropdown>
        <FDropdown placement="left" :options="options">
            <FButton>left</FButton>
        </FDropdown>
        <FDropdown placement="right" :options="options">
            <FButton>right</FButton>
        </FDropdown>
    </FSpace>
</template>

<script>
import { h } from 'vue';
import {
    DeleteOutlined,
    EditOutlined,
    PlusSquareOutlined,
    StarOutlined,
    UserOutlined,
} from '@fesjs/fes-design/icon';

export default {
    setup() {
        const options = [
            {
                value: '1',
                label: '删除',
                icon: () => {
                    return h(DeleteOutlined);
                },
            },
            {
                value: '2',
                label: '修改',
                icon: () => {
                    return h(EditOutlined);
                },
            },
            {
                value: '3',
                label: '添加',
                icon: () => {
                    return h(PlusSquareOutlined);
                },
            },
            {
                value: '4',
                label: '评论',
                icon: () => {
                    return h(UserOutlined);
                },
            },
            {
                value: '5',
                label: '收藏',
                icon: () => {
                    return h(StarOutlined);
                },
            },
        ];
        return {
            options,
        };
    },
};
</script>

禁用 ​

下拉菜单无法弹出。

play
<template>
    <FDropdown disabled :options="options">
        <FButton>hover</FButton>
    </FDropdown>
</template>

<script>
export default {
    setup() {
        const options = [
            {
                value: '1',
                label: '删除',
                disabled: true,
            },
            {
                value: '2',
                label: '修改',
            },
            {
                value: '3',
                label: '添加',
            },
            {
                value: '4',
                label: '评论',
            },
            {
                value: '5',
                label: '收藏',
            },
        ];
        return {
            options,
        };
    },
};
</script>

Props ​

属性说明类型默认值
options下拉菜单选项配置Array<DropdownOption>[]
valueFieldvalue 的属性名stringvalue
labelFieldlabel 的属性名stringlabel
visible是否弹出booleanfalse
appendToContainer弹窗内容是否添加到指定的 DOM 元素booleantrue
getContainer指定下拉选项挂载的 HTML 节点() => HTMLElement() => document.body
trigger触发弹窗的方式，可选hover、click、focus、contextmenustringhover
placement弹出位置，可选top、top-start、top-end、bottom、bottom-start、bottom-end、right、right-start、right-end、left、left-start、left-endstringbottom
offset下拉菜单弹窗距离触发元素的距离,单位 pxnumber6
disabled是否禁用booleanfalse
arrow是否显示箭头booleanfalse
showSelectedOption是否显示选中选项booleanfalse

Events ​

事件名称说明回调参数
click点击选项的回调(value) => void
visibleChange菜单显示状态改变时调用(visible) => void

Slots ​

名称说明
default触发下拉菜单的内容
属性说明类型默认值
value节点的 key，需要唯一，可使用 valueField 修改字段名string | number-
label节点的内容，可使用 labelField 修改字段名string | (item) => VNodeChild-
disabled?是否禁用节点booleanfalse
icon?节点的图标() => VNodeChildnull