Turn Vue components into Powerful components

powerful-componet

If you find it useful, the brothers can help you with a star.
address

is a utility function that wraps Vue objects.
Supports Vue2 and Vue3

Support Typescript under Vue3.

In fact, Vue2 can also support Typescript. But it's not necessary.

npm install --save powerful-component

There are very few specifications you need to follow to enhance your Vue components.

Get the following features.

Whether the page is loaded or not

pageIsReady。

The default is false, when both mounted and created are executed, pageIsReady becomes true

convention

It is necessary to ensure that mounted and created are written in async/await style. In order to ensure that the pageIsReady variable can know that the execution of the asynchronous request is completed.

example

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

Click event anti-shake, and add loading style

The methods starting with on will be added with anti-shake function, and can add loading style to the clicked button

convention

1. Method names start with on
2. Async/await style writing. In this way, powerful-component will know whether the method is completed or not.
3. The last of the method parameter list is the event of the click event, so as to get the dom element and add the style.

example

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

end

The core idea of this library comes from this article Using async/await to implement some decorators that make Vue more useful