Collapse | Sword Design

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

基础用法

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

<script setup lang="ts">
import { type DropdownItemProps } from "swd-design";

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

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 1;
}
.desc {
  display: block;
  color: var(--swd-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--swd-color-primary);
  i {
    margin-left: 8px;
  }
}
</style>

触发方式

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

<script setup lang="ts">
import { type DropdownItemProps } from "swd-design";

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>
      <swd-dropdown :items="items">
        <span class="dropdown-link">
          Dropdown List
          <swd-icon icon="angle-down" />
        </span>
      </swd-dropdown>
    </div>
    <div class="col">
      <div class="desc">click to trigger</div>
      <swd-dropdown :items="items" trigger="click">
        <span class="dropdown-link">
          Dropdown List
          <swd-icon icon="angle-down" />
        </span>
      </swd-dropdown>
    </div>
    <div class="col">
      <div class="desc">right click to trigger</div>
      <swd-dropdown :items="items" trigger="contextmenu">
        <span class="dropdown-link">
          Dropdown List
          <swd-icon icon="angle-down" />
        </span>
      </swd-dropdown>
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 1;
}
.desc {
  display: block;
  color: var(--swd-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--swd-color-primary);
  i {
    margin-left: 8px;
  }
}
</style>

点击菜单隐藏

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

<script setup lang="ts">
import { type DropdownItemProps } from "swd-design";

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>
      <swd-dropdown :items="items">
        <span class="dropdown-link">
          Dropdown List
          <swd-icon icon="angle-down" />
        </span>
      </swd-dropdown>
    </div>
    <div class="col">
      <div class="desc">hide-on-click="false"</div>
      <swd-dropdown :items="items" :hide-on-click="false">
        <span class="dropdown-link">
          Dropdown List
          <swd-icon icon="angle-down" />
        </span>
      </swd-dropdown>
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 1;
}
.desc {
  display: block;
  color: var(--swd-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--swd-color-primary);
  i {
    margin-left: 8px;
  }
}
</style>

指令事件

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

<script setup lang="ts">
import {
  type DropdownItemProps,
  type DropdownCommand,
  SwdMessage,
} from "swd-design";

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) {
  SwdMessage.info("click on item " + command);
}
</script>

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

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

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

下拉方法

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

<script setup lang="ts">
import type { DropdownItemProps, DropdownInstance } from "swd-design";
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>
  <swd-button @click="() => dropdownRef?.open()">open</swd-button>
  <swd-button @click="() => dropdownRef?.close()">close</swd-button>
  <br />
  <swd-dropdown ref="dropdownRef" :items="items">
    <span class="dropdown-link">
      Dropdown List
      <swd-icon icon="angle-down" />
    </span>
  </swd-dropdown>
</template>

<style scoped>
.dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--swd-color-primary);
  margin-top: 20px;
  i {
    margin-left: 8px;
  }
}
</style>

禁用状态

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

<script setup lang="ts">
import { type DropdownItemProps } from "swd-design";

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>
      <swd-dropdown :items="items" disabled>
        <span class="dropdown-link">
          Dropdown List
          <swd-icon icon="angle-down" />
        </span>
      </swd-dropdown>
    </div>
    <div class="col">
      <div class="desc">undisabled</div>
      <swd-dropdown :items="items">
        <span class="dropdown-link">
          Dropdown List
          <swd-icon icon="angle-down" />
        </span>
      </swd-dropdown>
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 1;
}
.desc {
  display: block;
  color: var(--swd-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--swd-color-primary);
  i {
    margin-left: 8px;
  }
}
</style>

触发对象

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

<script setup lang="ts">
import { type DropdownItemProps, SwdMessage } from "swd-design";

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() {
  SwdMessage.info("button click");
}
</script>

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

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

尺寸

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

<script setup lang="ts">
import { type DropdownItemProps } from "swd-design";

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">
    <swd-dropdown :items="items" size="large" split-button>
      Large List
    </swd-dropdown>
    <swd-dropdown :items="items" split-button> Default List </swd-dropdown>
    <swd-dropdown :items="items" size="small" split-button>
      small List
    </swd-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