更新记录

1.0.0(2021-06-30) 下载此版本

发布插件


平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- × × - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
× × × × - - - × - × ×

其他

多语言 暗黑模式 宽屏模式
× ×

演示地址 https://static-04713dad-0088-4598-9c43-be27d990a230.bspapp.com

node环境安装vue-lottie

npm install --save vue-lottie

插件使用

    <ccq-lottie ref="praise" type="praise" :autoplay="false" @click="playAni"  />
    <ccq-lottie ref="goto" type="goto" :loop="true" @click="stopAni"  />
    import Lottie from '@/components/lottie/lottie.vue';
    export default {
        components: {
            'lottie': Lottie
        },
        methods: {
            // 开始动画
            playAni(i) {
                 this.$refs['praise'].play();
            },
            // 停止动画
            stopAni() {
                 this.$refs['goto'].stop();
            }
        }
    }

API

属性名 类型 默认值 说明
type String '' 动画名称(必填)
autoplay Boolean true 自动播放动画
loop Boolean false 是否循环播放
width Number,String 125 尺寸(宽度)px
height Number,String 125 尺寸(高度)px

Events

事件名称 说明 返回值
click 点击事件
this.$refs['refName'].play(); 点击开始动画
this.$refs['refName'].stop(); 点击暂停动画

意见建议联系

  • QQ: 1252620858 (小前端,请多多指教~)

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问