position !== 'bottom') {
throw new Error('The wrong config of position!')
}
style[position] = 0
if (inverse) {
style.left = 0
} else {
style.right = 0
}
style.width = preset + '%' // 设置进度条长度
style.height = thickness + 'px' // 设置显示高度
style.transition = `width ${widthSpeed}ms, opacity ${opacitySpeed}ms` // 设置过度样式
return style
}
}
到这里这个 vue 组件其实就完成了，接下来就是如何去控制它。打开index.js，先来写一个标准的组件格式：
import progressBar from './progress-bar.vue'
export default {
install (Vue, options = {}) {
// 注册组件
Vue.component(progressBar.name, progressBar)
}
}之后咱们要用到 Vue 提供的扩展方法，来完成咱们的需求。
第一步，添加 autoFinish 属性，用来设定动画是否可以自动完成，默认是 true，当然如果某个路由或请求一直处于 pending 状态，你可以可以设置让其永远不完成动画的动作。
第二步，来写一个对象，其中包含 start 、 finish 、 fail 方法以及动画代码。
第三步，将这个对象挂在到 Vue 的原型
完整的代码和说明如下：
import progressBar from './progress-bar.vue'
export default {
install (Vue, options = {}) {
// 注册组件
Vue.component(progressBar.name, progressBar)
// 创建一个 Vue 子类
const Component = Vue.extend(progressBar)
// 拿到自定义的属性
const { autoFinish, ...res } = options
// 创建组件实例
const vm = new Component({
data: {
autoFinish: typeof autoFinish === 'boolean' ? autoFinish : true
}
})
// 将 progressBar 的默认 options 与 自定义的 options 合并
options = Object.assign(vm.$props.options, { ...res })
//合并新的 props
vm.$propsData = options
vm.$mount()
// 如果是服务端渲染那么不继续执行
if (!vm.$isServer) {
document.body.appendChild(vm.$el)
}
let timer = null
const progress = {
start () {
if (Vue.$isServer) return
// 每次调用 start 都重新初始化一次，比如多次点击某个按钮连续请求，那么每次都从0开始
vm.percent = 0
vm.show = true
vm.canSuccess = true
// 定一个增量，这个值可以改成参数，也可以按照使用经验来设定
const CUT_SCALE = 5
// 定义每 100 秒来执行一次动画
timer = setInterval(() => {
// 每次执行增量动画
this.increase((CUT_SCALE - 1) * Math.random() + 1)
// 如果进度大于 95%，并且设置了自动完成，那么执行结束动作
if (vm.percent > 95 && vm.autoFinish) {
this.finish()
}
}, 100)
},
increase (cut) {
vm.percent = Math.min(99, vm.percent + cut)
},
hide () {
clearInterval(timer)
// 这里面有2个定时器，外层定时器是让用户可以看到这个 进度已经完成啦
// 内层定时器，由于 opacity 消失需要一定的过渡时间，所以要等待它消失以后
// 在将其进度设置为0，等待下次调用，如果不延迟，那么会看到进度到100后又回到0的动画
setTimeout(() => {
vm.show = false
setTimeout(() => {
vm.percent = 0
timer = null
}, vm.options.transition.opacitySpeed)
}, vm.options.transition.duration)
},
// 下面这2个方法就很简单了，只需要完成进度，然后执行隐藏即可
finish () {
if (Vue.$isServer) return
vm.percent = 100
this.hide()
},
fail () {
if (Vue.$isServer) return
// 修改未成功的状态，实际效果就是改变最后的颜色
vm.canSuccess = false
vm.percent = 100
this.hide()
}
}
// 最后挂在到全局
Vue.prototype.$progress = progress
}
}到这里，一个进度条组件就完成了。大家可以自己动手实践一下，起一个项目，使用 vue-router 的 beforeResolve 声明周期钩子，或者写一个定时器模拟异步来测试一下。
以上就是Vue进度条组件的实现教程（代码示例）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：Vue进度条组件的完成图文详细教程（代码示例）