vue实现竖式步骤条-ag凯发k8国际
最近在个人的项目中，想对页面之间跳转的过程进行优化，想到了很多文档或 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，先来写结构和样式，这里很简单：
.bar {
position: fixed;
z-index: 99999;
opacity: 1;
}
在注册组件的时候，我想可以自定义一些功能，比如
成功的颜色
失败的颜色
进度条的位置
动画过渡时间
加载方向
高度
是否可以自动完成
当然只要你想到的都可以添加，那么这些可以定制的属性，自然而然就成为了组件的 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 // 进度条的高度
}
}
}
}
}
除了要定义的属性以外，那么组件本身总要有一些自己的属性，用来控制自己的状态，比如这个组件，你要控制进度条的长度、显示和隐藏等状态。
添加 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-router 的 beforeresolve 声明周期钩子，或者写一个定时器模拟异步来测试一下。
以上是笔者归纳总结，如有误之处，欢迎指出。
订阅号id：miaovclass
关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；
总结
以上是ag凯发k8国际为你收集整理的vue实现竖式步骤条_手把手教你实现一个 vue 进度条组件！的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： tableau中文版教程pdf_pdf
- 下一篇： php四则运算出题器_四则运算出题器3