回車登錄
原理:就是監(jiān)聽鍵盤事件尘奏,當(dāng)按鍵為回車時觸發(fā)相應(yīng)的函數(shù)
代碼:在輸入框上面都加上@keyup.enter.native="handleMethod"
解釋:為什么要加上native马昨?
寫在一個封裝好的組件上就需要加狠裹,給組件綁定原生事件采用的方法
寫在一個input標(biāo)簽上就不需要加
示例:
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: {
// 登錄調(diào)用的方法
handleSubmit () {
// 驗證及驗證之后的跳轉(zhuǎn)
}
}