vue3,监听input , 聚焦，失焦

在Vue3中，监听`input`、聚焦(`focus`)和失焦(`blur`)事件通常涉及到处理用户输入以及元素状态的变化。以下是如何在组件中实现这几个事件的简单示例：

1. 监听`input`事件：
当用户在指定的`<input>`标签内输入内容时，可以在对应的`data`或`methods`里添加`v-model`指令，并监听`input`事件。例如：

<input type="text" v-model="value" @input="handleInputChange">

// methods部分
methods: {
  handleInputChange(e) {
    console.log('输入值变化：', e.target.value);
  }
}

2. 监听聚焦和失焦事件：
使用自定义的事件处理器或者直接在HTML上绑定原生事件也可以做到：

<input type="text" ref="myInput" @focus="onFocus" @blur="onBlur">

// methods部分
methods: {
  onFocus() {
    console.log('输入框聚焦');
  },
  onBlur() {
    console.log('输入框失去焦点');
  }
}

// 或者使用ref并使用 watch 或 computed 来监听变化
export default {
  setup(props, { onMounted }) {
    const input = ref(null);

    onMounted(() => {
      input.value.addEventListener('focus', () => this.onFocus());
      input.value.addEventListener('blur', () => this.onBlur());
    });

    return {
      input,
      onFocus: () => {
        console.log('聚焦');
      },
      onBlur: () => {
        console.log('失焦');
      }
    };
  }
}