更新记录
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 | 无 | 点击之后的动作 |