# tui-fab 悬浮按钮 开源组件
介绍
悬浮按钮,拓展出来的按钮不应多于6个,否则违反了作为悬浮按钮的快速、高效的原则。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiFab from "@/components/thorui/tui-fab/tui-fab.vue"
export default {
components:{
tuiFab
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-fab": "/components/thorui/tui-fab/tui-fab"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础使用
传入 btnList
属性设置拓展按钮,当 btnList
为[ ]空数组时,则无拓展按钮。
<!--uni-app-->
<tui-fab :btnList="btnList"></tui-fab>
<!--微信小程序-->
<tui-fab btnList="{{btnList}}"></tui-fab>
//data 数据
btnList:[{
bgColor: "#16C2C2",
//名称
text: "关于",
//字体大小
fontSize: 28,
//字体颜色
color: "#fff"
}, {
bgColor: "#64B532",
//名称
text: "分享",
//字体大小
fontSize: 28,
//字体颜色
color: "#fff"
}]
左侧悬浮
设置 left
属性值为80或者适当的值。设置 right
属性值为0,即为'auto'。默认右侧悬浮。
<!--uni-app-->
<tui-fab :left="80" :right="0" :btnList="btnList"></tui-fab>
<!--微信小程序-->
<tui-fab left="{{80}}" right="{{0}}" btnList="{{btnList}}"></tui-fab>
# Slots
插槽名称 | 说明 |
---|---|
default | 默认按钮自定义内容时使用,替换默认加号 |
# Props
属性名 | 类型 | 说明 | 默认值 |
---|---|---|---|
left | Number | left值,为0时值为auto,单位rpx | 0 |
right | Number | right值,当为0时且left不为0,值为auto | 80 |
bottom | Number | bottom值 | 100 |
width | Number | 按钮宽度 | 108 |
height | Number | 按钮高度 | 108 |
radius | String | 圆角值 | 50% |
custom | Boolean | 默认按钮自定义内容,替换默认加号 | false |
bgColor | String | 按钮背景颜色 | #5677fc |
color | String | 字体颜色 | #fff |
btnList | Array | 拓展按钮列表 | [] |
maskClosable | Boolean | 点击遮罩 是否可关闭 | false |
btnList属性 Object对象参数说明
bgColor
背景颜色
imgUrl
图标/图片地址
imgHeight
图片高度 单位rpx
imgWidth
图片宽度 单位rpx
text
名称
fontSize
字体大小
color
字体颜色
# Events
注:uni-app端绑定事件使用@前缀,如@click;微信小程序原生使用bind前缀,如bindclick
事件名 | 说明 | 回调参数 |
---|---|---|
click | 按钮点击事件,回传index信息,当有扩展按钮时,默认按钮点击只做【打开/关闭】操作 | {index:Number} |
# 预览
# 特别说明
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |