引入组件

局部引入

// parent.vue
const FCubicBezier = defineAsyncComponent(() => import('@/components/formaui/f-cubic-bezier/f-cubic-bezier.vue'))

基础用法

贝塞尔曲线飞入动画，常用场景如添加购物车。将组件叠在加购按钮上，点击后徽标沿曲线飞向 position 终点。

<view class="add-btn">
  <f-icon name="plus" color="#ffffff" :size="32" />
  <f-cubic-bezier
    :window-width="windowWidth"
    :window-height="windowHeight"
    left="0"
    top="0"
    width="56rpx"
    height="56rpx"
    :position="{ left: 44, bottom: 54 }"
    direction="bottom"
    :index="index"
    :params="item.name"
    @click="addCart" />
</view>

import { onMounted, ref } from 'vue'
import type { FCubicBezierClickDetail } from '@/components/formaui/f-cubic-bezier/types'

const windowWidth = ref(375)
const windowHeight = ref(667)
const cartNum = ref(0)

onMounted(() => {
  const info = uni.getWindowInfo()
  windowWidth.value = info.windowWidth
  windowHeight.value = info.windowHeight
})

const addCart = (detail: FCubicBezierClickDetail) => {
  cartNum.value += 1
  console.log(detail.index, detail.params)
}

direction属性：动画方向（默认down）

可传入[up、down、bottom、top]。括号内为 position 必传字段：up(top, right)、down(right, bottom)、bottom(left, bottom)、top(left, top)

<f-cubic-bezier direction="bottom" :position="{ left: 44, bottom: 54 }" />

isCustom属性：是否自定义动画内容（默认false）

<f-cubic-bezier is-custom direction="bottom" :position="{ left: 44, bottom: 54 }">
  <f-icon name="bag" color="#ffffff" :size="28" />
</f-cubic-bezier>

插槽

名称	说明
default	自定义动画内容，需同时设置 isCustom 为 true

属性

名称	类型	说明	默认值
windowWidth	number	屏幕宽度（px），未传时取当前窗口宽度	0
windowHeight	number	屏幕高度（px），未传时取当前窗口高度	0
width	string	动画内容宽度	40rpx
height	string	动画内容高度	40rpx
bgColor	string	动画内容背景色	主题危险色
left	string	相对父级的 left 值	0
top	string	相对父级的 top 值	0
isCustom	boolean	是否自定义动画内容	false
direction	string	动画方向，可传入[up、down、bottom、top]：up 右上，down 右下，bottom 左下，top 左上	down
position	FCubicBezierPosition	动画终点，一般为目标元素中心。按 direction 传入对应字段：top / bottom / left / right，单位 px	{ top: 50, bottom: 80, left: 30, right: 40 }
index	number	列表索引，点击回传	0
params	number | string	自定义参数，点击回传	0

事件

事件名	说明	回调参数
click	点击动画内容时触发	{ index: number, params: number | string }

方法

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