作者:Michael Thiessen 译者:前端小智 来源:laracasts.com
本人对这节录了视频讲解,欢迎点击:https://www.ixigua.com/i67909...
在做项目时,有时我们需要让 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 生命周期,让元素聚焦:
<template> <CustomInput ref="email" /> </template>
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。