更新记录
1.0.0(2021-06-30)
下载此版本
发布插件
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
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 (小前端,请多多指教~)