0

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

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

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

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

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

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

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

4

1 回答 1

1

我的理解是该autofocus属性只在页面加载时才可靠，所以需要自己处理焦点事件。

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

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

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

于 2019-08-08T06:25:52.153 回答