Question

我有使用v-model指令的自定义输入组件，因此在输入时它发出带有值的input事件和v-mask指令，该指令通过使当前输入值与掩码一致并发出另一个{ {1}}个事件，其值已修改。但是，此方法会触发两个input事件，并切换两个模型更改-一个原始的，另一个被屏蔽的。我可以在指令中修改现有的input事件值吗？

input

const maskDirective = (() => {
      const state = new Map();
      return {
        bind: (el) => {
          const element = el instanceof HTMLInputElement ? el : el.querySelector('input');
          const textMaskInput = createTextMaskInputElement({
            inputElement: element,
            mask: TextMasks.phoneNumber,
          });
          state.set('element', element);
          state.set('input', textMaskInput);
        },
        update: () => {
          const textMaskInput = state.get('input');
          const element = state.get('element');
          const {
            state: { previousConformedValue },
          } = textMaskInput;
          textMaskInput.update();
          // otherwise there's call stack size exceeded error, because it constantly fires input event from component, catches it, and fires event from directive
          if (previousConformedValue !== element.value) {
            const event = new Event('input', { bubbles: true });
            element.dispatchEvent(event);
          }
        },
      };
    })();

如何在指令中修改事件有效负载？

0 个答案: