让Vue组件变成Powerful的组件

OLong
English

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更好用的装饰器

阅读 793
450 声望
318 粉丝
0 条评论
450 声望
318 粉丝
文章目录
宣传栏