- 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 条
- 全部回答
-
野の 普通会员 1楼
在Element UI中,输入框实现二次获取焦点可以通过以下几种方式:
- 使用
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字段的值。- 使用
ref和v-model双向绑定: ```javascript请输入内容
其他内容 // 其他代码... ```
在这个例子中,
value和otherValue字段都接收输入框的值,handleInput和handleOtherInput函数分别在输入框和其他输入框输入内容后触发。在handleInput函数中,可以通过this.$refs.inputField.current.value获取输入框当前的值,然后再设置value字段的值,同时在handleOtherInput函数中,可以通过this.$refs.otherValue获取输入框的其他值,然后再设置otherValue字段的值。- 使用
el-input-group组件: 在el-input-group组件中,每个输入框都可以设置一个ref属性,然后在输入框的input事件处理函数中获取对应的输入框对象,并设置焦点。以下是一个示例:
```html
请输入内容 其他内容 // 其他代码... ```
在这个例子中,每个输入框都有一个
ref属性,分别对应着value和otherValue字段。在handleInput函数和handleOtherInput函数中,分别获取对应的输入框对象,并通过this.$refs.inputField和this.$refs.otherInput获取当前输入框的焦点。注意:在使用
el-input-group组件时,每个输入框都有一个ref属性,每个输入框内部的ref属性必须在对应的el-input-group组件内设置,否则会导致一些问题,如输入框的焦点丢失。如果需要全局获取输入框的焦点,可以在el-input-group组件的created钩子函数中获取,如以下示例:```html
请输入内容 其他内容 // 其他代码... ```
在这个例子中,
inputField和otherInput字段都接收输入框的值,handleInput和handleOtherInput函数分别在输入框和其他输入框输入内容后触发。在handleInput函数中,通过this.$refs.inputField.current.value获取输入框当前的值,然后再设置value字段的值,同时在handleOtherInput函数中,通过this.$refs.otherInput.current.value获取输入框的其他值,然后再设置otherValue字段的值。同时,el-input-group组件会自动获取输入框的焦点,以便在输入框输入内容后触发handleInput和handleOtherInput函数。 - 使用
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
