oninput 封装公共util

在 Vue 中，我们可以通过自定义指令的方式来封装一个公共的 `oninput` 工具函数。

1. 在项目中创建一个新的文件夹，例如 directives，用于存放自定义指令的代码。

2. 在 directives 文件夹中创建一个新的文件，例如 `oninput.js`，用于编写 `oninput` 指令的代码。

3. 在 `oninput.js` 中定义 `oninput` 指令的行为：

export const oninput = {
  mounted(el, binding) {
    el.oninput = (event) => {
      binding.value(event.target.value);
    };
  },
  updated(el, binding) {
    el.value = binding.value;
  },
};

在上面的代码中，我们定义了 `oninput` 指令的两个钩子函数，分别是 `mounted` 和 `updated`。`mounted` 钩子函数在指令绑定到元素上时调用，用于绑定 `oninput` 事件处理器，并在输入内容发生变化时触发 `binding.value` 函数。`updated` 钩子函数在指令所在的组件更新后调用，用于更新输入框的值。

4. 在需要使用 `oninput` 指令的组件中，通过以下方式引入：

import { oninput } from '@/directives/oninput.js';

5. 在组件的 `directives` 选项中注册 `oninput` 指令：

export default {
  directives: {
    oninput,
  },
  methods: {
    handleInput(value) {
      console.log(value);
    },
  },
  template: `
    <input v-oninput="handleInput">
  `,
};

在上面的代码中，我们在组件的 `directives` 选项中注册了 `oninput` 指令，并在模板中使用 `v-oninput` 指令将 `handleInput` 函数绑定到输入框上。当输入框的值发生变化时，`handleInput` 函数会被调用，传入输入框的值。

通过以上步骤，我们就可以封装一个公共的 `oninput` 工具函数，并在需要使用的组件中引入和注册。