VUE 防止enter回车刷新页面

1. 概述

1.1 说明

　　在表单中，在input输入框中输入内容后进行回车操作，会直接整个页面进行刷新；此问题因为是input回车操作时直接进行了表单提交操作(回车导致form表单提交)，若想不进行页面刷新，则需组织表单提交操作。

 2. 代码

2.1 表单代码

<template>

    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" @submit.native.prevent>

        <Row :gutter="24" type="flex" justify="end">

            <Col span="12">

                <FormItem label="查询内容：" prop="content" label-for="content">

                    <Input v-model="data.content" @keyup.enter.native="handleSubmit" placeholder="请输入查询内容" element-id="content" />

                </FormItem>

            </Col>

            <Col span="12" class="ivu-text-right">

                <FormItem>

                    <Button type="primary" @click="handleSubmit">查询</Button>

                    <Button class="ivu-ml-8" @click="handleReset">重置</Button>

                </FormItem>

            </Col>

        </Row>

    </Form>

</template>

2.2 代码功能

表单阻止提交操作：@submit.native.prevent
输入框中enter回车操作：@keyup.enter.native="handleSubmit"