更新记录

1.0.0（2023-05-08） 下载此版本

发布

平台兼容性

悬浮球

长期维护，欢迎使用，欢迎提出您宝贵的意见

第一步，引用组件

import dyFloatingBall from '@/components/dy-floating-ball';

第二步，注册组件

components: {
    dyFloatingBall
}

Props

Options

Events

Slot

示例代码

<template>
    <view>
        <view class="box">
            <dy-floating-ball
                    class="dyFloatingBall"
                    :ballStyle="ballStyle"
                    :ballLeaveUnusedStyle="ballLeaveUnusedStyle"
                    :options="options"
                    @diyEvent="diyEvent"
                    @edgePoint="edgePoint"
                    @leaveUnused="leaveUnused"
            >
                <view class="ball" slot="ball">球</view>
            </dy-floating-ball>
        </view>
    </view>
</template>

<script>
    import dyFloatingBall from '@/components/dy-floating-ball';

    export default {
        data() {
            return {
                ballStyle: { // 小球初始化样式
                    width: '100rpx',
                    height: '100rpx',
                    backgroundImage: 'url(https://img-cdn-aliyun.dcloud.net.cn/dev/img/ext/logo-d.png)',
                    left: '650rpx',
                    top: '0rpx',
                },
                ballLeaveUnusedStyle: { // 小球闲置样式
                    color: '#fff',
                    backgroundColor: '#e4393c',
                    backgroundImage: 'linear-gradient(0deg, #36A5ED 0%, #6EEE96 100%)',
                },
                options: { // 配置
                    moveX: true, // 允许水平移动
                    moveY: true, // 允许垂直移动
                    isEdge: 1, // 0不吸边，1吸边，2仅左吸边，3仅右吸边
                    edgeTime: 17, // 吸边定时器单次时长
                    edgeStep: 17, // 吸边定时器单次步长
                    isAcceleratedSpeed: true, // 是否需要加速度
                    acceleratedSpeedForceOfFriction: 0.95, // 摩擦力，建议0.95左右，0<摩擦力<1
                    leaveUnusedTime: 3000, // 闲置时长，小于等于0为不进入闲置
                    leaveUnusedStatus: true, // 默认闲置状态
                },
            }
        },
        components: {
            dyFloatingBall,
        },
        methods: {
            diyEvent(e) {
                console.log('对小球操作了', e);
            },
            edgePoint(e) {
                console.log('小球停靠了', e);
            },
            leaveUnused() {
                console.log('小球闲置了');
            },
        }
    }
</script>