讓Vue元件變成Powerful的元件

OLong發表於2022-01-12
Vue元件

powerful-componet

覺得好用的話，兄弟們幫忙點個star。
倉庫地址

是一個包裝Vue物件的工具函式。
支援Vue2 和Vue3

在Vue3下支援Typescript.

其實Vue2 也可以支援Typescript。但是沒有必要。
npm install --save powerful-component

僅僅需要你遵循很少的規範，便可以使你的Vue元件得到增強。

獲得以下功能.

頁面是否載入完成的變數

pageIsReady。

預設為false，當mounted和created都執行完成時會，pageIsReady變為true

約定

需要保證mounted和created是async/await風格寫法。以保證pageIsReady變數能得知非同步請求執行完成了。

例子

<script lang="ts">
import powerfulDefineComponent from "powerful-component";
export default powerfulDefineComponent({
  methods: {
    //onClick執行完成之前，不會執行下一次
    async onClick() {
      await new Promise((done) => setTimeout(done, 1000));
    },
  },
});
</script>

<template>
    // 這個按鈕在onClick執行期間會獲得loading樣式
  <button type="button" @click="onClick"></button>
</template>

點選事件防抖，並增加loading樣式

以on開頭的方法都會被增加防抖功能，並能對被點選的按鈕增加loading樣式

約定

  1. 方法名以on開頭
  2. async/await風格寫法。這樣powerful-componet才會知道方法是不是執行完成了
  3. 方法引數列表最後一個是點選事件的event，這樣才能得到dom元素，新增樣式。

例子

<script lang="ts">
import powerfulDefineComponent from "powerful-component";
export default powerfulDefineComponent({
    async created() {
      await new Promise((done) => setTimeout(done, 1000));
    },
    async mounted() {
      await new Promise((done) => setTimeout(done, 2000));
    },
});
</script>

<template>
    //created和mounted都執行完成後，pageIsReady為true
  <h1>頁面載入完成：{{ pageIsReady }}</h1>
</template>

尾聲

這個庫的核心思想來源於這篇文章活用async/await，實現一些讓Vue更好用的裝飾器

相關文章