Fab 浮动按钮，主要特点是轻盈、便捷、高效，用于在屏幕上执行主要或最常见的操作。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

通过 background 属性设置主按钮背景色，position 属性设置显示位置，fabs 属性设置悬浮按钮数据。

<wui-fab :background="background" :position="isLeft?'left':'right'" :fabs="fabs" @click="handleClick"></wui-fab>

const isLeft = ref(true)
const fabs = ref([{
    name: 'star',
    text: '收藏'
}, {
    name: 'share',
    text: '分享'
}, {
    name: 'fabulous',
    text: '点赞'
}, {
    name: 'comment',
    text: '评论'
}])
const background = ref('#465CFF')

更换主按钮默认图标

通过 zIndex 属性设置组件层级值，自定义图标直接放入组件默认插槽内即可。

<wui-fab :zIndex="10" @click="fabClick">
	<wui-icon name="edit-fill" color="#fff"></wui-icon>
</wui-fab>

//fabs 悬浮按钮（扩展按钮）数据格式
//以下数据属性为约定属性值，其他属性可自行扩展

//注意：扩展按钮中内容显示优先级为：字体图标 > 图片图标 > abbr（简写文本）,且必选其一传值

[{
	//字体图标name值，参考 wui-icon 组件
	name:'star',
	//图片图标src地址，可选
	src: "xxxxxxx.png",
	//图片宽度，单位rpx，可选
	width：64，
	//图片高度，单位rpx，可选
	height:64,
	//图片圆角值，单位rpx，可选
	radius:0,
	//按钮标题文本，可选
	text: "收藏",
	//按钮标题文本字体大小，单位rpx，可选
	size: 30,
	//按钮标题文本字体颜色，可选
	color: "#fff",
	//按钮标题简写文本（1~2个字符），可选
	abbr:"按钮文本简写，2个字符以内",
	//按钮标题简写文本字体大小 或 字体图标颜色，可选
	abbrSize:80,
	//按钮标题简写文本颜色 或 字体图标颜色，可选
	abbrColor:'#fff',
	//按钮背景色，可选
	background: "#465CFF"
}]

Slots

插槽名称	说明
default	主按钮显示内容，用于替换默认加号图标

Props

属性名	类型	说明	默认值	平台差异说明
fabs	Array	悬浮按钮（扩展按钮）数据，具体格式见下方说明	[ ]	-
position	String	显示位置，可选值：left、right	right	-
distance	Number, String	距离屏幕左侧或右侧距离，单位rpx	80	-
bottom	Number, String	距离屏幕底部距离，单位rpx	120	-
width	Number, String	按钮宽度（宽高相等），单位rpx	108	-
background	String	主按钮背景颜色，扩展按钮如果未设置背景色，则使用主按钮背景色	#465CFF	非Nvue端默认为空，可使用css变量（--wui-color-primary）来改变颜色值
color	String	主按钮字体颜色	#fff	-
mask	Boolean	是否需要遮罩层	true	-
maskBackground	String	遮罩层背景色	rgba(0,0,0,.6)	-
maskClosable	Boolean	点击遮罩层，是否可关闭	false	-
zIndex	Number, String	悬浮按钮层级z-index值	99	Nvue端不支持，默认越靠后的元素层级越高

Events

事件名	说明	回调参数
@click	点击扩展按钮 或 无扩展按钮时点击主按钮时触发	{ index:按钮索引值 }
@change	有扩展按钮时切换显示时触发	{ isShow:是否显示 }