更新记录

1.0.2（2024-04-07）

合并参数

1.0.1（2024-04-07）

自己用

平台兼容性

zeng-drag-fab适用于uni-app项目的可拖动悬浮按钮组件

本组件目前兼容微信小程序、H5、app

本组件是可拖动的悬浮按钮，兼容小程序、H5，支持自动停靠，支持自定义样式，源码简单易修改

使用方式

<zeng-drag-fab :contentList="contentList" :config="config" @trigger="trigger" @fabClick="fabClick" />

export default {
    data() {
        return {
            config: {
                // 按钮距离底部距离
                bottompx: 50,
                // 按钮距离右边距离
                rightpx: 170,
                // 是否可以移动
                disabled: false,
                // 是否自动吸边
                canDocking: false,
                // 样式可选配置
                pattern: {
                    color: '#3c3e49',
                    selectedColor: '#007AFF',
                    backgroundColor: '#fff',
                    buttonColor: '#0076fb',
                    iconColor: '#fff',
                    icon: 'plusempty'
                },
            },
            contentList: [{
                    // 文字配置
                    text: '刷新',
                    // 默认图标
                    iconPath: '/static/home.png',
                    // 是否选中
                    active: false,
                    // 切换选中图标
                    selectedIconPath: '/static/refresh.png',
                },
                {
                    text: '筛选',
                    iconPath: '/static/home.png',
                    active: false,
                    selectedIconPath: '/static/refresh.png',
                },
                {
                    text: '菜单',
                    iconPath: '/static/home.png',
                    active: false,
                    selectedIconPath: '/static/refresh.png',
                },
            ]
        };
    },
    methods: {
        // 点击触发
        handleClickBtn() {
            console.log('点击触发');
        },
        // 选中回调
        trigger({
            index,
            item
        }) {
            console.log(`选中列表中的第${index+1}项`, item);
            this.contentList.forEach((v, i) => {
                if (index == i) {
                    v.active = true
                }else{
                    v.active = false
                }
            })
        },
        // 打开关闭回调
        fabClick() {
            console.log('打开列表');
            this.contentList.forEach(v=>v.active=false)
        }
    }
}

config 属性说明

pattern 属性说明