关于前端:一些让Vue更好用的装饰器

1. 给 vue 增加一个 pageIsReady 的变量。

用于 ts 环境下的 vue
通过装璜器增加这个属性，并包装 vue 的 created, mounted 和 beforeDestroy 办法。
当 created 或者 mounted 里收回的申请实现后，就把 pageIsReady 设为 true。
应用这个装璜器时，在业务代码中齐全无感，没有任何心智累赘。

import {Constructor} from "vue/types/options";
export type WrapReadyProperty<T> = T & {pageIsReady?: boolean}
/**  
 * 在 @compontent 之后应用这个装璜器，* 组件就会被注入属性 pageIsReady，* 当 created 和 mounted 都执行实现时 pageIsReady 变成 true，* 要求 mounted 或 created 是 async/await。(取决于在哪个办法中发申请初始化组件)
 * 而后能够在 template 中间接应用。* 在 script 中应用调用 isPageReady.call(this)办法；*/
export default function PageReadyStatus() {
    let createdDone = false;
    let mountedDone = false;
    function isCreatedMountedAllDone() {return createdDone && mountedDone;}
    return function pageReadyEnhancement<T extends Constructor>(target: T) {const oldMounted = target.prototype.mounted || function() { }
        const oldCreated = target.prototype.created || function() {}
        const oldBeforeDestroy = target.prototype.beforeDestroy || function() {}
        target.prototype.pageIsReady = false;
        target.prototype.created = async function(...params: any[]) {await oldCreated.apply(this, params);
            createdDone = true;
            this.pageIsReady = isCreatedMountedAllDone()}
        target.prototype.mounted = async function(...params: any[]) {await oldMounted.apply(this, params);
            mountedDone = true;
            this.pageIsReady = isCreatedMountedAllDone()}
        target.prototype.beforeDestroy = async function(...params: any[]) {await oldBeforeDestroy.apply(this, params);
            mountedDone = false;
            createdDone = false;
            this.pageIsReady = false;
        }
        return target
    };
}

export function isPageReady(this: WrapReadyProperty<Vue>) {
    return this.pageIsReady」

1. 按钮装璜器

用于 ts 环境下的 vue

通过装璜器包装被装璜的办法。
要求被包装的形式时 async/await 的。这样装璜器内只须要用一个 await 就能够得被包装的办法是否执行实现。
同时，能够从事件对象中拿到被点击的 dom 元素并批改它。

/*
 * 请保障被包装的办法的参数列表最初一个是点击事件的参数
 */
export default function buttonThrottle() {
    let pending = false;
    return function(target: any, name: string): any {const btnClickFunc = target[name];
        const newFunc = async function(this: Vue, ...params: any[]) {if (pending) {return;}
            const event:Event = params[params.length - 1];
            let btn = event.target as HTMLElement
            pending = true;
            const recoverCursor = changeCursor(btn);
            try {await btnClickFunc.apply(this, params);
            } catch (error) {console.error(error);
            }
            recoverCursor();
            pending = false;
        };
        target[name] = newFunc;
        return target;
    };
}
function changeCursor(btn?: HTMLElement) {if (btn == null) {return () => {};}
    const oldCursor = btn.style.cursor;
    btn.style.cursor = "wait";
    return () => {btn.style.cursor = oldCursor;};
}

用法:
在点击事件函数上应用这个装璜器。
装璜器会自动检测该函数是否执行实现，并在执行过程中往按钮的 Dom 节点上增加 point:wait 属性

    import {Component, Vue} from "vue-property-decorator";
    import buttonThrottle from "@/ui/view/utils/buttonThrottle";


    type Member = {account_no: string; name: string; warn?: string};
    @Component({components: {} })
    export default class AddMemberInput extends Vue {@buttonThrottle()
        private async confirmAdd() {await this.addMembers(this.getVaildMembers());
        }    
    }

1. mounted 之前显示白屏

同上，通过 async/await 取得 mounted 或者 created 是否执行实现
再通过指向 vue 实力的 this 拿到组件根节点，而后按需批改它
以下代码只是将组件暗藏了，实际上能够写更简单的逻辑，在加载过程中显示其余内容，毕竟拿到了 Dom，想干嘛就干嘛。

用于 js 的 vue 中包装 vue 的对象

  firstPaintControl(vueObj) {let oldMounted = vueObj.mounted || function() {};
    vueObj.mounted = async function(...params) {
      this.$el.style.visibility = 'hidden';
      await oldMounted.apply(this, params);
      this.$el.style.visibility = 'visible';
    };
    return vueObj;
  },