Tu View PlusDropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。
基础用法
下拉菜单的基本用法。默认情况下，点击触发菜单的元素显示下拉菜单。
<template>
<tu-dropdown @select="handleSelect">
<tu-button>下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item :value="'3'">选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown disabled>
<tu-button disabled>禁用下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item :value="'3'">选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template>
<script lang="ts" setup>
const handleSelect = (v: string) => {
console.log(v);
};
</script><template>
<tu-dropdown @select="handleSelect">
<tu-button>下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item :value="'3'">选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown disabled>
<tu-button disabled>禁用下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item :value="'3'">选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template>
<script lang="ts" setup>
const handleSelect = (v: string) => {
console.log(v);
};
</script>弹出方向
通过 position 支持指定 6 种弹出方位，分别是：top、 tl、 tr、 bottom、 bl、 br。
<template>
<tu-dropdown position="bl">
<tu-button>左下</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="bottom">
<tu-button>下方(默认)</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="br">
<tu-button>右下</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="tl">
<tu-button>上左</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="top">
<tu-button>上方</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="tr">
<tu-button>右上</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template><template>
<tu-dropdown position="bl">
<tu-button>左下</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="bottom">
<tu-button>下方(默认)</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="br">
<tu-button>右下</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="tl">
<tu-button>上左</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="top">
<tu-button>上方</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown position="tr">
<tu-button>右上</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template>触发方式
通过 trigger 指定触发方式，可悬停或点击方式触发。
<template>
<tu-dropdown>
<tu-button>点击触发</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown trigger="hover">
<tu-button>悬停触发</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template><template>
<tu-dropdown>
<tu-button>点击触发</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown trigger="hover">
<tu-button>悬停触发</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template>按钮下拉菜单
可以使用 tu-dropdown-button 组件用来展示右边是额外相关功能菜单的按钮。
<template>
<tu-dropdown-button>
发布
<template #content>
<tu-dropdown-item>保存</tu-dropdown-item>
<tu-dropdown-item>保存并刷新</tu-dropdown-item>
</template>
</tu-dropdown-button>
<tu-dropdown-button>
发布
<template #icon>
<tu-icon>
<MoreFilled />
</tu-icon>
</template>
<template #content>
<tu-dropdown-item>保存</tu-dropdown-item>
<tu-dropdown-item>保存并刷新</tu-dropdown-item>
</template>
</tu-dropdown-button>
<tu-dropdown-button disabled>
发布
<template #content>
<tu-dropdown-item>保存</tu-dropdown-item>
<tu-dropdown-item>保存并刷新</tu-dropdown-item>
</template>
</tu-dropdown-button>
</template>
<script lang="ts" setup>
import { MoreFilled } from '@tu-view-plus/icons-vue';
</script><template>
<tu-dropdown-button>
发布
<template #content>
<tu-dropdown-item>保存</tu-dropdown-item>
<tu-dropdown-item>保存并刷新</tu-dropdown-item>
</template>
</tu-dropdown-button>
<tu-dropdown-button>
发布
<template #icon>
<tu-icon>
<MoreFilled />
</tu-icon>
</template>
<template #content>
<tu-dropdown-item>保存</tu-dropdown-item>
<tu-dropdown-item>保存并刷新</tu-dropdown-item>
</template>
</tu-dropdown-button>
<tu-dropdown-button disabled>
发布
<template #content>
<tu-dropdown-item>保存</tu-dropdown-item>
<tu-dropdown-item>保存并刷新</tu-dropdown-item>
</template>
</tu-dropdown-button>
</template>
<script lang="ts" setup>
import { MoreFilled } from '@tu-view-plus/icons-vue';
</script>分组下拉菜单
可以使用 tu-dropdown-group 元素实现分组效果。
<template>
<tu-dropdown>
<tu-button>分组菜单</tu-button>
<template #content>
<tu-dropdown-group title="标题1">
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</tu-dropdown-group>
<tu-dropdown-group title="标题2">
<tu-dropdown-item>选项4</tu-dropdown-item>
<tu-dropdown-item>选项5</tu-dropdown-item>
<tu-dropdown-item>选项6</tu-dropdown-item>
</tu-dropdown-group>
</template>
</tu-dropdown>
</template><template>
<tu-dropdown>
<tu-button>分组菜单</tu-button>
<template #content>
<tu-dropdown-group title="标题1">
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</tu-dropdown-group>
<tu-dropdown-group title="标题2">
<tu-dropdown-item>选项4</tu-dropdown-item>
<tu-dropdown-item>选项5</tu-dropdown-item>
<tu-dropdown-item>选项6</tu-dropdown-item>
</tu-dropdown-group>
</template>
</tu-dropdown>
</template>多级菜单
带有多级菜单的下拉框。
<template>
<tu-dropdown>
<tu-button>多级菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-submenu value="option-1">
<template #default>选项2</template>
<template #content>
<tu-dropdown-item>选项2-1</tu-dropdown-item>
<tu-dropdown-submenu value="option-2-2" trigger="hover">
<template #default>选项2-2</template>
<template #content>
<tu-dropdown-item>选项2-1</tu-dropdown-item>
<tu-dropdown-item>选项2-2</tu-dropdown-item>
<tu-dropdown-item>选项2-3</tu-dropdown-item>
</template>
<template #footer>
<div style="padding: 6px; text-align: center">
<tu-button>确定</tu-button>
</div>
</template>
</tu-dropdown-submenu>
<tu-dropdown-item>选项2-3</tu-dropdown-item>
</template>
</tu-dropdown-submenu>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template><template>
<tu-dropdown>
<tu-button>多级菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-submenu value="option-1">
<template #default>选项2</template>
<template #content>
<tu-dropdown-item>选项2-1</tu-dropdown-item>
<tu-dropdown-submenu value="option-2-2" trigger="hover">
<template #default>选项2-2</template>
<template #content>
<tu-dropdown-item>选项2-1</tu-dropdown-item>
<tu-dropdown-item>选项2-2</tu-dropdown-item>
<tu-dropdown-item>选项2-3</tu-dropdown-item>
</template>
<template #footer>
<div style="padding: 6px; text-align: center">
<tu-button>确定</tu-button>
</div>
</template>
</tu-dropdown-submenu>
<tu-dropdown-item>选项2-3</tu-dropdown-item>
</template>
</tu-dropdown-submenu>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template>右键菜单
移入区域后，可点击鼠标右键触发。
右键点击此区域
<template>
<tu-dropdown trigger="contextMenu" alignPoint :style="{ display: 'block' }">
<div class="demo-dropdown-point-area">
<p>右键点击此区域</p>
</div>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template>
<style scoped>
.demo-dropdown-point-area {
display: flex;
align-items: center;
justify-content: center;
height: 260px;
box-shadow: 0px 0px 6px var(--vp-c-divider);
}
</style><template>
<tu-dropdown trigger="contextMenu" alignPoint :style="{ display: 'block' }">
<div class="demo-dropdown-point-area">
<p>右键点击此区域</p>
</div>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template>
<style scoped>
.demo-dropdown-point-area {
display: flex;
align-items: center;
justify-content: center;
height: 260px;
box-shadow: 0px 0px 6px var(--vp-c-divider);
}
</style>弹出框高度
通过 popupMaxHeight 手动设置弹出框最大高度。默认为 true，当菜单条数较多，弹出框为默认高度并显示滚动条，设置为 false 将完整显示所有菜单选项。
<template>
<tu-dropdown>
<tu-button>默认高度</tu-button>
<template #content>
<tu-dropdown-item v-for="i in 12" :key="i">
选项{{ i + 1 }}
</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown :popup-max-height="100">
<tu-button>指定高度</tu-button>
<template #content>
<tu-dropdown-item v-for="i in 12" :key="i">
选项{{ i + 1 }}
</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown :popup-max-height="false">
<tu-button>内容高度</tu-button>
<template #content>
<tu-dropdown-item v-for="i in 12" :key="i">
选项{{ i + 1 }}
</tu-dropdown-item>
</template>
</tu-dropdown>
</template><template>
<tu-dropdown>
<tu-button>默认高度</tu-button>
<template #content>
<tu-dropdown-item v-for="i in 12" :key="i">
选项{{ i + 1 }}
</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown :popup-max-height="100">
<tu-button>指定高度</tu-button>
<template #content>
<tu-dropdown-item v-for="i in 12" :key="i">
选项{{ i + 1 }}
</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown :popup-max-height="false">
<tu-button>内容高度</tu-button>
<template #content>
<tu-dropdown-item v-for="i in 12" :key="i">
选项{{ i + 1 }}
</tu-dropdown-item>
</template>
</tu-dropdown>
</template>不同尺寸
tu-dropdown 组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸：large、small、mini，通过设置 size 属性来配置它们。
<template>
<tu-dropdown size="mini">
<tu-button size="mini">下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown size="small">
<tu-button size="small">下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown>
<tu-button>下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown size="large">
<tu-button size="large">下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template><template>
<tu-dropdown size="mini">
<tu-button size="mini">下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown size="small">
<tu-button size="small">下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown>
<tu-button>下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
<tu-dropdown size="large">
<tu-button size="large">下拉菜单</tu-button>
<template #content>
<tu-dropdown-item>选项1</tu-dropdown-item>
<tu-dropdown-item disabled>选项2</tu-dropdown-item>
<tu-dropdown-item>选项3</tu-dropdown-item>
</template>
</tu-dropdown>
</template>Dropdown API
Dropdown Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| popup-visible(v-model) | 弹出框是否可见 | Boolean | - |
| default-popup-visible | 弹出框默认是否可见（非受控模式） | Boolean | false |
| trigger | 触发方式 | String | click |
| position | 弹出位置 | String | bottom |
| popup-container | 弹出框的挂载容器 | String HTMLElement | - |
| hide-on-select | 是否在用户选择后隐藏弹出框 | Boolean | true |
| size | 尺寸 | String | medium |
Dropdown Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| popup-visible-change | 下拉框显示状态发生改变时触发 | Function |
| select | 用户选择时触发 | Function |
Dropdown Slots
| 参数名 | 描述 |
|---|---|
| content | 内容 |
| footer | 页脚 |
Dropdown-Item Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value | 选项值 | String Number Object | - |
| disabled | 是否禁用 | Boolean | false |
Dropdown-Item Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| click | 点击按钮时触发 | Function |
Dropdown-Item Slots
| 参数名 | 描述 |
|---|---|
| icon | 图标 |
Dropdown-Group Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 分组标题 | String | - |
Dropdown-Group Slots
| 参数名 | 描述 |
|---|---|
| title | 分组标题 |
Dropdown-Submenu Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value | 选项值 | String Number | - |
| disabled | 是否禁用 | Boolean | false |
| trigger | 触发方式 | String | 'click' |
| position | 弹出位置 | String | 'rt' |
| popup-visible(v-model) | 弹出框是否可见 | Boolean | - |
| default-popup-visible | 弹出框默认是否可见（非受控模式） | Boolean | false |
| option-props | 自定义选项属性 | Object | - |
Dropdown-Submenu Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| popup-visible-change | 下拉框显示状态发生改变时触发 | Function |
Dropdown-Submenu Slots
| 参数名 | 描述 |
|---|---|
| icon | 图标 |
| content | 子菜单内容 |
| footer | 页脚 |
Dropdown-Button Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| popup-visible(v-model) | 弹出框是否可见 | Boolean | - |
| default-popup-visible | 弹出框默认是否可见（非受控模式） | Boolean | false |
| trigger | 触发方式 | String | click |
| position | 弹出位置 | String | bottom |
| popup-container | 弹出框的挂载容器 | String HTMLElement | - |
| disabled | 是否禁用 | Boolean | false |
| type | 类型 | String | - |
| size | 尺寸 | String | medium |
| button-props | 按钮属性 | ButtonProps | - |
| hide-on-select | 是否在用户选择后隐藏弹出框 | Boolean | true |
Dropdown-Button Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| popup-visible-change | 下拉框显示状态发生改变时触发 | Function |
| select | 用户选择时触发 | Function |
| click | 点击按钮时触发 | Function |
Dropdown-Submenu Slots
| 参数名 | 描述 |
|---|---|
| icon | 按钮图标 |
| content | 内容 |