Javascript 如何使Vue指令成为ES6类？

我想将Vue指令作为ES6类，有可能吗？因为当我试着去做的时候，它不起作用

这是我的代码：

import { DirectiveOptions } from 'vue';
interface WfmCarriageDirectiveModel {
    onFocusDown(): void;
    onKeyDown(event: Event): void;
    resetInput(): void;
    changeOrientation(event: Event): void;
    getNumber(keyCode: number): void;
    getDeflection(keyCode: number): void;
}
const ORIENTATION_VERT = 'vert';
const ORIENTATION_HOR = 'hor';

class WfmCarriageDirective implements DirectiveOptions, WfmCarriageDirectiveModel {
    public startInput: boolean = false;
    public endInput: boolean = false;
    public valueInput: string = '';
    public orientationCarriage: string = '';
    public plan: any = {};
    public rolesMap: any = {};
    public shifts: any = {};
    public onChangeOrientation: any;
    public controlAndInput: any;

    bind(el, binding, vnode) {
        console.log(binding.value.orientationCarriage) // empty stroke;
        this.orientationCarriage = binding.value.orientationCarriage;
        this.onChangeOrientation = binding.value.onChangeOrientation;
        this.controlAndInput = binding.value.controlAndInput;
        this.plan = binding.value.plan;
        this.rolesMap = binding.value.rolesMap;
        this.shifts = binding.value.shifts;

        el.addEventListener('focus', this.onFocusDown);
        el.addEventListener('keydown', this.onKeyDown);
    }

    unbind(el, binding, vnode) {
        el.removeEventListener('focus', this.onFocusDown);
        el.removeEventListener('keydown', this.onKeyDown);
    }

    onFocusDown() {
        this.resetInput();
    }

    onKeyDown(event: Event) {
        if (event.shiftKey && event.keyCode !== 9) {
            return;
        }
        if (event.shiftKey && event.keyCode === 9) {
            event.preventDefault();
            this.changeOrientation(event);
            return;
        }
        if (!event.shiftKey && event.keyCode === 37) {
            event.preventDefault();
            this.controlAndInput({action: 'left'}, this.plan, this.rolesMap);
            return;
        }
        if (event.keyCode === 38) {
            event.preventDefault();
            this.controlAndInput({action: 'up'}, this.plan, this.rolesMap);
            return;
        }
        if (!event.shiftKey && (event.keyCode === 9 || event.keyCode === 39)) {
            event.preventDefault();
            this.controlAndInput({action: 'right'}, this.plan, this.rolesMap);
            return;
        }
        if (!event.shiftKey && (event.keyCode === 13 || event.keyCode === 40)) {
            event.preventDefault();
            this.controlAndInput({action: 'down'}, this.plan, this.rolesMap);
            return;
        }
        if (event.keyCode === 8 || event.keyCode === 46) {
            event.preventDefault();
            this.controlAndInput({action: 'clear'}, this.plan, this.rolesMap);
            return;
        }
        if (event.ctrlKey && event.keyCode === 90) {
            event.preventDefault();
            this.controlAndInput({action: 'cancelClear'}, this.plan, this.rolesMap);
            return;
        }
    }

    changeOrientation(event: Event) {
        this.orientationCarriage = this.orientationCarriage === ORIENTATION_VERT ? ORIENTATION_HOR : ORIENTATION_VERT;
        this.onChangeOrientation(this.orientationCarriage);
    }

    getNumber(keyCode: number) {
        ...
    }

    getDeflection(keyCode: number) {
        ...
    }

    resetInput() {
        this.startInput = false;
        this.valueInput = '';
    }
}

export default WfmCarriageDirective;

然后在Main.ts中添加此指令：

import WfmCarriageDirective from '@/directives/wfmCarriageDirective';
Vue.directive('wfm-carriage', new WfmCarriageDirective());

也是我使用指令的模板的一部分：

<div v-for="(plan, planKey) in planMap[employee.id]"
       :class="[
       `employees-cell ${plan.idEmployee}-${planKey}`,
       {
        'weekend': plan.isWeekend || plan.isHoliday,
       'select': isSelectedCell(plan),
       'vert': isSelectedCell(plan) && isVerticalOrientation(),
       'hor': isSelectedCell(plan) && !isVerticalOrientation(),
       'not-editable': !isEditable(plan)
       }]"
       @mousedown="selectCell(plan, roleId)"
       tabindex="1"
       v-wfm-carriage="{
       plan: {value: plan, key: planKey},
       rolesMap: rolesMap[roleId],
       shifts: shiftsMap.byCode.shifts,
       orientationCarriage,
       onChangeOrientation,
       controlAndInput
       }"
>

但不幸的是，在组件初始化期间，我出现了一个错误“无法设置未定义的属性'orientationCarriage'”和“指令wfm carries bind hook中的错误：“TypeError:无法设置未定义的属性'orientationCarriage'”

我做错了什么

---

如何在bind hook中访问“this”？

真的很晚了，但这可能会有所帮助：尝试插入，而不是绑定

钩子函数 一个指令定义对象可以提供几个钩子函数（都是可选的）：

• 绑定：当指令第一次绑定到元素时，只调用一次。这是您可以执行一次性安装工作的地方
• 插入：当绑定元素已插入其父节点时调用（这仅保证父节点存在，不一定在文档中）
• 更新：在包含组件的VNode更新之后调用，但可能在其子级更新之前调用。指令的值可能已更改，也可能未更改，但您可以通过比较绑定的当前值和旧值跳过不必要的更新（请参见下面的挂钩参数）

---

尝试console.log

此

。我认为您无法在绑定中访问此上下文。因为此消息“无法设置未定义的属性'orientationCarriage'。是的，您是对的！！我如何使其可用？您好，请解释一下两者之间的区别。