在 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>
  • 1
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值