回车登录
原理:就是监听键盘事件,当按键为回车时触发相应的函数
代码:在输入框上面都加上@keyup.enter.native="handleMethod"
解释:为什么要加上native?
写在一个封装好的组件上就需要加,给组件绑定原生事件采用的方法
写在一个input标签上就不需要加
示例:
html:
<Form ref="loginForm" :model="formInline" :rules="ruleInline">
<FormItem prop="user">
<Input @keyup.enter.native="handleSubmit" v-model="formInline.user" placeholder="请输入用户名">
<span slot="prepend"><Icon :size="16" type="person"></Icon></span>
</Input>
</FormItem>
<FormItem prop="password">
<Input @keyup.enter.native="handleSubmit" type="password" v-model="formInline.password" placeholder="请输入密码">
<span slot="prepend"><Icon :size="14" type="locked"></Icon></span>
</Input>
</FormItem>
<FormItem prop="code">
<Input @keyup.enter.native="handleSubmit" v-model="formInline.code" placeholder="请输入验证码" style="width: 150px"/>
<img :src="imgUrl" alt="" @click="getValidateCode" ref="validateCode" class="validateCode">
</FormItem>
<FormItem>
<Button @click="handleSubmit" type="primary" :disabled="isDisabled" long>登录</Button>
</FormItem>
</Form>
js:
methods: {
// 登录调用的方法
handleSubmit () {
// 验证及验证之后的跳转
}
}