悬浮按钮

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

组件结构

<template>
	<view @touchmove.stop.prevent>
		<view class="tui-fab-box" :class="{'tui-fab-right':!left || (left && right)}" :style="{left:getLeft(),right:getRight(),bottom:bottom+'rpx'}">
			<view class="tui-fab-btn" :class="{'tui-visible':isOpen,'tui-fab-hidden':hidden}">
				<view class="tui-fab-item-box" :class="{'tui-fab-item-left':left && !right && item.imgUrl}" v-for="(item,index) in btnList"
				 :key="index" @tap.stop="handleClick(index)">
					<view :class="[left && !right?'tui-text-left':'tui-text-right']" v-if="item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
					<view class="tui-fab-item" :style="{width:width+'rpx',height:height+'rpx',background:item.bgColor || bgColor,borderRadius:radius}">
						<view class="tui-fab-title" v-if="!item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
						<image :src="item.imgUrl" class="tui-fab-img" v-else :style="{width:item.imgWidth+'rpx',height:item.imgHeight+'rpx'}"></image>
					</view>
				</view>
			</view>
			<view class="tui-fab-item" :class="{'tui-active':isOpen}" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius,background:bgColor,color:color}"
			 @tap.stop="handleClick(-1)">
				<view class="tui-fab-icon tui-icon-plus"></view>
			</view>
		</view>
		<view class="tui-fab-mask" :class="{'tui-visible':isOpen}" @tap="handleClickCancel"></view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiFab",
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

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%
bgColor String 按钮背景颜色 #5677fc
color String 字体颜色 #fff
btnList Array 拓展按钮列表 []
maskClosable Boolean 点击遮罩 是否可关闭 false

btnList 数据项格式

名称 描述
bgColor 背景颜色
imgUrl 图标/图片地址
imgHeight 图片高度 单位rpx
imgWidth 图片宽度 单位rpx
text 名称
fontSize 字体大小
color 字体颜色

methods

名称 描述
@click 按钮点击事件,回传index信息,当有扩展按钮时,默认按钮点击只做【打开/关闭】操作

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/fab/fab

H5二维码

小程序二维码