vue 回车触发聚焦 @keyup.enter.native


1.vue登录界面输入用户名回车自动聚焦密码框


用户框里放：@keyup.enter.native="keyupClick";
密码框里放:：ref="mima"
在methods里：

keyupClick() {
      this.$refs.mima.focus()
},

直接上代码

  <van-field
    v-model="username"
    clearable
    type="tel"
    label="用户名"
    right-icon="question-o"
    placeholder="请输入手机号"
    left-icon="contact"
    @click-right-icon="$toast('用户名必须是手机号')"
    @keyup.enter.native="keyupClick"
  />
  <van-field
    v-model="password"
    clearable
    type="password"
    label="密码"
    right-icon="question-o"
    placeholder="请输入6-12位数密码"
    left-icon="closed-eye"
    ref="mima"
    @click-right-icon="$toast('密码必须是数字、字母')"
    @keyup.enter.native="onClickButtonSubmit"
  />

注意：v-model数据层一定要在@keyup.enter.native 事件之前。
在methods里

keyupClick() {
  this.$refs.mima.focus()
},

2.@keyup.enter.native跟@keyup.enter区别

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符，只有Button 组件可以监听 click 事件。

补：
3.点击按钮聚焦
在$refs前加nextTick，

否则直接this.$refs.reps.focus()使用不了

      this.$nextTick(() => {
        this.$refs.reps.focus();
      });
————————————————
版权声明：本文为CSDN博主「努力，加油，奋斗」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43681948/article/details/101109268