vue3+ts+vite中 input聚焦和失去焦点 的事件如何写

在 Vue3 + TypeScript + Vite 中，与在 Vue3 + TypeScript 中类似，可以使用 `ref` 来获取 input 元素的引用，并使用 `v-on` 指令来绑定事件。

下面是一个示例代码：

<template>
  <div>
    <input ref="myInput" v-on:focus="onFocus" v-on:blur="onBlur" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const myInput = ref<HTMLInputElement | null>(null);

    const onFocus = () => {
      console.log('Input 聚焦了');
    };

    const onBlur = () => {
      console.log('Input 失去焦点了');
    };

    return {
      myInput,
      onFocus,
      onBlur,
    };
  },
});
</script>

在这个示例中，我们使用 `ref` 创建了一个名为 `myInput` 的引用，并将其传递给了 input 元素。然后，我们使用 `v-on` 指令将 `onFocus` 和 `onBlur` 事件绑定到了 input 元素上。

需要注意的是，在 Vite 中，需要在 `tsconfig.json` 中配置 `"module": "ESNext"`，并在 `vite.config.js` 中启用 `optimizeDeps.exclude`，以避免 Vite 将 Vue 3 的编译器打包进去。具体配置如下：

// vite.config.js
export default {
  optimizeDeps: {
    exclude: ['@vue/compiler-sfc'],
  },
};

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    // ...
  }
}

这样，在 Vite 中就可以正常使用 Vue 3 的编译器和 TypeScript 了。