Fab 浮动按钮钮

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="悬浮按钮">
		<t-card class='m.30' title="Fab 悬浮按钮" sub-title="动态的展开和收起子菜单，支持多种展开方向，如垂直、水平以及圆形扩散，支持自由拖拽"></t-card>
		<t-fab type="p" menuSize="80" class="dl.300-dt.450" :rotateDeg="60" :value="true" direction='round'
			spacing="20">
			<template v-slot:menu>
				<t-icon name="close" class="c.#fff"></t-icon>
			</template>
			<t-fab-item>
				<t-icon name="weixin-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="home" c class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="apple-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="integral-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="account-fill" class="c.#fff"></t-icon>
			</t-fab-item>
		</t-fab>
		<t-fab type="p" menuSize="80" class="dl.300-dt.850" :rotateDeg="60" :value="true" direction='round'
			:startRtateDeg="160" spacing="20">
			<template v-slot:menu>
				<t-icon name="close" class="c.#fff"></t-icon>
			</template>
			<t-fab-item>
				<t-icon name="weixin-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="home" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill" class="c.#fff"></t-icon>
			</t-fab-item>
		</t-fab>
		<t-fab type="error" class="dl.50-dt.160" :value="true" direction='column-bottom'>
			<template v-slot:menu>
				<t-icon name="close" class="c.#fff"></t-icon>
			</template>
			<t-fab-item>
				<t-icon name="weixin-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="home" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="star-fill" class="c.#fff"></t-icon>
			</t-fab-item>
		</t-fab>
		<t-fab type="s" class="dr.50-db.50" :value="true" direction='column-top'>
			<template v-slot:menu>
				<t-icon name="close" class="c.#fff"></t-icon>
			</template>
			<t-fab-item>
				<t-icon name="weixin-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="home" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="star-fill" class="c.#fff"></t-icon>
			</t-fab-item>
		</t-fab>
		<t-fab type="p" class="dl.50-db.50" :value="true" direction='row-right'>
			<template v-slot:menu>
				<t-icon name="close" class="c.#fff"></t-icon>
			</template>
			<t-fab-item>
				<t-icon name="weixin-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="home" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="star-fill" class="c.#fff"></t-icon>
			</t-fab-item>
		</t-fab>
		<t-fab type="w" class="dr.50-dt.160" :value="true" direction='row-left'>
			<template v-slot:menu>
				<t-icon name="close" class="c.#fff"></t-icon>
			</template>
			<t-fab-item>
				<t-icon name="weixin-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="home" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill" class="c.#fff"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="star-fill" class="c.#fff"></t-icon>
			</t-fab-item>
		</t-fab>
	</t-page>
</template>

Props t-fab

名称	描述	类型	默认值	可选值
menuSize	菜单尺寸	String	'80rpx'	-
left	距离左侧的距离	String	''	-
right	距离右侧的距离	String	''	-
bottom	距离底部的距离	String	''	-
top	距离顶部的距离	String	''	-
value	按钮的值	Boolean	false	true, false
direction	按钮展开的方向	String	'row-top'	'row-top', 'column-bottom', 'column-top', 'row-right', 'row-left', 'round'
spacing	按钮之间的间距	String	'20rpx'	-
zIndex	z-index值	Number	100	-
startRtateDeg	起始旋转角度	Number	0	-
rotateDeg	旋转角度	Number	60	-