首页vue3获取输入框的焦点

vue3获取输入框的焦点

时间: 2025-01-31 14:01:56 浏览: 44

在 Vue3 中，你可以使用 `ref` 或者 `v-model` 结合 `focus()` 方法来获取输入框的焦点。这里有两个示例： 1. 如果你使用的是 `ref`，可以这样做： ```html <template> <input ref="inputBox" /> </template> <script> export default { setup() { const inputBox = ref(null); // 初始化一个引用 function focusInput() { inputBox.value.focus(); // 当需要聚焦时调用这个函数 } return { inputBox, focusInput }; } } </script> ``` 在需要聚焦的时候，调用 `focusInput()` 函数即可。 2. 如果使用 `v-model` 和 `@blur` 事件： ```html <template> <input v-model="inputValue" @blur="onBlur" /> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { onBlur() { this.$refs.input.focus(); // 获取并聚焦输入框 }, }, }; </script> ``` 当用户离开输入框时，`onBlur` 方法会被触发，并自动聚焦到输入框。

阅读全文