vue 实现获取焦点

实现获取焦点的方法

在Vue中实现获取焦点可以通过以下几种方式完成：

使用ref和$refs

通过ref属性标记DOM元素，然后在Vue实例中通过$refs访问该元素并调用focus方法。

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

<script>
export default {
  mounted() {
    this.$refs.inputRef.focus();
  }
}
</script>

使用自定义指令

创建一个自定义指令，在指令的钩子函数中调用focus方法。

<template>
  <input v-focus />
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
}
</script>

使用autofocus属性

对于简单的场景，可以使用HTML5的autofocus属性。

<template>
  <input autofocus />
</template>

动态获取焦点

当需要根据条件动态获取焦点时，可以结合v-if和$nextTick使用。

<template>
  <input v-if="showInput" ref="inputRef" />
</template>

<script>
export default {
  data() {
    return {
      showInput: false
    }
  },
  methods: {
    showAndFocus() {
      this.showInput = true;
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
    }
  }
}
</script>

在组件中获取焦点

如果需要在子组件中获取焦点，可以通过$refs访问子组件并调用其方法。

<template>
  <child-component ref="childRef" />
</template>

<script>
export default {
  mounted() {
    this.$refs.childRef.focus();
  }
}
</script>

注意事项

• 确保DOM元素已经渲染完成后再调用focus方法，可以使用mounted生命周期钩子或$nextTick。
• 对于自定义组件，需要确保组件内部实现了focus方法或暴露了内部的DOM元素。
• autofocus属性在某些情况下可能不生效，特别是在动态渲染的场景中。