Amalan komponen Vue: Bangunkan komponen Butang pemuatan--Button Pemuatan

Artikel ini akan membimbing anda langkah demi langkah dalam membangunkan vue komponen butang pemuatan yang sangat praktikal-Button Pemuat Saya harap ia akan membantu semua orang.

Latar belakang komponen

Dalam kerja harian, kita sering menghadapi adegan:

Minta beberapa data antara muka apabila mengklik butang Untuk mengelakkan klik berulang oleh pengguna, kami biasanya menambah pemuatan pada butang ini. Fungsi menambah loading itu sendiri adalah sangat mudah, selagi kita mentakrifkan pembolehubah dan menggunakannya dalam komponen Button Walau bagaimanapun, apabila melakukan projek pengurusan latar belakang, mungkin terdapat banyak, banyak butang sedemikian, mungkin satu komponen , banyak pembolehubah adalah xxx_loading, yang memakan masa, intensif buruh dan tidak cukup elegan.

Seterusnya, kami membuat enkapsulasi ringkas bagi komponen Button untuk menyelesaikan masalah loading yang memakan masa dan tidak elegan ini. (Belajar perkongsian video: tutorial video vue)

Sumber inspirasi

Kami menggunakan AntdModal kotak dialog, apabila onOk kami ialah 异步函数, butang OK Modal akan menambah kesan loading secara automatik dan menutup tetingkap pop timbul selepas pelaksanaan fungsi selesai, seperti ini:

Pada masa ini, kodnya adalah seperti berikut:

asyncFunc() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, 2000)
  })
},
handleTestModal() {
  const that = this
  this.$confirm({
    title: '测试异步函数',
    content: '异步函数延迟两秒结束',
    async onOk() {
      await that.asyncFunc()
    }
  })
},

Selepas melihat kesan ini, saya fikir jika saya boleh merangkumkan Button Komponen, masukkan fungsi yang perlu dilaksanakan, bukankah sangat mudah untuk menambah kesan loading secara automatik dalam komponen mengikut pelaksanaan fungsi.

Laksanakan LoadingButton

Tentukan parameter komponen

Hanya tentukan beberapa di sini Biasa parameter yang digunakan: text(按钮文字), type(按钮类型), asyncFunc(按钮点击时执行的异步函数), delay(loading延迟) Selain itu, pembolehubah loading di dalam komponen diperlukan untuk mengawal status komponen Button kami adalah seperti berikut:

export default {
    data() {
        return {
          loading: false
        }
    },
    props: {
        text: {
          type: String,
          default: '确定'
        },
        type: {
          type: String,
          default: 'primary'
        },
        delay: {
          type: Number,
          default: 0
        },
        asyncFunc: {
          type: Function,
          default: () => {}
        }
    },
}

Gunakan <span style="font-size: 18px;">antd</span>antd dalam <span style="font-size: 18px;">Button</span>Butang komponen dikapsulkan semula

LoadingButtonclickDalam komponen

tersuai kami, gunakan parameter yang ditakrifkan di atas dan ikat acara

<template>
  <Button :type="type" :loading="loading" @click="handleClick">
    {{ text }}
  </Button>
</template>

<script>
import { Button } from &#39;ant-design-vue&#39;

export default {
    components: {
        Button
    },
    methods: {
        handleClick() {}
    }
}
</script>

, kodnya adalah seperti berikut:

<span style="font-size: 18px;">asyncFunc</span>Hakim fungsi tak segerak

asyncFunc

asyncFunc

Bahagian ini ialah bahagian paling penting dari keseluruhan komponen, iaitu, bagaimana kita menentukan bahawa fungsi masuk adalah fungsi tak segerak Apabila fungsi

yang kita lalui adalah fungsi tak segerak, komponen perlu menambah animasi pemuatan, maka kita? harus Bagaimana untuk menentukan sama ada fungsi adalah fungsi tak segerak? antd

Rujukan

Bagaimanakah ia dilaksanakan? antdModalantdKami baru sahaja memperkenalkan bahawa terdapat logik yang serupa dalam

kotak dialog

// components/modal/ActionButton.jsx

onClick() {
  const { actionFn, closeModal } = this;
  if (actionFn) {
    let ret;
    if (actionFn.length) {
      ret = actionFn(closeModal);
    } else {
      ret = actionFn();
      if (!ret) {
        closeModal();
      }
    }
    if (ret && ret.then) {
      this.setState({ loading: true });
      ret.then(
        (...args) => {
          // It's unnecessary to set loading=false, for the Modal will be unmounted after close.
          // this.setState({ loading: false });
          closeModal(...args);
        },
        e => {
          // Emit error when catch promise reject
          // eslint-disable-next-line no-console
          console.error(e);
          // See: https://github.com/ant-design/ant-design/issues/6183
          this.setState({ loading: false });
        },
      );
    }
  } else {
    closeModal();
  }
},

, jadi anda juga boleh membaca kod sumber yang berkaitan bahagian ini dan melihat bagaimana

dilaksanakan: antd.thenret && ret.then Baca pelaksanaan

kod sumber Kita tahu bahawa untuk menilai sama ada fungsi adalah fungsi tak segerak, kita boleh menilai sama ada fungsi itu mempunyai

async handleClick() {
  const asyncFunc = this.asyncFunc
  if (!this.isFunc) {
    return
  }
  const ret = asyncFunc()

  // 如果是异步函数，则显示loading
  if (ret && ret.then) {
    this.loading = {
      delay: this.delay
    }
    ret.finally(() => {
      this.loading = false
    })
  }
}

(

) kaedah, maka kita boleh melakukan sesuatu yang serupa Penghakiman, kodnya adalah seperti berikut: LoadingButton

Ujian

Komponen

LoadingButton

Pada ketika ini kami logik komponen teras telah dibangunkan, dan kemudian Mari kita tulis demo untuk menguji sama ada komponen

<template>
  <div>
    <LoadingButton :delay="500" :asyncFunc="asyncFunc" />
  </div>
</template>

<script>
import LoadingButton from &#39;./LoadingButton.vue&#39;

export default {
  data() {
    return {
      loading: false
    }
  },
  components: {
    LoadingButton
  },
  methods: {
    asyncFunc() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve()
        }, 2000)
      })
    }
  }
}
</script>

ini memenuhi jangkaan: kod demo adalah seperti berikut:

asyncFunc

Kami menulis fungsi tak segerak untuk mensimulasikan permintaan tak segerak dalam perniagaan sebenar , kini anda boleh melihat kesannya:

loadingLoadingButtonloading adalah sejajar dengan kesan yang dijangkakan sebelum ini, supaya apabila kita mempunyai senario serupa yang memerlukan

, kita boleh terus menggunakan komponen , Hanya masukkan fungsi tak segerak yang perlu dilaksanakan apabila mengklik Tidak perlu mentakrifkan pembolehubah .

写在最后

这个组件其实核心的代码非常少，也很容易读懂。由于最近在做一些业务这类场景比较多，感觉这个小组件还是挺实用的所以分享给大家，这里也是只对最重要的部分做了一个介绍，相信大家学会了之后也可以通过这个方式封装出符合自己实际场景需求的组件。最后，附上这个组件的完整代码：

<template>
  <Button :type="type" :loading="loading" @click="handleClick">
    {{ text }}
  </Button>
</template>

<script>
import { Button } from &#39;ant-design-vue&#39;

export default {
  data() {
    return {
      loading: false
    }
  },
  props: {
    text: {
      type: String,
      default: &#39;确定&#39;
    },
    type: {
      type: String,
      default: &#39;primary&#39;
    },
    delay: {
      type: Number,
      default: 0
    },
    asyncFunc: {
      type: Function,
      default: () => {}
    }
  },
  components: {
    Button
  },
  computed: {
    isFunc() {
      return typeof this.asyncFunc === &#39;function&#39;
    }
  },
  methods: {
    async handleClick() {
      const asyncFunc = this.asyncFunc
      if (!this.isFunc) {
        return
      }
      const ret = asyncFunc()

      // 如果是异步函数，则显示loading
      if (ret && ret.then) {
        this.loading = {
          delay: this.delay
        }
        ret.finally(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>

原文地址：https://juejin.cn/post/7099234795720278046

作者：liangyue

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Amalan komponen Vue: Bangunkan komponen Butang pemuatan--Button Pemuatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!