elementui弹框中input在弹框来回切换情况下保持自动聚焦

<el-button

                  @click="handleAntiClick"

                  type="primary"

                  size="small"

                  >弹框

</el-button>

 

<el-dialog

            title="注射"

            :visible.sync="AntiDialogVisible"

            width="30%"

            class="schDialog"

            center

          >

            <div>

              <el-form ref="form" :model="form" label-width="80px">

                <el-form-item label="护工工号">

                  <el-input

                    v-model="form.jobNum"

                    placeholder="请输入或者扫描工号"

                    autofocus

                    v-focus

                    clearable

                    style="width:250px;"

                    ref="inputNum"

                    @keyup.enter.native="handleAntiOk"

                  ></el-input>

                </el-form-item>

                <el-form-item label="注射时间">

                  <!-- <el-input v-model="form.rejTime"></el-input> -->

                  <el-date-picker

                    v-model="form.rejTime"

                    type="datetime"

                    placeholder="选择日期时间"

                    :clearable="false"

                  ></el-date-picker>

                  <i style="color:red;font-size:12px;">抗生素有效期为30分钟</i>

                </el-form-item>

              </el-form>

            </div>

            <span slot="footer" class="dialog-footer">

              <el-button @click="AntiDialogVisible = false">取 消</el-button>

              <el-button type="primary" @click="handleAntiOk">确 定</el-button>

            </span>

</el-dialog>

 

data(){

　　return{　　　　

　　　　AntiDialogVisible: false,

     　　 form: {

        　　jobNum: '',

        　　rejTime: new Date(2020, 2, 2, 2, 2, 2),

        　　apply_id: ''

     　　 }

　　}

}

// 自定义v-focus指令

directives: {

    focus: {

      // 指令的定义

      inserted: (el) => {

        // 聚焦元素

        el.querySelector('input').focus()

        // el.focus()

      }

    }

  },

// 使用witch进行监听，从而赋予状态

watch: {

    AntiDialogVisible(newVal, oldVal) {

      // console.log(newVal)

      if (newVal === true) {

        this.$nextTick(() => {

          // 自动获取焦点 element组件autofocus失效

          this.$refs.inputNum.focus()

          this.$refs.inputNum.$el.querySelector('input').focus()

        })

      }

    }

  }，

methods:{

　　handleAntiOk(){

　　　　this.AntiDialogVisible = false

　　}

}