下面是本人对这节录的视频讲解,欢迎点击观看
Vue 中如何让 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 元素。
作者:Michael Thiessen 译者:前端小智 来源:laracasts.com原文:https://laracasts.com/discuss/channels/vue/vue-set-focus-to-input-created-by-v-for?page=1
页面更新:2024-03-13
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号