更新记录

v2.1.0(2020-10-16)

修复竖直方向吸附方向边界的判断

v2.0.0(2020-09-18)

修复小程序兼容问题

v1.1.0(2020-08-31)

修复吸附bug

查看更多

平台兼容性

使用方式: 放入componets文件夹(小程序要绑定style变量,h5不用,都有全部写上也没关系)

<drag-button-follow :style.sync="style" className="drag-button" class="drag-button">我的</drag-button-follow>
export default {
    data(){
        return {
            style: ''
        }
    }
}

css使用定位,以下是示例,可修改位置和长相 (注意:本例子使用的是absolute定位,父级容器要使用relative或absolute或fixed定位,若无父级容器,本组件可使用fixed定位)

.drag-button{
    background: #FFFFFF;
    border: 0.5px solid #EEEEEE;
    box-shadow: 0 5rpx 10rpx 0 rgba(0,0,0,0.08);
    width: 100rpx;
    height: 100rpx;
    font-size: 24rpx;
    color: #000000;
    position: absolute;
    right: 40rpx;
    bottom: 188rpx;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

属性

属性名 默认值 说明
className丨class String '' 容器属性名,两个值是一样的,都要写上
style.sync String '' 回写的属性,微信小程序必须,h5不用
drag Boolean true 是否可拖动
follow Boolean丨String all 是否贴边,可取left,right,top,bottom,all,可以使用false不吸附, 也可以取多个值,用,隔开
followNum Number 0 贴边偏移百分比,可用负值
@btnClick Function 点击之后的动作

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问