# 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