bootstrap 模态自动对焦上的 vue 输入

Question

我有一个 bootstrap-vue 模态输入

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

模态是 bootstrap-vue 模态，show/hide 由 v-if 指令控制。

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

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

Answer 1

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

模板

    <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: {

      }
    });

bootstrap 模态自动对焦上的 vue 输入

bootstrap vue input on a modal autofocus

vue.js

bootstrap-vue