husky-dot/xiaozhi

Vue 中如何让 input 聚焦?(包含视频讲解)

husky-dot opened this issue · 0 comments

作者:Michael Thiessen
译者:前端小智
来源:laracasts.com

点赞再看,养成习惯

本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

本人对这节录了视频讲解,欢迎点击:https://www.ixigua.com/i6790914892317590027/

在做项目时,有时我们需要让 input 聚焦,为了让用户更好的使用。

让 input 聚焦

所有的浏览器都有一个内置的方法,让 input 聚焦。首先,我们需要获取元素。

在原生 JS 中,我们可以使用下面方式来获取元素:

<form>
  <input id="email" />
</form>

const input = document.getElementById('email');

Vue 提供了一个更好的方法:

<template>
  <input ref="email" />
</template>

const input = this.$refs.email;    

获取元素后,我们就可以让 input 聚焦了

<template>
  <input ref="email" />
</template>

export default {
  methods: {
    focusInput() {
      this.$refs.email.focus();
    }
  }
}

如果使用的是自定义组件,则$ref获取是该组件,而不是我们基础元素。 因此,如果尝试让该组件聚焦,就会报错。要获得自定义组件的根元素,我们可以用 $el 访问:

<template>
  <CustomInput ref="email" />
</template>
    
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  methods: {
    focusInput() {
      this.$refs.email.$el.focus();
    }
  }
}

但是,如果要在组件加载时就聚焦,要怎么做呢?

页面加载时聚焦

我们可以 mouted 生命周期,让元素聚焦:

import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  mounted() {
    this.focusInput();
  },
  methods: {
    focusInput() {
      this.$refs.email.$el.focus();
    }
  }
}

等待重新渲染

在某些情况下,我们可能需要等待Vue完成整个应用程序的重新渲染。例如,如果将input从隐藏状态切换到显示状态。

因此我们需要等待 input 加载好后,才能重新聚焦。

<template>
  <div>
    <CustomInput v-if="inputIsVisible" ref="email" />
  </div>
</template>

import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  data() {
    return {
      inputIsVisible: false,
    };
  },
  mounted() {
    this.focusInput();
  },
  methods: {
    showInput() {
      // Show the input component
      this.inputIsVisible = true;

      // Focus the component, but we have to wait
      // so that it will be showing first.
      this.nextTick(() => {
        this.focusInput();
      });
    },
    focusInput() {
      this.$refs.email.$el.focus();
    }
  }
}

这里,我们在 nextTick 方法中调用 focusInput 方法。因为 nextTick 中表示 Dom 已经加载完成了,所以这时我们才能获取到 input 元素。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://laracasts.com/discuss/channels/vue/vue-set-focus-to-input-created-by-v-for?page=1


交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。