VitePressDropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。
基础用法
悬停在下拉菜单上以展开更多操作。
通过组件 slot 来设置下拉触发的元素以及需要通过具名 slot 为 dropdown 来设置下拉菜单。 默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下 拉菜单。
hover
click
<script lang="ts" setup>
const options = [
{ key: 1, label: 'test', command: 'a' },
{ key: 2, label: 'item2', command: 'b', disabled: true },
{ key: 3, label: 'item3', command: 'c', divided: true },
{ key: 4, label: 'item4', command: 'd' },
]
const handler = (command: any) => {
console.log('command:', command)
}
</script>
<template>
<p>hover</p>
<ZgDropdown placement="bottom" :menu-options="options" @select="handler" trigger="hover">
<ZgButton>DropdownDropdown</ZgButton>
<template #dropdown>
<ZgDropdownMenu>
<ZgDropdownItem v-for="item in options" :key="item.key" :disabled="item.disabled" :divided="item.divided" :command="item.command">{{
item.label
}}</ZgDropdownItem>
</ZgDropdownMenu>
</template>
</ZgDropdown>
<p>click</p>
<ZgDropdown placement="bottom" :menu-options="options" @select="handler" trigger="click">
<ZgButton>DropdownDropdown</ZgButton>
<template #dropdown>
<ZgDropdownMenu>
<ZgDropdownItem v-for="item in options" :key="item.key" :disabled="item.disabled" :divided="item.divided" :command="item.command">{{
item.label
}}</ZgDropdownItem>
</ZgDropdownMenu>
</template>
</ZgDropdown>
</template><script lang="ts" setup>
const options = [
{ key: 1, label: 'test', command: 'a' },
{ key: 2, label: 'item2', command: 'b', disabled: true },
{ key: 3, label: 'item3', command: 'c', divided: true },
{ key: 4, label: 'item4', command: 'd' },
]
const handler = (command: any) => {
console.log('command:', command)
}
</script>
<template>
<p>hover</p>
<ZgDropdown placement="bottom" :menu-options="options" @select="handler" trigger="hover">
<ZgButton>DropdownDropdown</ZgButton>
<template #dropdown>
<ZgDropdownMenu>
<ZgDropdownItem v-for="item in options" :key="item.key" :disabled="item.disabled" :divided="item.divided" :command="item.command">{{
item.label
}}</ZgDropdownItem>
</ZgDropdownMenu>
</template>
</ZgDropdown>
<p>click</p>
<ZgDropdown placement="bottom" :menu-options="options" @select="handler" trigger="click">
<ZgButton>DropdownDropdown</ZgButton>
<template #dropdown>
<ZgDropdownMenu>
<ZgDropdownItem v-for="item in options" :key="item.key" :disabled="item.disabled" :divided="item.divided" :command="item.command">{{
item.label
}}</ZgDropdownItem>
</ZgDropdownMenu>
</template>
</ZgDropdown>
</template>Dropdown Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| hideAfterClick | 选择后隐藏 | boolean | — |
其他属性继承于Tooltip
Dropdown Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| visible-change | 选项框显示改变事件 | boolean |
| select | 选中事件 | string | number | Object |
Dropdown Slots
| 插槽名 | Description | 子标签 |
|---|---|---|
| default | 自定义默认内容 | - |
| dropdown | 选项框内容插槽 | Dropdown Item |
Dropdown Item Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| disabled | 是否可选 | boolean | false |
| divided | 分割线 | boolean | false |
| command | 选中后返回的内容 | string | number | Object | — |