V3 Element

Appearance

On this page

Dropdown 下拉菜单 ​

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

基础用法 ​

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

<template>
  <div class="basic block">
    <vk-dropdown placement="bottom" :menu-options="options">
      <vk-button type="primary">Hover 下拉菜单</vk-button>
    </vk-dropdown>
  </div>
</template>

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

const options = [
  { key: 1, label: h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
];
</script>

<style>
.vp-doc .vitepress-demo-preview-preview ul,
.vp-doc .vitepress-demo-preview-preview ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>

触发方式 ​

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

<template>
  <div class="basic block">
    <vk-dropdown placement="bottom" :menu-options="options" trigger="click">
      <vk-button type="primary">点击触发下拉菜单</vk-button>
    </vk-dropdown>
  </div>
</template>

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

const options = [
  { key: 1, label: h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
];
</script>

手动打开关闭 ​

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



<template>
  <div class="basic block">
    <vk-dropdown
      placement="bottom"
      :menu-options="options"
      trigger="click"
      manual
      ref="tooltipRef"
    >
      <vk-button>菜单容器</vk-button>
    </vk-dropdown>
    <br />
    <br />
    <vk-button type="primary" @click="open">点击手动触发显示</vk-button>
    <vk-button type="danger" @click="close">点击手动触发隐藏</vk-button>
  </div>
</template>

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

const options = [
  { key: 1, label: h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
];
const tooltipRef = ref();
const open = () => {
  tooltipRef.value?.show();
};
const close = () => {
  tooltipRef.value?.hide();
};
</script>

API ​

属性 ​

属性名说明类型默认值
menuOptions菜单选项MenuOption[]-
placementTooltip 组件出现的位置enum - 'top'| 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'bottom
transition动画名称stringfade
popper-optionspopper.js 参数object 请参考 popper.js 文档{}
trigger如何触发 Tooltipenum - 'hover'| 'click'hover
open-delay在触发后多久显示内容，单位毫秒number50
close-delay延迟关闭，单位毫秒number50
manual是否开启手动触发模式booleanfalse
hideAfterClick是否在点击菜单项后隐藏菜单booleantrue
属性名说明类型默认值
label菜单展示标签string | VNode-
key菜单选项 Keystring | number-
disabled是否禁用booleanfalse
divided是否显示分隔符booleanfalse

事件 ​

事件名描述类型
visible-change下拉框出现/隐藏时触发(value: boolean) => void
select点击菜单项触发的事件回调(value: MenuOption) => void

插槽 ​

插槽名说明
defaultDropdown 触发 & 引用的元素
content自定义内容

实例 ​

名称说明类型
show打开下拉菜单() => void
hide关闭下拉菜单() => void