zoukankan      html  css  js  c++  java
  • 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"

  • 相关阅读:
    leetcode 77 组合
    leetcode 40组合总和 II
    leetcode 216 组合总和III
    弹性伸缩 AS(Auto Scaling)
    弹性计算服务(Elastic Compute Service) / 云服务器 ECS
    云计算概述
    Zabbix Proxy 分布式监控
    Zabbix 自动发现 & 自动注册
    LVS-DR 模式
    GoAccess 监控工具
  • 原文地址:https://www.cnblogs.com/ajuan/p/15561720.html
Copyright © 2011-2022 走看看