# t-action-menu
ActionMenu 操作菜单
t-action-menu 组件介绍
t-action-menu 用于从页面底部弹出一组操作内容，适合分享菜单、操作列表、快捷入口等场景。组件本身不限制菜单内容结构，主要通过插槽承载内容，因此在简单列表、图文宫格、分页分享面板等布局里都能复用。
t-action-menu 平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
t-action-menu 基础用法
基础用法参考 demo/action-menu/action-menu.uvue，通过 button 插槽定义触发按钮，通过默认插槽放置菜单内容。
vue
<template>
<view class="p-15">
<tui-theme-switch></tui-theme-switch>
<t-card class="mb-15"
title="ActionMenu"
subTitle="从底部操作菜单(分享等菜单)-插槽用法灵活布局"></t-card>
<t-action-menu title="请选择"
class=""
button-text="取消">
<template v-slot:button>
<t-button type="primary"
class="mb-15">菜单</t-button>
</template>
<view class="mtb-10">
<t-row :class="[`tpl fc tvg mb-2px`]"
:hover="true"
v-for="i in 3">
<text>选项{{i}}</text>
</t-row>
</view>
</t-action-menu>
<t-action-menu title="分享到"
:content-class="`trm-lr`"
button-text="取消">
<template v-slot:button>
<t-button type="error"
class="mb-15">分享</t-button>
</template>
<t-row :class="`mtb-5 tvg h-120`">
<swiper class="twh-100%">
<swiper-item class="fl faic fjcc">
<view class="faic mlr-20-20"
hover-class="o-0.7">
<image class="twh-30 mb-5"
src="/static/image/qq.png"></image>
<text>QQ</text>
</view>
<view class="faic mlr-20-20"
hover-class="o-0.7">
<image class="twh-30 mb-5"
src="/static/image/zfb.png"></image>
<text>支付宝</text>
</view>
<view class="faic mlr-20-20"
hover-class="o-0.7">
<image class="twh-30 mb-5"
src="/static/image/dy.png"></image>
<text>抖音</text>
</view>
</swiper-item>
<swiper-item class="fl faic fjcc">
<view class="faic mlr-20-20">
<image class="twh-30 mb-5"
src="/static/image/tb.png"></image>
<text>淘宝</text>
</view>
<view class="faic mlr-20-20">
<image class="twh-30 mb-5"
src="/static/image/tm.png"></image>
<text>天猫</text>
</view>
<view class="faic mlr-20-20">
<image class="twh-30 mb-5"
src="/static/image/jd.png"></image>
<text>京东</text>
</view>
<view class="faic mlr-20-20">
<image class="twh-30 mb-5"
src="/static/image/pdd.png"></image>
<text>拼多多</text>
</view>
</swiper-item>
</swiper>
</t-row>
</t-action-menu>
<t-action-menu title="请选择"
button-text="取消">
<template v-slot:button>
<t-button type="success"
class="mb-15">设置样式</t-button>
</template>
<view :class="`mtb-5`">
<t-row :class="`p-15 fc tvg mb-2px`"
:hover="true"
v-for="i in 5">
<text>选项{{i}}</text>
</t-row>
</view>
</t-action-menu>
<view class="h-2000"></view>
</view>
</template>
<script setup>
function test() {
}
</script>t-action-menu Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
path | 点击组件后跳转的页面路径；为空时仅响应事件 | string | '' |
hover | 是否启用点击效果 | boolean | false |
type | 组件主题类型，可选 info、primary、error、warning、success | string | '' |
disabled | 是否禁用 | boolean | false |
effect | 组件显示主题，可选 normal、dark、light、plain | string | 'normal' |
size | 组件尺寸，可选 large、medium、small、mini | string | 'medium' |
title | 菜单顶部标题文本 | string | '标题' |
buttonText | 底部取消区域文本 | string | '取消' |
contentClass | 内容容器自定义样式类，对应外部类 content-class | any | '' |
t-action-menu Events
源码中通过 defineEmits 暴露了以下事件：
| 事件名 | 说明 | 回调参数 |
|---|---|---|
click | 点击时触发 | - |
transitionend | 动画结束时触发 | - |
initFinished | 组件初始化完成时触发，返回组件节点信息 | - |
说明：当前 t-action-menu 自身源码没有直接绑定这几个事件的触发逻辑，更多是作为公共组件事件约定保留在文档注释中。如果你后续继续完善源码实现，文档这里也建议同步更新。
t-action-menu Slots
| 插槽名 | 说明 |
|---|---|
default | 菜单主体内容区域，用来放操作项、自定义列表、分享布局等 |
button | 触发弹出的按钮区域，常用于放置 t-button |
Methods
组件通过 defineExpose 暴露了以下实例方法：
| 方法名 | 说明 |
|---|---|
show | 调用内部 t-popup 的 show 方法，用于切换菜单显示状态 |
可以通过 ref 获取组件实例后手动控制显示：
vue
<template>
<t-action-menu ref="actionMenuRef" title="请选择">
<template v-slot:button>
<t-button @click="openMenu">打开菜单</t-button>
</template>
<t-col>
<text>自定义内容</text>
</t-col>
</t-action-menu>
</template>
<script setup>
const actionMenuRef = ref<ComponentPublicInstance | null>(null)
function openMenu() {
actionMenuRef.value?.$callMethod('show')
}
</script>