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
        v-model="dropdownValue"
        arrow
        :options="options"
        showSelectedOption
        popperClass="dropdown-content-wrapper"
        @scroll="handleScroll"
        @click="handleClick"
        @change="handleChange"
    >
        <FButton>下拉菜单</FButton>
    </FDropdown>
</template>

<script setup>
import { ref } from 'vue';

const dropdownValue = ref('3');

const options = [
    {
        value: '1',
        label: '删除',
        disabled: true,
    },
    {
        value: '2',
        label: '修改',
    },
    {
        value: '3',
        label: '添加',
    },
    {
        value: '4',
        label: '评论',
    },
    {
        value: '5',
        label: '收藏',
    },
    {
        value: '6',
        label: '点赞',
    },
    {
        value: '7',
        label: '分享',
    },
    {
        value: '8',
        label: '投诉',
    },
    {
        value: '9',
        label: '建议',
    },
    {
        value: '10',
        label: '更新',
    },
    {
        value: '11',
        label: '编辑',
    },
    {
        value: '12',
        label: '更多',
    },
];

const handleScroll = (e) => {
    console.log('[dropdown.check] handleScroll, e:', e);
};
const handleClick = (value) => {
    console.log('[dropdown.check] handleClick, value:', value);
};
const handleChange = (value) => {
    console.log('[dropdown.check] handleChange, value:', value);
};
</script>

<style>
.dropdown-content-wrapper .fes-dropdown-option-wrapper {
    max-height: 320px;
}
</style>

图标 ​

菜单项可配置图标。

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
popperClass弹出框容器样式string-

Events ​

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

Slots ​

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