zoukankan      html  css  js  c++  java
  • 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="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
      }
    }
  • 相关阅读:
    SVN 常用keywords 记录
    HTML5新特性介绍
    php文件上传错误代码
    MySQL的 Grant命令权限分配
    前端开发工具整理
    Java多线程编程经验谈
    一套密码强度判断方案
    傲游浏览器下Flash和Js交互问题
    在xml中使用&和字符
    ibatis和myibatis
  • 原文地址:https://www.cnblogs.com/ljygirl/p/12559772.html
Copyright © 2011-2022 走看看