RzUI

Appearance

Dropdown 下拉菜单 ​

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

基础用法 ​

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

<template>
  <div class="basic block">
    <Dropdown placement="bottom" :menu-options="options">
      <Button type="primary"> Hover 下拉菜单 </Button>
    </Dropdown>
  </div>
</template>
<script setup>
import { h } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/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>
<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">
    <Dropdown placement="bottom" :menu-options="options" trigger="click">
      <Button type="primary"> 点击触发下拉菜单 </Button>
    </Dropdown>
  </div>
</template>
<script setup>
import { h } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/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>

手动打开关闭 ​

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



<template>
  <div class="basic block">
    <Dropdown placement="bottom" :menu-options="options" trigger="click" manual ref="tooltipRef">
      <Button> 菜单容器 </Button>
    </Dropdown>
    <br /><br />
    <Button type="primary" @click="open"> 点击手动触发显示 </Button>
    <Button type="danger" @click="close"> 点击手动触发隐藏 </Button>
  </div>
</template>
<script setup>
import { h, ref } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/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>

Attributes ​

属性名详情类型默认值
menuOptions菜单选项^MenuOption[][]
placement菜单位置^[enum]'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'bottom
popper-optionspopper.js 参数^[object] 参考 popper.js 文档{}
open-delay出现延迟，单位：毫秒^[number]0
close-delay消失延迟，单位：毫秒^[number]200
trigger触发方式^[enum]'hover' | 'click'hover
manual是否开启手动触发模式^[boolean]false
transition过渡效果名称^[string]''
hideAfterClick点击后是否自动隐藏菜单^[boolean]true
属性名详情类型默认值
label菜单展示标签'string' | 'vNode'
key菜单选项 Key'string' | 'number'
disabled是否禁用booleanfalse
divided是否显示分隔符booleanfalse

Events ​

属性名详情类型
visible-change当 tooltip 展示/隐藏时被触发boolean
select当选择到某一个选项的时候被触发MenuOption

Exposes ​

属性名详情类型
showexpose show function^[Function](event?: Event | undefined) => void
hideexpose hide function^[Function](event?: Event | undefined) => void