龙空技术网

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

大智视野 429

前言:

如今我们对“vue渲染html字符串放input”可能比较着重,我们都需要知道一些“vue渲染html字符串放input”的相关文章。那么小编同时在网摘上收集了一些关于“vue渲染html字符串放input””的相关文章,希望你们能喜欢,小伙伴们快快来学习一下吧!

下面是本人对这节录的视频讲解,欢迎点击观看

Vue 中如何让 input 聚焦?

在做项目时,有时我们需要让 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 元素。

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

标签: #vue渲染html字符串放input