vue html修饰器,一些让Vue更好用的装饰器

给vue添加一个pageIsReady的变量。用于ts环境下的vue

通过装饰器添加这个属性，并包装vue的created, mounted和beforeDestroy方法。

当created或者mounted里发出的请求完成后，就把pageIsReady设为true。

使用这个装饰器时，在业务代码中完全无感，没有任何心智负担。import { Constructor } from "vue/types/options";

export type WrapReadyProperty = 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(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) {

return this.pageIsReady

}

按钮装饰器用于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());

}

}

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;

},

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[一些让Vue更好用的装饰器]http://www.zyiz.net/tech/detail-148384.html