vue每次触发弹窗输入框的时候都要让输入框重新聚焦

当我们多次点击弹窗输入框的时候，会发现输入框只会自当聚焦一次，之后便不会在自动聚焦，那么要如何保持每次重新触发弹窗输入框的时候都让其保持自动聚焦呢？方案如下：

要在每次触发弹窗输入框时都让输入框重新聚焦，你可以使用 Vue.js 的 ref 属性和 $refs 对象来实现这个目标。以下是一个示例，演示如何在每次打开弹窗时让输入框聚焦：

<template>
  <div>
    <button @click="openModal">打开弹窗</button>
    <div v-if="showModal" class="modal">
      <input ref="inputField" type="text">
      <button @click="closeModal">关闭弹窗</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    openModal() {
      this.showModal = true;
      this.$nextTick(() => {
        // 使用 $nextTick 来确保 DOM 更新后再聚焦
        this.$refs.inputField.focus();
      });
    },
    closeModal() {
      this.showModal = false;
    }
  }
};
</script>