mx-action-button

mx-action-button 底部菜单

介绍

mx-action-button 实现了底部弹出菜单的功能。

使用方式

import '../../components/mx-action-button/mx-action-button.stml'

代码示例

基本用法

<mx-action-button 
    v-if={showMenu} 
    title="分享至" 
    items={items} 
    tap-hide 
    @itemclick="onItemClick" 
    @cancel="onCancel" />

API

props 属性

属性名称 说明 类型 默认值
title 弹出菜单标题 string -
items 弹出菜单项 Item[] -
cancel-text 取消按钮标题 string 取消
auto-hide 是否在点击菜单项后关闭 boolean true
tap-hide 是否在点击遮罩层后关闭 boolean false

Item 数据结构

键名 说明 类型
name 菜单项名称 string
icon 菜单项图片 url string

events 事件

事件名 说明 回调参数
itemclick 点击菜单某项时触发 event.detail = {item, index}
cancel 取消时触发 -
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18