CubicBezier 贝塞尔曲线 
概述
CubicBezier 贝塞尔曲线，可用于加入购物车动画。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
注意控制点击元素，动画元素起始位置是获取点击所在的坐标点。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiCubicBezier from "@/components/firstui/fui-cubic-bezier/fui-cubic-bezier.vue"
export default {
components:{
fuiCubicBezier
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
左下方动画
通过 left 属性设置购物车（终点）中心位置left值，bottom 属性设置购物车（终点）中心位置bottom值，param 属性为自定义参数，@click 事件为点击目标元素开始执行动画。
<fui-list-cell :highlight="false">
<view class="fui-list__item">
<text class="fui-text">点击加号加入购物车</text>
<fui-cubic-bezier :left="left" :bottom="bottom" :param="0" @click="handleClick">
<fui-icon name="plussign"></fui-icon>
<template v-slot:badge>
<view class="fui-badge">1</view>
</template>
</fui-cubic-bezier>
</view>
</fui-list-cell>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//data数据
left: 116,
bottom: 140
1
2
3
2
3
右下方动画
通过 direction 属性设置动画方向， right 属性设置购物车（终点）中心位置right值，bottom 属性设置购物车（终点）中心位置bottom值，param 属性为自定义参数，@click 事件为点击目标元素开始执行动画。
<fui-list-cell :highlight="false">
<view class="fui-list__item">
<fui-cubic-bezier direction="rb" :right="right" :bottom="bottom" :param="0" @click="handleClick">
<fui-icon name="plussign"></fui-icon>
<template v-slot:badge>
<view class="fui-badge">1</view>
</template>
</fui-cubic-bezier>
<text class="fui-text">点击加号加入购物车</text>
</view>
</fui-list-cell>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//data数据
right: 100,
bottom: 140
1
2
3
2
3
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 目标（点击）元素 |
| badge | 动画元素 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| direction | String | 动画方向，可选值:rt（右上）、rb（右下）、lb（左下）、lt（左上） | lb | - |
| top | Number, String | 购物车（终点）中心位置top值，单位rpx，direction值为rt，lt时传值 | 100 | - |
| bottom | Number, String | 购物车（终点）中心位置bottom值，单位rpx，direction值为rb，lb时传值 | 100 | - |
| left | Number, String | 购物车（终点）中心位置left值，单位rpx，direction值为lb，lt时传值 | 60 | - |
| right | Number, String | 购物车（终点）中心位置right值，单位rpx，direction值为rt，rb时传值 | 60 | - |
| navbar | Boolean | 页面是否使用了原生导航栏，使用了自定义导航栏时传false | true | 仅nvue支持 |
| param | Number, String | 自定义参数 | 0 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击目标（加号等）元素时触发 | { param:自定义参数 } |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。