更新记录

1.0.0（2025-01-17）

无

平台兼容性

uni-app

其他

使用说明

简介

全能型弹出（悬浮）菜单，支持所有业务需求的弹出菜单自定义，兼容vue2/3、小程序，app-vue， 带默认菜单效果，可设置多种属性，可设置菜单Style,可设置菜单选项Style，所有弹出菜单一网打尽！

引入

默认为easycom模式，可直接键入<shinn-xPopMenu>标签。

事件列表

/**
 * onMenuClick默认菜单 选项被点击时触发
 */

组件方法

/**
 * showPop手动显示菜单
 * hidePop手动隐藏菜单
 */

参数列表

//显示的位置
//可选值:top/top-start/top-end/bottom/bottom-start/
//bottom-end/left/left-start/left-end/right/right-start/right-end
position: {
    type: String,
    default: "bottom",
    required: false,
},
//悬浮菜单数组，如果不设置或者数组长度为0，那么使用自定义样式
menuList: {
    type: Array,
    default: () => {
        return []
    },
    required: false
},
//触发方式 click点击触发 longPress长按触发
trigger: {
    type: String,
    default: "click",
    required: false,
},
//使用默认样式时，设置菜单的方向
direction: {
    type: String,
    default: "row",
    required: false,
},
//延迟多久关闭弹窗框,-1延迟关闭
delay: {
    type: Number,
    default: 2000,
    required: false,
},
//默认菜单样式-背景色
backgroundColor: {
    type: String,
    default: "#000000",
    required: false,
},
//默认菜单样式-文字颜色
fontColor: {
    type: String,
    default: "#ffffff",
    required: false,
},
//默认菜单样式-文字大小
fontSize: {
    type: Number,
    default: 30,
    required: false,
},
//默认菜单自定义样式
customStyle: {
    type: Object,
    default: () => {
        return {}
    },
    required: false,
},
//默认菜单选项自定义样式
customItemStyle: {
    type: Object,
    default: () => {
        return {}
    },
    required: false,
}

示例代码

<template>
    <view class="base">
        <shinn-xPopMenu class="menu" ref="xPopMenu" :position="position" :menuList="menuList" @onMenuClick="onMenuClick"
            direction="row" :delay="-1" trigger="click" backgroundColor="#000" fontColor="#fff" :fontSize="30"
            :customStyle="{
            'font-weight':'normal'
        }">
            <template #default>
                <view class="pop">被绑定元素</view>
            </template>
            <template #menu>
                <view>自定义弹出样式</view>
            </template>
        </shinn-xPopMenu>
        <view class="button">
            <view @click="clickPosition('top')">top</view>
            <view @click="clickPosition('bottom')">bottom</view>
            <view @click="clickPosition('left')">left</view>
            <view @click="clickPosition('right')">right</view>
            <view @click="clickPosition('top-start')">top-start</view>
            <view @click="clickPosition('top-end')">top-end</view>
            <view @click="clickPosition('bottom-start')">bottom-start</view>
            <view @click="clickPosition('bottom-end')">bottom-end</view>
            <view @click="clickPosition('left-start')">left-start</view>
            <view @click="clickPosition('left-end')">left-end</view>
            <view @click="clickPosition('right-start')">right-start</view>
            <view @click="clickPosition('right-end')">right-end</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                menuList: ["复制", "粘贴"],
                position: "bottom"
            }
        },
        methods: {
            onMenuClick(item) {
                console.log(item)
                this.$refs.xPopMenu.hidePop()
            },
            clickPosition(p) {
                this.position = p
                this.$refs.xPopMenu.showPop()
            }
        }
    }
</script>

<style scoped lang="scss">
    .base {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .button {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 100rpx;
        justify-content: space-around;

        view {
            margin: 20rpx 0rpx;
            width: 220rpx;
            height: 60rpx;
            line-height: 60rpx;
            border-radius: 20rpx;
            border: 1rpx solid #ccc;
            text-align: center;
        }
    }

    .menu{
        margin-top: 300rpx;
    }

    .pop {
        border: 1rpx solid #eee;
        background-color: #ccc;
        border-radius: 20rpx;
        width: 200rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
    }
</style>