el-input自动获取焦点并选中值

最新推荐文章于 2024-07-17 14:47:00 发布

前端开心果

最新推荐文章于 2024-07-17 14:47:00 发布

阅读量5k

点赞数 3

分类专栏： vue 文章标签： el-input

本文链接：https://blog.csdn.net/qq_38157825/article/details/115916895

版权

vue 专栏收录该内容

116 篇文章 11 订阅

订阅专栏

elementUI中的输入框 el-input 自动获取焦点并选中输入框里面的值
实现方式：使用自定义指令实现
在这里插入图片描述

<el-input type="text" ref="inputName" v-model="name" v-focus></el-input>

directives: {
  focus: {
    inserted: el => {
      //因为el-input这是个组件，input外面被一层 div 包裹着
      //el打印出来是外面这个 div，需要找到内层的input
      el.querySelector('input').focus() // 获取焦点
      el.querySelector('input').select() // 选中文字
    }
  }
},