fake-progress 搭配element ui进度条实现加载特效

1.首先npm下载这个插件   

 npm install fake-progress

2.vue中引入这个插件

import FakeProgress from 'fake-progress'

 3.使用element ui的 Progress 进度条组件

 percentage参数默认为小数,需要将数值乘100进行显示

4.data中定义

 5.在进度条需要开始的地方使用this.fake.start();

 6.在进度条需要结束的地方使用this.fake.end();

效果展示

点击开始后

fake-progress 搭配element ui进度条实现加载特效_第1张图片

 加载完成后

效果为动态加载效果,懒得整动图了

fake-progress 搭配element ui进度条实现加载特效_第2张图片

 此效果需要搭配element ui组件来进行实现

你可能感兴趣的:(vue,vue.js,前端,javascript)