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}

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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