Dropdown 下拉菜单

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

基础用法

悬停在下拉菜单上以展开更多操作。

<script setup>
import { ref } from "vue";
import KDropdown from "@/components/Dropdown/Dropdown.vue";
import KDropdownItem from "@/components/Dropdown/DropdownItem.vue";
import KButton from "@/components/Button/Button.vue";
</script>
<template>
  <div>
    <k-dropdown
      placement="bottom-start"
      trigger="hover"
      transition="fade"
      :hideAfterClick="true"
    >
      <template #default>
        <k-button type="info">Dropdown按钮</k-button>
      </template>
      <template #dropdown>
        <k-dropdown-item icon="arrow-up">这是drop内容1</k-dropdown-item>
        <k-dropdown-item divided icon="xmark">这是drop内容2</k-dropdown-item>
        <k-dropdown-item divided :disabled="true"
          >这是drop内容3</k-dropdown-item
        >
      </template>
    </k-dropdown>
  </div>
</template>

触发方式

可以配置点击激活或者悬停激活。

将 trigger 属性设置为 click 即可， 默认为 hover。

<script setup>
import { ref } from "vue";
import KDropdown from "@/components/Dropdown/Dropdown.vue";
import KDropdownItem from "@/components/Dropdown/DropdownItem.vue";
import KButton from "@/components/Button/Button.vue";
</script>
<template>
  <div>
    <k-dropdown
      placement="bottom-start"
      trigger="click"
      transition="fade"
      :hideAfterClick="true"
    >
      <template #default>
        <k-button type="info">Dropdown按钮</k-button>
      </template>
      <template #dropdown>
        <k-dropdown-item icon="arrow-up">这是drop内容1</k-dropdown-item>
        <k-dropdown-item divided icon="xmark">这是drop内容2</k-dropdown-item>
        <k-dropdown-item divided :disabled="true"
          >这是drop内容3</k-dropdown-item
        >
      </template>
    </k-dropdown>
  </div>
</template>

手动打开关闭

将 manual 属性设置为 true 即可， 然后可以使用实例上面的 show 和 hide 方法打开关闭下拉菜单

<script setup>
import { ref } from "vue";
import KDropdown from "@/components/Dropdown/Dropdown.vue";
import KDropdownItem from "@/components/Dropdown/DropdownItem.vue";
import KButton from "@/components/Button/Button.vue";
const dropdownRef = ref();
const open = () => {
  dropdownRef.value?.show();
};
const close = () => {
  dropdownRef.value?.hide();
};
</script>
<template>
  <div class="mb-4">
    <k-button type="primary" @click="open">打开</k-button>
    <k-button type="error" @click="close">关闭</k-button>
  </div>

  <div>
    <k-dropdown
      ref="dropdownRef"
      placement="bottom-start"
      transition="fade"
      :hideAfterClick="true"
      :manual="true"
    >
      <template #default>
        <k-button type="info">Dropdown显示</k-button>
      </template>
      <template #dropdown>
        <k-dropdown-item icon="arrow-up">这是drop内容1</k-dropdown-item>
        <k-dropdown-item divided icon="xmark">这是drop内容2</k-dropdown-item>
        <k-dropdown-item divided :disabled="true"
          >这是drop内容3</k-dropdown-item
        >
      </template>
    </k-dropdown>
  </div>
</template>

API

Dropdown Attributes

Name	Description	Type	Default
placement	菜单位置	enum- 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'	bottom
open-delay	delay of appearance, in millisecond	number	0
close-delay	delay of disappear, in millisecond	number	200
trigger	触发方式	'hover' | 'click'	hover
manual	是否开启手动触发模式	boolean`	false
transition	transition name	string	''
hideAfterClick	点击以后是否自动隐藏菜单	boolean	true
offsets	偏移量	number	9

Dropdown Methods

方法名	说明	参数
show	打开下拉菜单	—
hide	关闭下拉菜单	—

Dropdown 插槽

插槽名	说明	子标签
dropdown	自定义下拉 menu 组件

Dropdown-Item Attributes

属性名	说明	类型	可选值	默认值
label	自定义名称	string | VNode	—	—
disabled	是否禁用	boolean	—	false
divided	是否显示分隔符	boolean	—	false
icon	自定义图标	string	图标库	—

Dropdown-Item Slots

插槽名	说明
—	自定义 Dropdown-Item 内容