在 vue 中 input 输入框自动获取焦点

1\ 效果图
页面初始就自动获得焦点

2\ 代码实现

<template>
  <div>
    <el-input v-model="plate" type="number" id="plateInput" ref="plateRef" placeholder="请输入搜索关键字"></el-input>
  </div>
</template>

// 方法一：通过原生 JS 的 focus 方法直接获取
<script>
export default {
  data(){
    return{
      plate: ""
    }
  },
  mounted(){
    document.getElementById("plateInput").focus()
  }
}
</script>

// 方法二：通过 ref 方式
<script>
export default {
  data(){
    return{
      plate: ""
    }
  },
  mounted(){    
    this.$refs.plateRef.focus()
  }
}
</script>

// 方法三：通过自定义指令
<template>
  <div>
    <el-input v-model="plate" type="number" v-focus id="plateInput" placeholder="请输入搜索关键字"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plate: "",

    };
  },
  //自定义指令
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.children[0].focus();
        //使用官方示例 el.focus(); 不能自动获取焦点，是因为 insert是一个钩子函数，只有父节点存在，在插入父节点时调用，我这里并没有插入所以没有调用。
      }
    }
  }
};
</script>