最新消息:站点添加了一些不太友好的内容,请见谅...

Vue 顶部进度小组件

若思若想 onlyling 2348浏览 0评论

还有点小问题,如果不是点击切换太快,问题不大

下载

复制整个文件夹(vue-progress)到对应的项目。

代码:https://github.com/onlyling/some-demo/tree/master/vue-progress

使用

import Vue from 'vue'
import Progress from 'your path /vue-progress'

Vue.use(Vue)

// new 之前使用
Vue.prototype.$progress.start()  // 默认进度 80%

Vue.prototype.$progress.start(20) // 进度 20%

Vue.prototype.$progress.end() // 结束 100% ,然后消失

Vue.prototype.$progress.fail() // 进度停止,并显示红色

// 某个组件中使用

this.$progress.start()

this.$progress.start(20)

this.$progress.end()

this.$progress.fail()

问题

end 的时候,使用了时间延迟,所以,快速改变进度的时候,会出现进度倒流。

例如,在一次 end 后快速 start ,进度条会从 100% “回退到”指定进度。

项目中也没有类似的快速切换,所以就没有修复这个问题。

路由切换,一个假进度


var ROUTER_ENTER_TIME = 0 // 页面加载效果 router.beforeEach((to, from, next) => { document.title = to.meta.title || '附近优选' if (ROUTER_ENTER_TIME != 0) { // 避免 iOS 的 Safari 刷新页面出现两个进度条 Vue.prototype.$progress.start(20) } ROUTER_ENTER_TIME ++ next() }) router.afterEach((route) => { if (ROUTER_ENTER_TIME !== 1) { Vue.prototype.$progress.end() } })

思路

进度条,从N到100%慢慢加载、变长,使用的时候只需要关系加载到百分之多少。

最开始,过渡使用的是 css3 过渡,但是,没搞好,于是还是做了累加。

累加就避免不了使用时间延迟。

Vue组件,很单纯,只是一个视图,给一个数据,显示出对应的样子。

./progress/index.js 主要完成对应的逻辑,例如,格式化输入的格式,统一一个修改组件的方式等等。

向外提供的方法

start 主要是把输入内容格式化成数组,然后再把进度“合法化(0-100)”

end 把进度带向 100%,然后隐藏进度条

fail 把进度带向 100%,并且进度条换一个背景色

reset 重置进度

内部的一些变量

首先不用多说,标准的隐式创建一个Vue实例,把实例插入body尾部,通过修改实例的属性得到想要的样子。

defaultStyleerrorStyle 组件上动态绑定的style,会混合 width 写到行内样式上。

defaultSpeedendSpeed 累加、累减的单位大小。

progressEndTimer 结束的计时器,到了100%,进度条没有立即消失。

progressTimer 进度计时器,每次累加累减就是它完成的。

progressEnd 结束的进度。

progressCurrent 当前的进度。

setProgress 建立进度累加累减,给一个最终的进度,判断前进、后退,在一个计时器里面改变当前的进度,设置组件的状态,领节点的判断等等。

转载请注明:OnlyLing-WEB前端开发者 » Vue 顶部进度小组件

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址