el-input如何使用focus方法Cannot read property ‘focus‘ of undefined

最新推荐文章于 2025-04-22 16:52:54 发布

置顶没穿胖次的猴子

最新推荐文章于 2025-04-22 16:52:54 发布

阅读量8.8k

点赞数 5

分类专栏： vue 文章标签： vue javascript js

本文链接：https://blog.youkuaiyun.com/qq_36175946/article/details/114664355

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Vue项目中如何解决input元素自动对焦的问题，通过使用自定义指令`v-focus`和设置延迟调用的方法，成功实现了模态框内input元素的自动获取焦点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做vue项目的时候想使用input的自动对焦，但是一直无法实现，最后看了好多网上的教程，忙碌了好一会儿才解决

<el-dialog
      title="提示"
      :visible.sync="readCard"
      width="30%"
    >
      <el-input id="readCardFocus" ref="readCardFocus" v-model="readCardNumber" v-focus placeholder="请输入内容" @keyup.enter.native="readCardConfirm"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="readCard = false">取 消</el-button>
        <el-button type="primary" @click="readCard = false">确 定</el-button>
      </span>
    </el-dialog>

main.js

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el) {
    // 聚焦元素
    el.focus()
    // element-ui
    el.children[0].focus()
    // 元素有变化，如show或者父元素变化可以加延时或判断
    setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

其中的v-focus是看到网上有人写的自定义标签，起初确实有用的，但是来回点击模态框，发现只有第一次有用

又找了好一会儿，终于解决了，期间也报错了Cannot read property 'focus' of undefined

<el-dialog
      title="提示"
      :visible.sync="readCard"
      width="30%"
    >
      <el-input id="readCardFocus" ref="readCardFocus" v-model="readCardNumber" placeholder="请输入内容" @keyup.enter.native="readCardConfirm"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="readCard = false">取 消</el-button>
        <el-button type="primary" @click="readCard = false">确 定</el-button>
      </span>
    </el-dialog>

readCardModel(row) {
      this.readCard = true
      const _this = this
      setTimeout(function() {
        _this.$refs['readCardFocus'].focus()
      }, 1)
      this.readCardNumber = ''
    }

就是加setTimeout，因为在调用模态框的时候，这个input还没有生成，所以加上延迟调用就解决了