怎么写一个vue-插件? loader加载进度条示例

前文

要写一个vue的组件

  1. 要么根据项目来写
  2. 要么是自己构造轮子
    看过很多组件的写法, 无论是你怎么做, 都离不开三个东西 vue实例, dom, 你要实现的逻辑
代码地址
loader 组件实现
  • 引用
import Loader from './views/loader'

Vue.prototype.$loader = Loader.setDefaultOptions({maximum : 75, color : '#f00'})

ps: setDefaultOptions() 传入一个对象 提供初始化设置
    可对以下参数进行初始化设置
      maximum : 75,  //start 方法最大进度 | number
      color : '#f00' //进度条染色 | 16进制
      height: '2.5' //进度条高度 | number | string
      timer: '1000' //finish调用后 进度条消失 | number
  • 使用示例
//loader 组件提供两个调用方法 start finish
* start 进度条每100ms前进1% 最大80% 并且不会消失
* finish 进度进度100%  1s 后消失并remove dom

this.$loader.start()

在这里插入图片描述
this.$loader.finish()

在这里插入图片描述
ps:
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=35xwfvpb2uuc8

猜你喜欢

转载自blog.csdn.net/weixin_38644883/article/details/88696685