Vue.js 3 在方法内使用 ref 对输入使用自动对焦

Question

我使用 Vue2，但最近尝试了 Vue 3。

我有一个简单的问题：

 <input ref="myinput" />
 <button @click="submitData" />

我想在“submitData”函数内部的“myinput”上设置“焦点”。 在 Vue 2 中它很简单（this.$refs ...），但在 Vue 3 中，他们让它变得复杂。 我看到了“设置”的示例，但对我来说没有用+我认为你只能从元素访问“值”。

有什么方法可以在方法内部的元素上执行“焦点”吗？

Answer 1

如果有人提出这个问题，寻找在 Vue3 中设置特定元素的自动对焦的方法，您可以使用 Vue 自定义指令

来实现它

const { createApp, onMounted } = Vue;

const app = createApp({})

// Register a global custom directive called `v-focus`
app.directive('focus', {
  // When the bound element is mounted into the DOM...
  mounted(el) {
    // Focus the element
    el.focus()
  }
})

app.mount('#app')

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
    <input />
    <input v-focus />
    <input />
</div>

Answer 2

您仍然可以使用 Vue 3 做同样的事情，但是如果您使用组合 api，则会有一些区别：

选项API：

const {
  createApp
} = Vue;
const App = {

  data() {
    return {

    }
  },
  methods: {
    submitData() {
      this.$refs.myinput.focus()
    }
  },
  mounted() {

  }
}
const app = createApp(App)
app.mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  Vue 3 app
  <input ref="myinput" />
  <button @click="submitData">
  Submit
  </button>
</div>

合成API：

const {
  createApp,
  ref,
  onMounted,

} = Vue;
const App = {

  setup() {
    const myinput = ref(null)

    function submitData() {
      myinput.value.focus()
    }

    return {
      myinput,
      submitData
    }
  }
}
const app = createApp(App)
app.mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  Vue 3 app
  <input ref="myinput" />
  <button @click="submitData">
  Submit
  </button>
</div>

Answer 3

在某些情况下，当输入隐藏在 v-show 或 v-if 下时，需要执行 nextTick 才能使焦点起作用。

<span
    v-show="!editMode"
    @click="handleEditionMode"
>
    {{ content }}
</span>
<input
    v-show="editMode"
    ref="input"
    v-model="content"
    aria-describedby="item-content"
    name="content"
    type="text"
    tabindex="0"
    @focusout="editMode = false"
    @keydown.enter="editMode = false"
/>

const input = ref(null),
    editMode = ref(false);

const handleEditionMode = () => {
    editMode.value = true;
    nextTick(() => {
        input.value.focus();
    });
};

Answer 4

这里缺少我找到的最简单的答案

<input type="text" autofocus />

Answer 5

我试图在加载表单组件时选择特定的输入。

上面的例子没什么用，所以我自己想出来了。

这要简单得多，恕我直言。在已安装的钩子中添加 1 个引用标签和 1 行代码。

在您想要关注的项目上放置参考标签。这里我将其命名为“formStart”，但您可以随意命名。

<form @submit.prevent="createNewRoute">
  <label for="code">Code</label>
  <input v-model="code" id="code" type="text" ref="formStart" /> <!-- REF TAG HERE -->
  <label for="type">Type</label>
  <input v-model="type" id="type" type="text" />
  /* Other inputs hidden for simplicity */
  <button type="submit">Add Route</button>
</form>

参考

mounted

钩子中的 ref 标签并

focus()

它。

<script>
export default {
  /* Other options hidden for simplicity */
  mounted() {
    this.$refs.formStart.focus(); // FOCUS ELEMENT HERE
  },
};
</script>

Answer 6

另一个普通的解决方案是：

document.getElementById("code")?.focus()

被召唤

onMounted

Answer 7

       <div
            v-if="openmodal"
            tabindex="0"
            v-focus
            @keydown.right="() => nextimage(1)"
        >
       </div>

我使用了@webcu的方法并添加了tabindex =“0”，它起作用了！

Answer 8

在 Vue 3 Composable API 中，我发现最直接的解决方案是使用 document.getElementById()。诀窍是将 .focus() 调用包装在 Vue 的 nextTick() 中

/** set focus to predetermined HTML element  */
const setFocusToElement = async () => {
  nextTick(() => {
    const element = document.getElementById('myInputId');
    if (element) {
      element.focus();
    }
  });
};

Answer 9

onMounted对我不起作用我使用了watchEffect：

const input = ref<HTMLInputElement | null>(null);
watchEffect(() => {
    if (input.value) {
        input.value.focus()
    }
});