Implementierungs-Tutorial der Vue-Fortschrittsbalkenkomponente (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit dem Implementierungs-Tutorial (Codebeispiel) der Vue-Fortschrittsbalkenkomponente. Ich hoffe, dass es für Sie hilfreich ist.

Kürzlich wollte ich in einem persönlichen Projekt den Prozess des Seitensprungs optimieren, der in vielen Dokumenten oder npm verwendet wird, also wollte ich selbst einen implementieren .

Werfen wir einen Blick auf die Auswirkung der npm-Suche nach Komponenten:

also lasst es uns gemeinsam umsetzen.

Verwendung definieren

Um eine Komponente zu implementieren, müssen Sie über Ihre Bedürfnisse nachdenken und selbst eine komfortable Verwendungsmethode definieren Nutzung, desto besser. Der entsprechende Preis besteht darin, dass die Komplexität beim Schreiben dieser Komponente höher wird.

Ich möchte es so verwenden: Diese Methode kann überall aufgerufen werden und ihr Status kann jederzeit kontrolliert werden.

Schauen Sie sich den entsprechenden Code an:

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

Wenn Sie es überall verwenden möchten, ist natürlich ein Schritt unabdingbar, nämlich die Registrierung dieser Komponente global:

import progressBar from 'xxx/progress-bar'

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

Wenn Sie es nicht global registrieren möchten, können Sie es auch separat innerhalb einer Komponente verwenden, solange Sie damit zufrieden sind.

Implementierungsprozess

Erstellen Sie zunächst einen Ordner und zwei Dateien darin:

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

Öffnen Sie zuerst progress-bar.vue Schreiben Die Struktur und der Stil sind hier sehr einfach:

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

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

Bei der Registrierung der Komponente möchte ich einige Funktionen anpassen, z. B.

• Erfolgsfarbe

• Fehlerfarbe

• Position des Fortschrittsbalkens

• Animationsübergangszeit

• Laderichtung

• Höhe

• Kann es automatisch erfolgen

Natürlich können Sie alles hinzufügen, was Ihnen einfällt, dann werden diese anpassbaren Attribute natürlich zu den Requisiten der Komponente:

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

Zusätzlich zu den zu definierenden Attributen, dann muss die Komponente selbst immer über eigene Eigenschaften verfügen, um ihren eigenen Status zu steuern. Bei dieser Komponente müssen Sie beispielsweise die Länge, Anzeige und Ausblendung des Fortschrittsbalkens steuern.

Fügen Sie das Datenattribut von vue hinzu:

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

Mit diesen Attributen bewegt sich der Fortschrittsbalken entsprechend den Änderungen in diesen Attributen „von selbst“. Das erste, was mir zu diesem Zeitpunkt in den Sinn kommt, sind natürlich die berechneten Eigenschaften von 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
  }
}

An diesem Punkt ist die Vue-Komponente tatsächlich fertiggestellt, und der nächste Schritt ist, wie um es zu kontrollieren. Öffnen Sie index.js und schreiben Sie zunächst ein Standardkomponentenformat:

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

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

Danach verwenden wir die von Vue bereitgestellte Erweiterungsmethode, um unsere Anforderungen zu erfüllen.

Der erste Schritt besteht darin, das Attribut autoFinish hinzuzufügen, um festzulegen, ob die Animation automatisch abgeschlossen werden kann. Wenn sich eine Route oder Anfrage immer im Status „Ausstehend“ befindet, ist dies natürlich möglich Legen Sie fest, dass die Animation ewig dauert.

Der zweite Schritt besteht darin, ein Objekt zu schreiben, das Start-, End-, Fail-Methoden und Animationscode enthält.

Der dritte Schritt besteht darin, dieses Objekt an den Prototyp von Vue zu hängen

Der vollständige Code und die Beschreibung lauten wie folgt:

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

Hier, a progress Die Balkenkomponente ist fertig. Sie können es selbst üben, ein Projekt starten, den beforeResolve-Anweisungszyklus-Hook von vue-router verwenden oder einen Timer schreiben, um Asynchronität zu simulieren und es zu testen.

Das obige ist der detaillierte Inhalt vonImplementierungs-Tutorial der Vue-Fortschrittsbalkenkomponente (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!