t-action-menu

ActionMenu 操作菜单

组件介绍

t-action-menu 用于从页面底部弹出一组操作内容，适合分享菜单、操作列表、快捷入口等场景。组件本身不限制菜单内容结构，主要通过插槽承载内容，因此在简单列表、图文宫格、分页分享面板等布局里都能复用。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/action-menu/action-menu.uvue，通过 button 插槽定义触发按钮，通过默认插槽放置菜单内容。

<t-action-menu title="请选择" button-text="取消">
  <template v-slot:button>
    <t-button type="primary" class="mb-30">菜单</t-button>
  </template>

  <t-col class="mtb-20">
    <t-row :class="[`tpl fc tvg mb-2px`]" :hover="true" v-for="i in 3">
      <text>选项{{i}}</text>
    </t-row>
  </t-col>
</t-action-menu>

如果你希望做成分享面板，可以在默认插槽中继续放 swiper、图标列表或任意自定义布局：

<t-action-menu title="分享到" :content-class="`trm-lr`" button-text="取消">
  <template v-slot:button>
    <t-button type="error" class="mb-30">分享</t-button>
  </template>

  <t-row :class="`mtb-10 tvg`">
    <swiper style="height: 200rpx;width:100%;">
      <swiper-item style="display: flex;flex-direction: row;align-items: center;justify-content: center;">
        <t-col class="faic mlbr-40">
          <image class="twh-60 mb-10" src="/static/image/qq.png"></image>
          <text>QQ</text>
        </t-col>
      </swiper-item>
    </swiper>
  </t-row>
</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	''

Events

源码中通过 defineEmits 暴露了以下事件：

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-

说明：当前 t-action-menu 自身源码没有直接绑定这几个事件的触发逻辑，更多是作为公共组件事件约定保留在文档注释中。如果你后续继续完善源码实现，文档这里也建议同步更新。

Slots

插槽名	说明
default	菜单主体内容区域，用来放操作项、自定义列表、分享布局等
button	触发弹出的按钮区域，常用于放置 t-button

Methods

组件通过 defineExpose 暴露了以下实例方法：

方法名	说明
show	调用内部 t-popup 的 show 方法，用于切换菜单显示状态

可以通过 ref 获取组件实例后手动控制显示：

<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>