作者：Michael Thiessen

译者：前端小智

来源：laracasts.com

点赞再看，养成习惯

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

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

让 input 聚焦

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

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

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

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

const input = this.$refs.email;

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

export default {

methods: {

focusInput() {

this.$refs.email.focus();

}

}

}

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

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 加载好后，才能重新聚焦。

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。

交流

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