input自动聚焦问题

div包裹文本和input框，如何让input自动聚焦？

new Vue({
  el: "#app",
  template: `<div>账号：<input type='text' v-model='account'></div>`,
  data() {
    return {
      account: ''
    };
  },
});

1、原生方式

new Vue({
  el: "#app",
  template: `<div>账号：<input type='text' v-model='account'></div>`,
  data() {
    return {
      account: ''
    };
  },
  mounted() {
    document.querySelector('input').focus();
  },
});

在mounted阶段，通过document.querySelector('input')获取当前的节点，然后通过focus内置方法进行聚焦。

2、利用vue中的ref

new Vue({
  el: "#app",
  template: `<div>账号：<input ref='inputRef' type='text' v-model='account'></div>`,
  data() {
    return {
      account: ''
    };
  },
  mounted() {
    this.$refs.inputRef.focus();
  }
});

在mounted阶段，通过this.$refs.inputRef获取当前的节点，然后通过focus内置方法进行聚焦。

3、利用vue的自定义指令

new Vue({
  el: "#app",
  template: `<div>账号：<input v-focus type='text' v-model='account'></div>`,
  data() {
    return {
      account: ''
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  },
});

通过选线directives定义指令focus，在其inserted阶段对节点el通过focus内置方法进行聚焦。然后，在input标签上增加v-focus即可实现自动聚焦。

总结

input方式的聚焦实现，主要是先获取其节点，然后通过focus内置方法对其进行聚焦的处理。