Tutoriel d'implémentation du composant de barre de progression Vue (exemple de code)

Le contenu de cet article concerne le didacticiel d'implémentation (exemple de code) du composant de barre de progression Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment, dans un projet personnel, j'ai voulu optimiser le processus de saut entre les pages. J'ai pensé à la barre de progression de saut de page utilisée dans de nombreux documents ou npm, j'ai donc voulu en implémenter une moi-même. .

Jetons un coup d'œil à l'effet de la recherche de composants par npm :

donc implémentons-le ensemble.

Définir l'utilisation

Pour implémenter un composant, vous devez réfléchir à vos besoins et définir vous-même une méthode d'utilisation confortable. Il existe également un principe pour les utilisateurs, le plus simple. l'utilisation, mieux c'est. Le prix correspondant est que la complexité d’écriture de ce composant deviendra plus élevée.

La façon dont je souhaite l'utiliser est la suivante : cette méthode peut être appelée n'importe où et son statut peut être contrôlé à tout moment.

Regardez le code correspondant :

async someFunction () {
    this.$progress.start()
    try {
          const ret = await axios.get('/xxx')
          // some code ...
      this.$progress.finish()
    } catch (err) {
          // cache err ...
          this.$progress.fail()
    }
}

Bien sûr, si vous souhaitez l'utiliser n'importe où, une étape est indispensable, qui est de vous inscrire ce composant globalement :

import progressBar from 'xxx/progress-bar'

Vue.use(progressBar, { // some config ... })

Si vous ne souhaitez pas l'enregistrer globalement, vous pouvez également l'utiliser individuellement au sein d'un composant, à condition que vous en soyez satisfait.

Processus de mise en œuvre

Créez d'abord un dossier et deux fichiers dedans :

progress-bar
    - 01 progress-bar.vue
    - 02 index.js

Ouvrez progress-bar.vue, allons écrivez d'abord la structure et le style. C'est très simple ici :

<template>
      <p></p>
</template>

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

Lors de l'enregistrement du composant, je souhaite personnaliser certaines fonctions, telles que

.

• Couleur du succès

• Couleur de l'échec

• Position de la barre de progression

• Temps de transition de l'animation

• Direction de chargement

• Hauteur

• Peut-il être complété automatiquement

Bien sûr, vous pouvez ajouter ce à quoi vous pensez, puis ces attributs personnalisables deviendront naturellement les accessoires du composant :

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  // 进度条的高度
            }
          }
        }
      }
}

En plus des propriétés à définir, le composant lui-même doit posséder certaines propriétés qui lui sont propres pour contrôler son propre état. Par exemple, pour ce composant, vous devez contrôler la longueur, l'affichage et le masquage de la barre de progression.

Ajouter l'attribut data de vue :

data () {
      return {
      percent: 0,  // 进度条长度
            show: false, // 显示和隐藏
            canSuccess: true  // 是否是成功的状态
      }
}

Avec ces attributs, la barre de progression "se déplacera toute seule" en fonction des changements de ces attributs . Donc la première chose qui me vient à l'esprit à ce moment-là, ce sont bien sûr les propriétés calculées de 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
  }
}

À ce stade, le composant vue est réellement terminé, et l'étape suivante c'est comment le contrôler. Ouvrez index.js et écrivez d'abord un format de composant standard :

import progressBar from './progress-bar.vue'

export default {
  install (Vue, options = {}) {
  // 注册组件
    Vue.component(progressBar.name, progressBar)
  }
}

Après cela, nous utiliserons la méthode d'extension fournie par Vue pour répondre à nos besoins.

La première étape consiste à ajouter l'attribut autoFinish pour définir si l'animation peut être complétée automatiquement. La valeur par défaut est true. Bien sûr, si un itinéraire ou une demande est toujours en attente, vous pouvez le faire. réglez-le pour qu'il dure éternellement. Actions qui ne terminent pas l'animation.

La deuxième étape consiste à écrire un objet, qui contient les méthodes start, finish, fail et le code d'animation.

La troisième étape consiste à accrocher cet objet sur le prototype Vue

Le code complet et la description sont les suivants :

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
  }
}

Ici, Un composant de barre de progression est terminé. Vous pouvez le pratiquer vous-même, démarrer un projet, utiliser le hook de cycle d'instruction beforeResolve de vue-router ou écrire une minuterie pour simuler l'asynchronisme afin de le tester.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!