vue回车触发事件（提交表单，刷新列表等）

回车登录

原理：就是监听键盘事件，当按键为回车时触发相应的函数
代码：在输入框上面都加上@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 () {
        // 验证及验证之后的跳转        
    }
} 

网站导航

网站导航