更新记录

0.0.2（2023-06-30）

• feat: 支持vue2配置@vue/composition-api使用本插件

0.0.1（2023-06-19）

• 初版

平台兼容性

lime-ball 小球飞入

• uniapp vue3 添加商品小球跳到购物车效果，目前仅在H5、微信小程序、nvue上测试过
• 初版可能有BUG，nvue 连续点击会有卡顿，如果你有更好的发送实现，麻烦告之

使用

• 导入插件后直接使用

<!-- 点击加入 -->
<button @click="onClick">加入</button>

<!-- 使用标签包住你的购物车 -->
<l-ball ref="ballRef">
    <!-- 可以导出active变量，小球将要达到时，给这购物车加点动画 -->
    <template #default="{active}">
        <view :class="{active}">购物车</view>
    </template>
</l-ball>

const ballRef = ref(null)
// 注意nvue目前点击无法获取坐标，需要你单独处理
const onClick = (e) => {
    if(!ballRef.value) return
    ballRef.value.action(e)
}

查看示例

导入后直接使用这个标签查看演示效果，

// 代码位于 uni_modules/lime-ball/compoents/lime-ball
<lime-ball />

插件标签

• 默认 l-ball 为 component
• 默认 lime-ball 为 demo

API

Props

主题定制

样式变量

• 在nvue下不支持 组件提供了下列 CSS 变量，可用于自定义样式

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。