如何重置使用 vue-show 的 vue 模态组件以使用自动对焦

Question

我在下面使用v-show选项制作了模态组件。

<registerModal v-show="register.etcCompanyVisible" />

因此，当register.etcCompanyVisibletrue时，这个模态出现。
这个模态有一些这样的输入。

<input type="text" v-model="etcCompanyName" placeholder="name" autofocus />

首次打开此模式时，自动对焦效果很好。
然后，可以通过将register.etcComapnyVisible更改为false来关闭此模式 取消按钮 .

<button class="btn secondary" v-on:click="etcCompanyVisibleClosed()">Cancel</button>

当我再次打开模态时，自动对焦不起作用。我认为它需要为此模态提供一些重置选项，但我不知道如何做到这一点。 你能给我一些建议吗？非常感谢您的阅读。

Answer 1

我的理解是autofocus属性仅在页面加载时可靠，因此您需要自己处理焦点事件。

最简单的方法是在您的输入上放置一个引用。

<input ref="companyName" type="text" v-model="etcCompanyName" placeholder="name"/>

然后，当您启动模态时，也许您正在使用一个按钮，请将焦点调用到该$ref上。

<template>
...
<button @click="focusInput">launch modal</button>
...
</template>
<script>
...
methods:{
foucusInput() {
this.$refs.companyName.focus();
}
}

请注意，您可以使用相同的方法按特定顺序动态聚焦输入。 这是一个小提琴，演示了使用按钮单击，但您可以轻松地使用它在满足特定条件后自动从一个输入移动到下一个输入。