vue -elementUI 输入框el-input 聚焦/失焦

最新推荐文章于 2025-03-14 10:57:27 发布

咩有猫腻.

最新推荐文章于 2025-03-14 10:57:27 发布

阅读量8.2k

点赞数 1

分类专栏： vue+element+echarts+map

本文链接：https://blog.youkuaiyun.com/DcTbnk/article/details/116043688

版权

vue+element+echarts+map 专栏收录该内容

71 篇文章

订阅专栏

本文介绍如何在Vue.js中使用v-focus和@blur指令处理输入框的聚焦与失焦事件。通过v-model绑定数据，配合@change、@blur事件监听输入变化及失去焦点时的操作。同时展示了如何注册并使用自定义指令v-focus，实现元素的自动聚焦。

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

html

聚焦加v-focus，失焦加@blur

<el-input v-model="scope.row.bcsl" v-focus size="small" auto-complete="off" @change="textChange(scope.$index, scope.row)" @blur="inputBlur" />

js

聚焦需----注册focus

<script>
...
export default {
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted(el) {
        // 聚焦元素
        el.querySelector('input').focus()
        console.log(el)
      }
    }
  },
  ...
  data() {},
  methods:{
     // 失焦
     inputBlur(){},
     ...
  }
  ...
}
</script>