Vue 光标焦点 - HTML

在 Vue 组件开发中，可能会需要在某个输入框获取光标焦点，以方便用户快速输入。不过，直接在 HTML 中设置 autofocus 属性不总是起作用，这时可以使用 Vue 的 ref 属性配合 mounted 生命周期函数来实现光标焦点的自动获取。

设置光标焦点

在 Vue 组件中设置光标焦点，可以使用 ref 来获取组件的 DOM 元素，然后使用 focus() 方法使其获取光标焦点。

<template>
  <div>
    <input ref="input" type="text" />
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.input.focus();
  },
};
</script>

上面的代码中，我们在 mounted 生命周期函数中使用 this.$refs.input 获取了输入框的 DOM 元素，并使用 focus() 方法使其获取光标焦点。

自动获取焦点

有时候我们需要在一个列表或表格中，打开某个编辑视图时自动获取对应的输入框焦点。这时，我们可以使用 $nextTick 函数来解决这个问题。

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <span>{{ item.title }}</span>
      <input ref="input" v-model="item.value" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: "Item 1", value: "" },
        { id: 2, title: "Item 2", value: "" },
        { id: 3, title: "Item 3", value: "" },
      ],
      editIndex: -1,
    };
  },
  methods: {
    edit(index) {
      this.editIndex = index;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
  },
};
</script>

上面的代码中，我们使用 v-for 渲染了一个包含多个输入框的列表，当用户点击编辑按钮时，使用 $nextTick 函数确保下一次 DOM 更新时输入框已经渲染出来，并使用 this.$refs.input 获取对应输入框的 DOM 元素并使用 focus() 方法使其获取光标焦点。

结尾

通过上面的代码，我们可以看到在 Vue 组件中实现自动获取焦点或光标焦点非常简单。需要记住的是，在 mounted 生命周期函数中使用 this.$refs.input 获取元素可能获取不到，因为元素还没有被渲染完毕。针对这种情况，我们可以使用 $nextTick 函数进行延迟执行，确保 DOM 元素已经渲染完毕。