vue回车触发事件
1.vue登录界面输入用户名回车自动聚焦密码框用户框里放:@keyup.enter.native=“keyupClick”;密码框里放::ref=“mima”在methods里:keyupClick() {this.$refs.mima.focus()},直接上代码<van-fieldv-model="username"clearabletype="tel"label="用户名"right-
·
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();
});
更多推荐



所有评论(0)