Question

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

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

因此，当register.etcCompanyVisible为true时，将出现此模式。
这个模态有这样的输入。

<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();
     }
  }

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

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

1 个答案: