您好,登录后才能下订单哦!
这篇文章主要介绍了Vue进度条组件怎么弄,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录。
来看下 npm 搜索组件时候的效果:
so 下面咱们一起动手实现一下呗。
定义使用方式
想实现一个组件的前提,一定要想好你的需求是什么,还要自己去定义一个舒服的使用方法,这其中也是有原则的,对使用者来说,使用方式越简单越好。那么对应的代价就是写这个组件的复杂度会变高。
我想要的使用方式是这样的:可以在任意的地方去调用到这个方法,可以随时控制其状态。
看下对应的代码:
async someFunction () { this.$progress.start() try { const ret = await axios.get('/xxx') // some code ... this.$progress.finish() } catch (err) { // cache err ... this.$progress.fail() } }
当然,想在任意地方使用,少不了一个步骤,就是在全局注册这个组件:
import progressBar from 'xxx/progress-bar' Vue.use(progressBar, { // some config ... })
如果不想全局注册,你也可以在某个组件内单独使用,只要你开心就好。
实现过程
先来建立一个文件夹和其中两个文件:
progress-bar - 01 progress-bar.vue - 02 index.js
打开progress-bar.vue,先来写结构和样式,这里很简单:
<template> <p :style='style'></p> </template> <style scoped> .bar { position: fixed; z-index: 99999; opacity: 1; } </style>
在注册组件的时候,我想可以自定义一些功能,比如
成功的颜色
失败的颜色
进度条的位置
动画过渡时间
加载方向
高度
是否可以自动完成
当然只要你想到的都可以添加,那么这些可以定制的属性,自然而然就成为了组件的 props:
export default { name: 'progressBar', props: { options: { type: Object, default () { return { succColor: 'rgb(76, 164, 214)', failColor: 'rgb(218, 26, 101)', position: 'top', transition: { widthSpeed: 200, opacitySpeed: 400, duration: 300 // 定义消失时间 ms }, inverse: false, // 进度条的加载方向 thickness: 2 // 进度条的高度 } } } } } </script>
除了要定义的属性以外,那么组件本身总要有一些自己的属性,用来控制自己的状态,比如这个组件,你要控制进度条的长度、显示和隐藏等状态。
添加 vue 的 data 属性:
data () { return { percent: 0, // 进度条长度 show: false, // 显示和隐藏 canSuccess: true // 是否是成功的状态 } }
有了这些属性,这个进度条就要根据这些属性的变化来“自己动”。所以这个时候首先想到的当然就是 Vue 的计算属性:
computed: { style () { // 先拿到乱七八糟的属性 const { succColor, failColor, location, transition, inverse, thickness } = this.options const { widthSpeed, opacitySpeed } = transition const { canSuccess, preset, show } = this // 定义 css 样式 const style = { backgroundColor: canSuccess ? succColor : failColor, opacity: show ? 1 : 0 } if (position !== 'top' || 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进度条组件怎么弄内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。