Open
Description
Environment version:
vue @2.6.13
vue-class-component @7.2.3
vue-property-decorator @9.1.2
typescript @4.1.5
Description:
My vue component class named AudioBarChart,and extends a mixin component class named MaleonComponentMixin,the same time,i define a function decorator named RestTimerDecorator, in the RestTimerDecorator i called the mixin component class's method named resetDataTimer.
When i use RestTimerDecorator in component class AudioBarChart's method updateData,
but when call updateData method, RestTimerDecorator inside report a error: "TypeError: target.resetDataTimer is not a function"
the decorator's target not contains it's parent class property ?
import { Component, Vue, Prop, Mixins } from 'vue-property-decorator';
export interface IMaleonComponent {
updateData(): void;
}
@Component
export class MaleonComponentMixin extends Vue {
@Prop({ default: false })
preview!: boolean;
private autoReq: boolean = false;
// 启动数据定时器
startDataTimer() {
console.log('startDataTimer');
}
resetDataTimer() {
this.autoReq && this.preview && this.startDataTimer();
}
}
// 装饰器函数
export function RestTimerDecorator() {
return (target: MaleonComponentMixin, propertyKey: string, descriptor: PropertyDescriptor) => {
const currentFunc = descriptor.value;
if (currentFunc && typeof currentFunc === 'function') {
descriptor.value = (...args: []) => {
// 在调用updateData之前先重置定时器
target.resetDataTimer();
(currentFunc as ()=>void).apply(target, args);
};
}
};
}
@Component
export default class AudioBarChart extends Mixins(MaleonComponentMixin) implements IMaleonComponent {
@RestTimerDecorator()
updateData(): void {
console.log('updateData');
}
}
Metadata
Metadata
Assignees
Labels
No labels