Vue 진행률 표시줄 구성요소 구현 튜토리얼(코드 예)-JS 튜토리얼-php.cn

이 문서의 내용은 Vue 진행률 표시줄 구성요소의 구현 튜토리얼(코드 예제)에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

최근 개인 프로젝트에서 페이지 간 이동 과정을 최적화하고 싶었는데, 많은 문서나 npm에서 사용하는 페이지 점프 진행바가 생각나서 직접 구현해보고 싶어서 기록하게 되었습니다.

npm이 컴포넌트를 검색하는 효과를 살펴보겠습니다.

Vue 진행률 표시줄 구성요소 구현 튜토리얼(코드 예)

그래서 함께 구현해 보겠습니다.

사용법 정의

컴포넌트를 구현하려면 자신의 요구 사항을 생각하고 사용자가 편한 사용 방법을 직접 정의해야 합니다. 여기에는 사용이 간단할수록 좋습니다. 이에 상응하는 대가는 이 구성 요소를 작성하는 복잡성이 높아진다는 것입니다.

제가 사용하고 싶은 방식은 이 메소드를 어디서든 호출할 수 있고 언제든지 상태를 제어할 수 있다는 것입니다.

해당 코드를 보세요:

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></p>
</template>

<style>
      .bar {
        position: fixed;
        z-index: 99999;
        opacity: 1;
      }
</style>

로그인 후 복사

구성 요소 등록

성공 색상
실패 색상
진행률 표시줄 위치
애니메이션 전환 시간
로딩 방향
키
자동으로 수행할 수 있나요?

물론 생각나는 대로 추가할 수 있습니다. 그러면 이러한 사용자 정의 가능한 속성이 자연스럽게 구성 요소의 소품이 됩니다.

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 () {
      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 속성을 추가하여 애니메이션을 자동으로 완료할 수 있는지 여부를 설정하는 것입니다. 물론, 경로나 요청이 항상 보류 상태인 경우 완료되지 않도록 작업을 설정할 수 있습니다. 애니메이션.

두 번째 단계는 시작, 종료, 실패 메서드 및 애니메이션 코드가 포함된 개체를 작성하는 것입니다.

세 번째 단계는 이 객체를 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!