a-input-number绑定焦点事件

### 如何为 `a-input-number` 绑定 Focus 和 Blur 事件 对于 `a-input-number` 或类似的计数器组件，在 Vue 中可以通过自定义指令或直接利用原生 DOM 事件来实现焦点事件的绑定。尽管某些版本中的 `el-input-number` 可能未显式暴露失去焦点（blur）事件，仍然可以借助底层的 HTML 输入元素来处理这些事件。 #### 使用 Native Events 处理 Focus 和 Blur 可以直接在模板中使用 `.native`修饰符来监听包裹组件内部的实际输入框上的 focus 和 blur 事件： ```html <template> <div id="app"> <!-- 使用 .native 监听子组件内的 native events --> <a-input-number v-model="value" @focus.native="handleFocus" @blur.native="handleBlur"/> </div> </template> <script> export default { data() { return { value: null }; }, methods: { handleFocus(event) { console.log('Input focused', event); }, handleBlur(event) { console.log('Input blurred', event); } } }; </script> ``` 这种方法适用于当目标组件基于标准HTML `<input>` 元素构建时的情况[^1]。 #### 利用 Refs 获取底层实例并操作 如果上述方式不适用，则可通过 refs 来访问组件实例，并进一步调用其内置的方法或是直接操纵DOM节点: ```html <template> <div id="app"> <a-input-number ref="numberInput"></a-input-number> </div> </template> <script> import { nextTick } from 'vue'; export default { mounted() { this.bindEvents(); }, unmounted() { this.unbindEvents(); // 清除事件以防内存泄漏 }, methods: { bindEvents() { const inputEl = this.$refs.numberInput?.$el.querySelector('input'); if (inputEl) { inputEl.addEventListener('focus', this.handleFocus); inputEl.addEventListener('blur', this.handleBlur); } }, unbindEvents() { const inputEl = this.$refs.numberInput?.$el.querySelector('input'); if (inputEl) { inputEl.removeEventListener('focus', this.handleFocus); inputEl.removeEventListener('blur', this.handleBlur); } }, handleFocus(e) { console.log('Focused:', e.target.value, e); }, handleBlur(e) { console.log('Blurred:', e.target.value, e); } } } </script> ``` 此方案更灵活但也稍微复杂一些，适合那些需要更多控制权的情形下使用[^2]。