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

在 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 元素上。

在 `setup` 函数中，我们定义了 `onFocus` 和 `onBlur` 事件处理函数，并将它们作为组件的返回值。当 input 元素聚焦和失去焦点时，这些事件处理函数就会被触发，从而执行相应的操作。