引入组件

局部引入

// parent.vue
const FFab = defineAsyncComponent(() => import('@/components/formaui/f-fab/f-fab.vue'))

基础用法

<f-button width="200rpx" margin="24rpx auto" @click="position = 'bottomRight'">右下角</f-button>
<f-button width="200rpx" margin="24rpx auto" @click="position = 'bottomLeft'">左下角</f-button>
<f-button width="200rpx" margin="24rpx auto" @click="position = 'topRight'">右上角</f-button>
<f-button width="200rpx" margin="24rpx auto" @click="position = 'topLeft'">左上角</f-button>
<f-button width="200rpx" margin="24rpx auto" @click="isCustomBtns = !isCustomBtns">自定义按钮列表</f-button>
<f-button width="200rpx" margin="24rpx auto" @click="btnDirection = btnDirection === 'column' ? 'row' : 'column'">{{ btnDirection === 'column' ? '纵向' : '横向' }}列表</f-button>
<f-fab :position="position" :btns="btns" :is-custom-btns="isCustomBtns" :btn-direction="btnDirection" @click="handleClick" @clickBtn="handleClickItem">
  <tui-icon color="white" name="plus"></tui-icon>
  <template #btns>
    <view class="p-[24rpx] bg-white rounded-md">自定义按钮1</view>
    <view class="p-[24rpx] bg-white rounded-md">自定义按钮2</view>
    <view class="p-[24rpx] bg-white rounded-md">自定义按钮3</view>
  </template>
</f-fab>

import { ref } from 'vue'
const showPopup = ref<boolean>(false)

插槽

名称	说明
default	弹出层展示的内容
closeIcon	弹出层关闭图标

属性

名称	类型	说明	默认值
position	string	弹出层位置，可传入[bottomRight、bottomLeft、topRight、topLeft]	bottomRight
isMask	boolean	是否显示遮罩层	true
width	string	自定义宽度	108rpx
height	string	自定义高度	108rpx
top	string	自定义上偏移量	auto
bottom	string	自定义下偏移量	54rpx
left	string	自定义左偏移量	auto
right	string	自定义右偏移量	54rpx
borderRadius	string	自定义圆角大小	16rpx
bgColor	string	自定义弹框背景颜色	#FFFFFF
zIndex	number	自定义弹框 z-index	12000
btns	boolean	按钮列表：{width?: string; height?: string; borderRadius?: string; bgColor?: string; fontSize?: string color?: string; label: string; value:string/number disabled?: boolean}[]	[]
btnDirection	string	按钮列表方向	column
btnGap	string	按钮列表间距	32rpx
isCustomBtns	boolean	是否自定义按钮列表	false

事件

事件名	说明	回调参数
click	点击fab时触发	-
btnClick	点击按钮时触发	btn值

方法

方法名	说明	传入参数
-	-	-