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
  }
}
posted @ 2020-03-24 16:28  ljygirl  阅读(2133)  评论(0编辑  收藏  举报