Collapse | Easy-Collective-UI

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

基础用法

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

通过 slot 传入 item

通过 props 传入 item

<script setup lang="ts">
import { type DropdownItemProps } from "easy-collective-ui";

const items: DropdownItemProps[] = [
    { command: "1", label: "Action 1" },
    { command: "2", label: "Action 2" },
    { command: "3", label: "Action 3", disabled: true },
    { command: "4", label: "Action 4", divided: true },
];
</script>

<template>
    <div class="row">
        <div class="col">
            <div class="desc">通过 slot 传入 item</div>
            <ec-dropdown>
                <span class="dropdown-link">
                    Dropdown List
                    <ec-icon icon="angle-down" />
                </span>
                <template #dropdown>
                    <ec-dropdown-item command="1">Action 1</ec-dropdown-item>
                    <ec-dropdown-item command="2" label="Action 2" />
                    <ec-dropdown-item command="3" disabled>Action 3</ec-dropdown-item>
                    <ec-dropdown-item command="4" divided>Action 4</ec-dropdown-item>
                </template>
            </ec-dropdown>
        </div>
        <div class="col">
            <div class="desc">通过 props 传入 item</div>
            <ec-dropdown :items="items">
                <span class="dropdown-link">
                    Dropdown List
                    <ec-icon icon="angle-down" />
                </span>
            </ec-dropdown>
        </div>
    </div>
</template>

<style scoped>
.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1;
}

.desc {
    display: block;
    color: var(--ec-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--ec-color-primary);

    i {
        margin-left: 8px;
    }
}
</style>

触发方式

通过设置 trigger 属性来改变触发方式。

hover to trigger

click to trigger

right click to trigger

<script setup lang="ts">
import { type DropdownItemProps } from "easy-collective-ui";

const items: DropdownItemProps[] = [
    { command: "1", label: "Action 1" },
    { command: "2", label: "Action 2" },
    { command: "3", label: "Action 3", disabled: true },
    { command: "4", label: "Action 4", divided: true },
];
</script>

<template>
    <div class="row">
        <div class="col">
            <div class="desc">hover to trigger</div>
            <ec-dropdown :items="items">
                <span class="dropdown-link">
                    Dropdown List
                    <ec-icon icon="angle-down" />
                </span>
            </ec-dropdown>
        </div>
        <div class="col">
            <div class="desc">click to trigger</div>
            <ec-dropdown :items="items" trigger="click">
                <span class="dropdown-link">
                    Dropdown List
                    <ec-icon icon="angle-down" />
                </span>
            </ec-dropdown>
        </div>
        <div class="col">
            <div class="desc">right click to trigger</div>
            <ec-dropdown :items="items" trigger="contextmenu">
                <span class="dropdown-link">
                    Dropdown List
                    <ec-icon icon="angle-down" />
                </span>
            </ec-dropdown>
        </div>
    </div>
</template>

<style scoped>
.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1;
}

.desc {
    display: block;
    color: var(--ec-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--ec-color-primary);

    i {
        margin-left: 8px;
    }
}
</style>

点击菜单隐藏

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

hide-on-click="true"(default)

hide-on-click="false"

<script setup lang="ts">
import { type DropdownItemProps } from "easy-collective-ui";

const items: DropdownItemProps[] = [
    { command: "1", label: "Action 1" },
    { command: "2", label: "Action 2" },
    { command: "3", label: "Action 3", disabled: true },
    { command: "4", label: "Action 4", divided: true },
];
</script>

<template>
    <div class="row">
        <div class="col">
            <div class="desc">hide-on-click="true"(default)</div>
            <ec-dropdown :items="items">
                <span class="dropdown-link">
                    Dropdown List
                    <ec-icon icon="angle-down" />
                </span>
            </ec-dropdown>
        </div>
        <div class="col">
            <div class="desc">hide-on-click="false"</div>
            <ec-dropdown :items="items" :hide-on-click="false">
                <span class="dropdown-link">
                    Dropdown List
                    <ec-icon icon="angle-down" />
                </span>
            </ec-dropdown>
        </div>
    </div>
</template>

<style scoped>
.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1;
}

.desc {
    display: block;
    color: var(--ec-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--ec-color-primary);

    i {
        margin-left: 8px;
    }
}
</style>

指令事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 command 进行不同的操作。

<script setup lang="ts">
import {
    type DropdownItemProps,
    type DropdownCommand,
    EcMessage,
} from "easy-collective-ui";

const items: DropdownItemProps[] = [
    { command: "1", label: "Action 1" },
    { command: "2", label: "Action 2" },
    { command: "3", label: "Action 3", disabled: true },
    { command: "4", label: "Action 4", divided: true },
];

function handleCommand(command: DropdownCommand) {
    EcMessage.info("click on item " + command);
}
</script>

<template>
    <ec-dropdown :items="items" @command="handleCommand">
        <span class="dropdown-link">
            Dropdown List
            <ec-icon icon="angle-down" />
        </span>
    </ec-dropdown>
</template>

<style scoped>
.dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--ec-color-primary);

    i {
        margin-left: 8px;
    }
}
</style>

下拉方法

可以手动使用 DropdownInstance.open 或 DropdownInstance.close 以打开或关闭下拉菜单

<script setup lang="ts">
import type { DropdownItemProps, DropdownInstance } from "easy-collective-ui";
import { ref } from "vue";

const items: DropdownItemProps[] = [
    { command: "1", label: "Action 1" },
    { command: "2", label: "Action 2" },
    { command: "3", label: "Action 3", disabled: true },
    { command: "4", label: "Action 4", divided: true },
];
const dropdownRef = ref<DropdownInstance>();
</script>

<template>
    <ec-button @click="() => dropdownRef?.open()">open</ec-button>
    <ec-button @click="() => dropdownRef?.close()">close</ec-button>
    <br />
    <ec-dropdown ref="dropdownRef" :items="items">
        <span class="dropdown-link">
            Dropdown List
            <ec-icon icon="angle-down" />
        </span>
    </ec-dropdown>
</template>

<style scoped>
.dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--ec-color-primary);
    margin-top: 20px;

    i {
        margin-left: 8px;
    }
}
</style>

禁用状态

通过设置 disabled 属性来禁用下拉菜单。

disabled

undisabled

<script setup lang="ts">
import { type DropdownItemProps } from "easy-collective-ui";

const items: DropdownItemProps[] = [
    { command: "1", label: "Action 1" },
    { command: "2", label: "Action 2" },
    { command: "3", label: "Action 3", disabled: true },
    { command: "4", label: "Action 4", divided: true },
];
</script>

<template>
    <div class="row">
        <div class="col">
            <div class="desc">disabled</div>
            <ec-dropdown :items="items" disabled>
                <span class="dropdown-link">
                    Dropdown List
                    <ec-icon icon="angle-down" />
                </span>
            </ec-dropdown>
        </div>
        <div class="col">
            <div class="desc">undisabled</div>
            <ec-dropdown :items="items">
                <span class="dropdown-link">
                    Dropdown List
                    <ec-icon icon="angle-down" />
                </span>
            </ec-dropdown>
        </div>
    </div>
</template>

<style scoped>
.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1;
}

.desc {
    display: block;
    color: var(--ec-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--ec-color-primary);

    i {
        margin-left: 8px;
    }
}
</style>

触发对象

设置 split-button 属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮。

<script setup lang="ts">
import { type DropdownItemProps, EcMessage } from "easy-collective-ui";

const items: DropdownItemProps[] = [
    { command: "1", label: "Action 1" },
    { command: "2", label: "Action 2" },
    { command: "3", label: "Action 3", disabled: true },
    { command: "4", label: "Action 4", divided: true },
];

function handleClick() {
    EcMessage.info("button click");
}
</script>

<template>
    <div class="row">
        <ec-dropdown :items="items">
            <ec-button type="primary">
                Dropdown List
                <ec-icon icon="angle-down" style="margin-left: 8px" />
            </ec-button>
        </ec-dropdown>
        <ec-dropdown :items="items" type="primary" @click="handleClick" split-button>
            Dropdown List
        </ec-dropdown>
    </div>
</template>

<style scoped>
.row div {
    margin-right: 16px;
}
</style>

尺寸

通过设置 size 属性来改变下拉菜单和按钮的尺寸。

<script setup lang="ts">
import { type DropdownItemProps } from "easy-collective-ui";

const items: DropdownItemProps[] = [
    { command: "1", label: "Action 1" },
    { command: "2", label: "Action 2" },
    { command: "3", label: "Action 3", disabled: true },
    { command: "4", label: "Action 4", divided: true },
];
</script>

<template>
    <div class="row">
        <ec-dropdown :items="items" size="large" split-button>
            Large List
        </ec-dropdown>
        <ec-dropdown :items="items" split-button> Default List </ec-dropdown>
        <ec-dropdown :items="items" size="small" split-button>
            small List
        </ec-dropdown>
    </div>
</template>

<style scoped>
.row div {
    margin-right: 16px;
}
</style>

Props

Name	Description	Type	Default
type	菜单按钮类型	同 Button 组件的 type	--
size	菜单尺寸	同 Button 组件的 size	--
split-button	下拉触发元素呈现为按钮	`boolean`	false
disabled	是否禁用	`boolean`	false
trigger	触发方式	`'hover' \| 'click' \| 'contextmenu'`	hover
placement	弹出位置	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \|...`	bottom
hideOnClick	点击菜单项时是否隐藏下拉菜单	`boolean`	true
show-timeout	展开下拉菜单的延时,仅在 trigger 为 hover 时有效	`number`	150
hide-timeout	收起下拉菜单的延时,仅在 trigger 为 hover 时有效	`number`	150

TIP

ps: 触发方式为 hover 时，如果出现弹出层不稳定的情况，可能是 hide-timeout 值过小，请增大该值。(默认值 150 经过验证较为稳定)

Events

Name	Description	Type
click	`split-buttton` 为 true 时,点击左侧按钮触发	`(event: MouseEvent) => void`
visible-change	下拉菜单显示或隐藏时触发	`(visible: boolean) => void`
command	点击菜单项时触发	`(command: string\| number) => void`

Slots

Name	Description	Sub Component
default	默认插槽	-
dropdown	下拉菜单	DropdownItem

Expose

Name	Description	Type
open	打开下拉菜单	`() => void`
close	关闭下拉菜单	`() => void`

DropdownItem API

Props

Name	Description	Type	Default
command	菜单项指令	`string \| number`	-
label	菜单项文本	`string`	-
disabled	禁用状态	`boolean`	false
divider	添加分割线	`boolean`	false

Slots

Name	Description
default	默认插槽, 优先级高于 `props.label`

Dropdown 下拉菜单 ​

基础用法 ​

触发方式 ​

点击菜单隐藏 ​

指令事件 ​

下拉方法 ​

禁用状态 ​

触发对象 ​

尺寸 ​

Dropdown API ​

Props ​

Events ​

Slots ​

Expose ​

DropdownItem API ​

Props ​

Slots ​

Dropdown 下拉菜单

基础用法

触发方式

点击菜单隐藏

指令事件

下拉方法

禁用状态

触发对象

尺寸

Dropdown API

Props

Events

Slots

Expose

DropdownItem API

Props

Slots