# tui-fab 悬浮按钮

介绍

悬浮按钮,拓展出来的按钮不应多于6个,否则违反了作为悬浮按钮的快速、高效的原则。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiFab from "@/components/thorui/tui-fab/tui-fab"
export default {
	components:{
		tuiFab
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# 微信小程序引入(可在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

事件名 说明 回调参数
click 按钮点击事件,回传index信息,当有扩展按钮时,默认按钮点击只做【打开/关闭】操作 {index:Number}

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码