更新记录
1.01(2025-02-12)
下载此版本
更新了初版不能使用的问题
1.0(2025-02-12)
下载此版本
yf-floatball插件支持调整悬浮球大小、悬浮球点击动画、支持悬浮球拖动、支持文字/图片插入
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
× |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
√ |
√ |
√ |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
快速开始
组件名:yf-floatball
注意事项
为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的使用说明,可以帮你避免一些错误。
基本用法
<!-- 个人中心我的资料模块 -->
<yf-floatball showType='image' :showBadge="showBadge" :background="'linear-gradient(0deg,rgba(131,83,159,1),rgba(184,138,211,1))'" backgroundImage="/static/check.png" badgeText="角标提示" :itemWidth="45" :itemHeight="45" @onclick="rollBack"></yf-floatball>
export default {
components: {},
data() {
return {
showBadge: true,
}
},
methods: {
rollBack(){
console.log('点击悬浮球~')
}
}
}
API
Rate Props
属性名 |
类型 |
默认值 |
说明 |
showType |
String |
text |
text/image两种模式 设置模式为image时可以通过backgroundImage插入图片,模式为text时可以通过floatTextHtml设置显示的文字 |
floatTextHtml |
String |
悬浮球 |
当组件模式为text时floatTextHtml可以传入html代码 |
itemWidth |
Number |
60 |
悬浮球的宽度(单位px) |
itemHeight |
Number |
60 |
悬浮球的高度(单位px) |
borderRadius |
String |
50% |
悬浮球的圆角(设置圆角以px为单位时不要只传数字要带px) |
background |
String |
transparent |
悬浮球的背景色 |
backgroundImage |
String |
:-: |
悬浮球内可插入图片代替文字展示 |
showBadge |
Boolean |
false |
是否显示角标提示 |
badgeText |
String |
:-: |
设置了showBadge为true时此属性用来设置角标提示文字 |
Event
事件名 |
类型 |
回调参数 |
说明 |
onclick |
emit |
:-: |
悬浮球的点击事件 |