更新记录

1.0.1（2025-04-22）

增加菜单图标功能

平台兼容性

uni-app

其他

xt-bubble-menu 文档

1. 支持数据绑定：给组件绑定一个localdata，会自动渲染一组菜单内容。
2. 支持自定义三角箭头方向和位置偏移：菜单三角箭头可自定义设置top、bottom、left、right四个方向及位置偏移量设置。
3. 支持$emit事件：菜单item点击事件、菜单显示时的遮罩点击事件。
4. 支持菜单item图标样式：自定义启用和关闭带图标功能及样式设置。
5. 兼容情况：开发版本为HBuilderX 4.24，在H5端和APP端能正常使用。

安装方式

将组件文件夹复制粘贴到你项目中的components目录，即可在页面template中直接使用，无需import和注册。

属性

事件

基本用法

<template>
    <view style="position:relative;">
        <text @click="showBubbleMenu">气泡菜单</text>

        <!-- 气泡菜单,相对顶层定位 -->
        <xt-bubble-menu :localdata="bubbleMenuBaseData" direction="direction-right" 
        :top="show.bubbleMenuTop" right="70" width="100" offset="15" 
        @maskClick="onMaskClick" @menuItemClick="onMenuItemClick">
        </xt-bubble-menu>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //气泡菜单数据
                bubbleMenuBaseData: [{
                        text: "上移",
                        value: 1,
                        icon:'arrow-up'
                    },
                    {
                        text: "下移",
                        value: 2,
                        icon:'arrow-down'
                    },
                    {
                        text: "修改",
                        value: 3,
                        icon:'compose'
                    },
                    {
                        text: "删除",
                        value: 4,
                        icon:'trash'
                    },
                    {
                        text: "新增",
                        value: 5,
                        icon:'plus'
                    }
                ],
            }
        },

        methods: {          

            //遮罩点击事件
            onMaskClick() {
                console.log("onMaskClick")
            },

            //菜单项单击事件
            onMenuItemClick() {
                console.log("onMenuItemClick")
            }
        }
    }
</script>