让Vue组件变成Powerful的组件

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变量能得知异步请求执行完成了。

例子




点击事件防抖,并增加loading样式

以on开头的方法都会被增加防抖功能,并能对被点击的按钮增加loading样式

约定

  1. 方法名以on开头
  2. async/await风格写法。这样powerful-componet才会知道方法是不是执行完成了
  3. 方法参数列表最后一个是点击事件的event,这样才能得到dom元素,添加样式。

例子




尾声

这个库的核心思想来源于这篇文章活用async/await,实现一些让Vue更好用的装饰器

你可能感兴趣的:(vue.js前端)