Dropdown 下拉菜单

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

基础用法

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

<script setup>
import { h } from 'vue'
import PfDropdown from '@/components/lib/Dropdown/src/Dropdown.vue'
import PfButton from '@/components/lib/Button/src/Button.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>
<template>
  <div class="mb-4">
    <pf-dropdown placement="bottom" :menu-options="options">
      <pf-button type="primary">Hover触发下拉菜单</pf-button>
    </pf-dropdown>
  </div>
</template>
<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。

<script setup>
import { h } from 'vue'
import PfDropdown from '@/components/lib/Dropdown/src/Dropdown.vue'
import PfButton from '@/components/lib/Button/src/Button.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>
<template>
  <div class="mb-4">
    <pf-dropdown placement="bottom" :menu-options="options" trigger="click">
      <pf-button type="primary">点击触发下拉菜单</pf-button>
    </pf-dropdown>
  </div>
</template>

手动触发

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

<script setup>
import { h, ref } from 'vue'
import PfDropdown from '@/components/lib/Dropdown/src/Dropdown.vue'
import PfButton from '@/components/lib/Button/src/Button.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>
<template>
  <div class="mb-4">
    <pf-dropdown
      placement="bottom"
      :menu-options="options"
      trigger="click"
      manual
      ref="tooltipRef"
    >
      <pf-button>菜单</pf-button>
    </pf-dropdown>
    <br />
    <br />
    <pf-button type="primary" @click="open">点击手动触发显示</pf-button>
    <pf-button type="danger" @click="close">点击手动触发隐藏</pf-button>
  </div>
</template>
<style>
.vp-doc .vitepress-demo-preview-preview ul,
.vp-doc .vitepress-demo-preview-preview ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.pf-dropdown {
  margin-right: 10px;
}
</style>

Dropdown 属性

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

MenuOption

Name	Description	Type	Default
label	菜单展示标签	'string' | 'vNode'
key	菜单选项 Key	'string' | 'number'
disabled	是否禁用	boolean	false
divided	是否显示分隔符	boolean	false

Dropdown 事件

Name	Description	Type
visible-change	当 tooltip 展示/隐藏时被触发	boolean
select	当选择到某一个选项的时候被触发	MenuOption

Dropdown 方法

Name	Description	Type
show	expose show function	^[Function](event?: Event | undefined) => void
hide	expose hide function	^[Function](event?: Event | undefined) => void