在模态自动对焦上引导 vue 输入

Posted 2023-02-22

【中文标题】在模态自动对焦上引导 vue 输入

【英文标题】：bootstrap vue input on a modal autofocus

【发布时间】：2019-11-24 00:16:47

【问题描述】：

我在模式上有一个 bootstrap-vue 输入

<b-form-input  id="inputText1" ref="inputText1" v-model="inputText" autofocus></b-form-input>

模态是 bootstrap-vue 模态，显示/隐藏由 v-if 指令控制。

当模式打开时，输入具有焦点。如果我关闭模式，输入将不再具有焦点。

我尝试在每次安装模态框时设置自动对焦属性，但它仍然没有对焦。我也尝试过使用 $nextTick。

【问题讨论】：

autofocus 上的 autofocus 属性仅在安装表单控件时才有效。如果您的模式设置为static 模式（没有lazy 选项），输入将被安装但不可见/隐藏。在这种情况下，自动对焦将不起作用。如果static，模态需要设置lazy 属性，或者模态不需要是静态的。

请注意，在 BootstrapVue v2.0.0-rc.21 中添加了特殊的 autofocus 属性/功能。确保您使用的是最新版本。

是的，自动对焦有效。我想我的想法是错误的，我认为如果用户点击编辑，看到输入并且他们中的第一个被聚焦，那么应该很清楚他可以编辑输入字段。我的错。感谢任何人。我应该删除这个问题吗？

【参考方案1】：

我建议你使用 v-model 和 vue bootstrap modal

模板

    <template>
      <div>
        <b-button @click="showModal= !showModal">Open your bmodal</b-button>
        <b-modal v-model="showModal">Yor modal is active!</b-modal>
        <b-form-input  id="inputText1" ref="inputText1" v-model="inputText" autofocus></b-form-input>

      </div>
    </template>

vue 代码

    new Vue(
      el: '#app',
       data() 
      return 
        showModal: false
      
    ,
  watch:
    showModal:function(value)
     // set the focus when the modal opened/closed
      this.$refs.inputText1.focus();
    
  ,
      mounted()
        // set the focus when the component opened
         this.$refs.inputText1.focus();
      ,
      methods: 

      
    );