Dropdown 下拉菜单

一个折叠式的列表，基于UtpTooltip组件编写，支持UtpTooltip组件部分属性 ——该组件泛用性一般，对策性极强 (大杯)

基本使用

传入一个MenuOptions对象的数组来构成菜单，MenuOptions属性请参考下方表格；
可以通过MenuOptions对象中传入divided来进行菜单分组；
可以通过MenuOptions对象中传入disabled来进行对某一选项的禁用；
菜单支持Vnode函数传入；

基本使用

基本菜单

<!-- 下拉菜单基本使用 -->
<script setup>
import { UtpDropdown, UtpIcon } from '@will1919/utopia-ui';
import { ref, h } from 'vue';

const menuOptions = ref([
  { key: 1, label: 'item-a' },
  { key: 2, label: 'item-b', disabled: true },
  { key: 3, label: h('i', { style: { fontWeight: 'bold' } }, 'item-c') },
  { key: 4, label: 'item-d', divided: true }
])

const toolTipVisible = ref(false)
const iconType = ref('')
const visibleChange = (visible) => {
  toolTipVisible.value = visible
  if(visible) {
    iconType.value = 'primary'
  } else {
    iconType.value = ''
  }
}
</script>

<template>
  <div>
    <utp-dropdown @visible-change="visibleChange" :menu-options="menuOptions">
      <div class="basic-menu" :class="{ 'basic-menu-active': toolTipVisible }">
        <span class="basic-menu-title">基本菜单</span>
        <utp-icon :type="iconType" icon="fa-caret-down"></utp-icon>
      </div>
    </utp-dropdown>
  </div>
</template>

<style scoped>
.basic-menu {
  display: flex;
  align-items: center;

  .basic-menu-title {
    margin-right: 5px;
  }
}

.basic-menu-active {
  .basic-menu-title {
    color: #F15A7C;
  }
}
</style>

Dropdown API

属性

属性	说明	类型	默认值
menuOptions	设置菜单数组	Array<MenuOptions>	hover
trigger	设置提示文本触发方式	hover | click	hover
placement	设置提示文本显示方向	Placement: 参考ToolTip组件	bottom
manual	设置手动模式	boolean	false
popperOptions	popperJs配置项	object	—
openDelay	设置显示延迟时间	number	0
closeDelay	设置隐藏延迟时间	number	0

MenuOptions对象属性

属性	说明	类型	默认值
label	选项名称	string | VNode	—
key	选项key	string | number	—
disabled	是否禁用选项	boolean	false
divided	是否分组	boolean	false

事件

事件名称	说明	事件类型
visible-change	切换显示状态的回调函数	(visible: boolean) => void
select	点击菜单选项的回调函数	(item: MenuOptions) => void

Exposes

名称	说明	类型
show	显示菜单的方法	() => void
hide	隐藏菜单的方法	() => void