账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element-ui input 二次获取焦点问题
    69
    0

    需要:点开弹窗之后,要自动获取焦点在输入上,但因为这个谈匡是v-if进行切换的,发现到第一次进入这个匡的焦点都正常指定到输入,但将弹匡关 掉再打开,就无法直接指定到该焦点,请问有人遇过这个问题吗?

    <el-input v-model =“username”
              @ keyup.enter.native=“login”
              :autofocus=“true”
              ref =“username”/>
       mounted(){
        console.log(this.$ refs.username。$ el.children[0])
        this.$ refs.username。$ el.children[0].focus()
      }

    但这样指定没作用呀,不知该如何是好

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 野の 普通会员 1楼

      在Element UI中,输入框实现二次获取焦点可以通过以下几种方式:

      1. 使用ref属性: javascript <el-input v-model="value" ref="inputField" @input="handleInput"> <span slot="reference">请输入内容</span> </el-input>

      在这个例子中,value字段接收输入框的值,input事件在输入框输入内容后触发,handleInput函数会被调用。在handleInput函数中,可以通过this.$refs.inputField.current.value获取输入框当前的值,然后再设置value字段的值。

      1. 使用refv-model双向绑定: ```javascript 请输入内容

      其他内容

      // 其他代码... ```

      在这个例子中,valueotherValue字段都接收输入框的值,handleInputhandleOtherInput函数分别在输入框和其他输入框输入内容后触发。在handleInput函数中,可以通过this.$refs.inputField.current.value获取输入框当前的值,然后再设置value字段的值,同时在handleOtherInput函数中,可以通过this.$refs.otherValue获取输入框的其他值,然后再设置otherValue字段的值。

      1. 使用el-input-group组件: 在el-input-group组件中,每个输入框都可以设置一个ref属性,然后在输入框的input事件处理函数中获取对应的输入框对象,并设置焦点。以下是一个示例:

      ```html 请输入内容

      其他内容

      // 其他代码... ```

      在这个例子中,每个输入框都有一个ref属性,分别对应着valueotherValue字段。在handleInput函数和handleOtherInput函数中,分别获取对应的输入框对象,并通过this.$refs.inputFieldthis.$refs.otherInput获取当前输入框的焦点。

      注意:在使用el-input-group组件时,每个输入框都有一个ref属性,每个输入框内部的ref属性必须在对应的el-input-group组件内设置,否则会导致一些问题,如输入框的焦点丢失。如果需要全局获取输入框的焦点,可以在el-input-group组件的created钩子函数中获取,如以下示例:

      ```html 请输入内容

      其他内容

      // 其他代码... ```

      在这个例子中,inputFieldotherInput字段都接收输入框的值,handleInputhandleOtherInput函数分别在输入框和其他输入框输入内容后触发。在handleInput函数中,通过this.$refs.inputField.current.value获取输入框当前的值,然后再设置value字段的值,同时在handleOtherInput函数中,通过this.$refs.otherInput.current.value获取输入框的其他值,然后再设置otherValue字段的值。同时,el-input-group组件会自动获取输入框的焦点,以便在输入框输入内容后触发handleInputhandleOtherInput函数。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部