element-ui vue input输入框自动获取焦点聚焦方式

目录

• element-ui vue input输入框自动获取焦点聚焦
• 方法一
• 方法二
• vue输入框自动获取焦点的三种方式
• 方式一：原生JS操作DOM
• 方式二：ref方式实现
• 方式三：使用自定义指令
• 总结

element-ui vue input输入框自动获取焦点聚焦

有时候会遇到要输入框自动获取焦点的情况，解决如下： 

方法一

步骤：

1.在script中写directives,注册一个全局的自定义指定 v-focus

 directives: {
   focus: {
      inserted: function(el) {
        el.querySelector("input").focus();
      }
    }
 },

2.在input框直接使用

方法二

步骤：

1.给输入框设置一个ref

2.在需要的时候操作ref获取焦点

this.$refs.saveTagInput.focus();

vue输入框自动获取焦点的三种方式

方式一：原生JS操作DOM

方式二：ref方式实现

方式三：使用自定义指令

main.js中

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  },
  update: function (el) {
    // 聚焦元素
    el.focus()
  }
})

vue文件中

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。