vue implements default focus

In Vue, when we need to set the default focus for an element when the page is loaded, we can use the v-focus directive to achieve this.

First, we need to set the v-focus directive in the directive option of the Vue instance:

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

Then, use the v-focus directive in the template to set the default focus for the specified element:

<input v-focus>

When the page loads, the input box will automatically gain focus.

In addition to setting the default focus of the input box, in some cases it is also necessary to set the default focus for other elements. For example, in a form, the cursor needs to be placed in the first text box to facilitate user input. At this point, we can use the ref attribute to name the element, and manually obtain the element and set focus in the mounted hook function:

<template>
  <form>
    <label for="username">用户名：</label>
    <input ref="username" type="text" id="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password">
    <br>
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  mounted() {
    this.$refs.username.focus()
  }
}
</script>

With the above settings, when the page loads, the text box in the form will get With the default focus, users can directly perform input operations on the text box to improve user experience.

It should be noted that in some cases, such as when multiple text boxes exist on the page at the same time, setting only the default focus may affect the user's operations in other text boxes. At this point, there are some other ways to solve the problem, such as automatically moving the cursor to the next text box when the form is submitted.

In short, to implement the default focus in Vue, you can use the v-focus directive or manually obtain the element and call the focus() method. In practical applications, it is necessary to choose the appropriate method according to the actual scenario, and consider the optimization of user experience and page interaction.

The above is the detailed content of vue implements default focus. For more information, please follow other related articles on the PHP Chinese website!